Bonsoir cher(e)s Cowblogueurs, Cowblogueuses,

Après quelques semaines de longues recherches acharnées, nous avons enfin trouvé LE code à insérer dans votre HTML. C'est un code très simple à utiliser, qui va vous permettre de fabriquer des diaporamas avec vos photos préférées !

Pour avoir des exemples, regarder un peu les photos des deux articles suivants :
✿. L'exemple de Coraline.
✿. L'exemple d'Old Boy.


Avant de commencer toutes explications, du pourquoi, du comment, est construit ce code, il vous faut au maximum 5 URL d'images à insérer dans le diaporama. On les nommera donc :

URL1, URL2, URL3, URL4, et URL5.

Bien entendu, vous remplacerez ces termes par les véritables URL de vos images.


Le code se décompose en deux parties :

✿. La première qui regroupe l'image principale, en clair, celle qui apparaîtra, la première, en grand dans le diaporama.
✿. La seconde qui regroupe les cinq vignettes au maximum, c'est-à-dire, les images miniaturisées qui se situent sous l'image principale.

On distingue ces deux parties, grâce aux deux <br /> situé entre les deux.

Remarque :
✿. Le NB1 représente la largeur de l'image principale.
✿. Le NB2 représente la largeur des images des vignettes.
Attention, le NB2 doit être le même pour toutes les vignettes.



N'oubliez pas de changer les termes fictifs, par vos propres envies !

Bonsoir cher(e)s Cowblogueurs, Cowblogueuses,

Après plusieurs demandes de votre part, nous, les administratrices, avons décidé de créer une nouvelle catégorie, s'intitulant Tutoriel, et qui a pour but, de vous aider, si nous le pouvons, à comprendre certaines choses techniques concernant, avant tout le CSS et le HTML, moyens d'esthétiser votre blog, et très utilisés sur la plateforme de Cowblog.

Ce soir, après la demande de la Cowblogueuse Cassyopee, nous allons vous apprendre, comment mettre une image de fond dans certains de vos articles, pour pouvoir ainsi, écrire ce qui vous chante dessus. Mais pas seulement !! Car avec cette procédure, vous pourriez insérer toutes sorte d'esthétique pour vos articles, les rendant plus attrayants, plus à votre goût.


Tout d'abord, il faut entrer dans la fenêtre source de l'article.
Ensuite recopier le code :


Ensuite, remplir les balises avec les codes du CSS que vous connaissez.



Mais attention tout est paramétrable :
♦ Si vous voulez que l'image se répète : repeat
♦ Si vous voulez que l'image ne se répète pas : no-repeat
♦ Si vous voulez que l'image se répète en hauteur : repeat-y
♦ Si vous voulez que l'image se répète en largeur : repeat-x
♦ Si vous voulez positionner l'image ajouter un : margin:Xpx;
♦ Si vous voulez positionner le texte ajouter un : padding:Xpx;



Mais attention tout est paramétrable :
✿. Si vous voulez qu'il y ait une bordure : border: Xpx solid #XXXXXX;
✿. Si vous voulez qu'il y ait une bordure arrondie :  -moz-border-radius: Xpx;
✿. Si vous voulez qu'il y ait une couleur de fond : background-color:#XXXXXX;
✿. Si vous voulez qu'il y ait une image de fond : voir paramètre du dessus.
✿. Rajouter les padding et les margin pour la position : voir paramètre du dessus.

Les paramètres de la bordure :
✿. Si vous vouliez une bordure pleine : solid
✿. Si vous voulez une bordure en pointillés : dotted
✿. Si vous voulez une bordure en tirets : dashed
✿. Si vous voulez une double bordure : double
✿. Si vous ne voulez pas de bordure : none
✿. Si vous voulez une bordure cachée : hidden
✿. Si vous voulez une bordure en relief : groove
✿. Si vous voulez une bordure en effet 3D : ridge
✿. Si vous voulez une bordure rentrante : inset
✿. Si vous voulez une bordure sortante : outset


En clair, la balise : <div style="vos souhaits">Votre texte</div> peu combler vos quelques souhaits, si vous vous connaissez un peu en CSS ! On espère que ce petit tutoriel vous sera utile, et qu'il est bien expliquer, sinon demandez-nous ! Si vous souhaiter connaître plus de sujet, demandez-le nous ici, on sera ravie de vous aider.