qu'est-ce que c'est ?

Oui, c'est ce gros bordel au-dessus. En fait je l'ai fait de la même manière que celui qui est à l'accueil.
A la base d'ailleurs, j'aurais dû faire un tuto sur l'autre mais j'ai décidé d'en faire un exprès pour ce tuto, ce tuto qui est très long d'ailleurs, ne m'en voulez pas trop. Mais, ne vous découragez pas en lisant ça, maintenant que j'ai réussi, je vais partager mon savoir avec vous de la manière la plus simple et la plus rapide qui soit ! :)

comment faire ?

Tout d'abord, il nous faut une image de base. Je vous en ai fait une exprès pour le tutoriel, vous vous rendez compte de la chance que vous avez ?! Donc on va travailler sur le deuxième exemple du haut car c'est celui-là que j'ai fait à l'occasion du tutoriel, l'image de base se trouve ici. En premiers lieux nous allons faire du CSS donc je vous invite à ouvrir la feuille de style dans Apparence > Modifier le thème > Ajouter du CSS.

Nous allons créer une class CSS, pour cela, suivez le modèle ci-dessous

Je vous explique. Deja, le nom de votre class se trouvera à la place de nomdevotreclass, vous pourrez le nommer comme vous voudrez, moi je le nommerai majbg lors de ce tutoriel, maj pour Mises à jour et bg pour Background.
Pour background-image, vous insérez l'url de l'image de base donnée plus haut entre les parenthèses.
background-repeat gère la répétition de votre fond, ici elle est désactivé car on a écrit no-repeat, pour l'activer il suffit de remplacer par repeat.
height et width correspondent respectivement à la hauteur et la largeur de votre image, ici elle fait 161 pixels de hauteur et 503 pixels de largeur, à vous de modifier ça selon l'image que vous utilisez.

Voila, nous avons fini de créer la première class qui encadre l'image, maintenant il faut créer celle qui encadrera le cadre avec scrollbar car c'est lui qui contiendra votre texte et les édits de vos MAJ.

Sautez une ligne dans votre feuille de style CSS et écrivez

Comme pour la premiere class, vous remplacerez nomdevotreclass2 par un nom de votre choix différent du précédent.
Pour ce tuto j'utiliserai le nom de scrollbox puisque l'on aura une sorte de boîte avec une scrollbar.
relative derriére position permet de placer votre ensemble correctement par rapport au reste de l'article, c'est à dire que si vous le mettez en haut, il sera en haut et ne passera pas par dessus votre texte en bas, pareillement si vous le mettez en fin d'article.
La valeur qui suit top déterminera la position de votre boîte par rapport au bord supérieur de l'image (A remplacer par bottom si vous souhaitez le faire par rapport au bas) et la valeur qui suit left par rapport au bord de gauche (A remplacer par right si vous souhaitez le faire par rapport au bord de droite). Les valeurs de l'exemple sont approximatives, à vous de jouer en changeant les chiffres pour trouver la bonne combine.

On va s'arrêter là pour le CSS, bien sûr, si certaines valeurs ne conviennent pas, rien ne vous empêchera de les modifier par la suite.

Maintenant, on va faire votre article. En fait, le seul truc que vous devez faire c'est votre cadre avec scrollbar, donc je vous invite à jeter un coup d'oeil au tutoriel à ce sujet. Pour la hauteur vous devrez mettre 132px et pour la largeur 300 car c'est la taille exacte du cadre gris dans lequel seront écrite les nouveautés.

Une fois fait, vous restez sur l'edition du code HTML et vous allez encadrer votre boîte avec scrollbar à l'aide des deux class que l'on a créées au préalable. Pour cela vous rajoutez au tout début de votre code HTML

Donc à la place de majbg (Qui permettra de mettre l'image de base en fond) et scrollbox (Qui encadre votre boîte avec scrollbar) vous metterez les nom de class que vous avez choisit si ce ne sont pas ceux-là.

Et bien évidemment, comme l'on à ouvert deux balises, il faut aussi fermer les deux.
C'est pourquoi vous allez rajouter tout à la fin de votre code HTML

Enregistrez un peu pour voir.. Alors, tout est bon ?
Non ? C'est décalé ? Et bien vous réouvrez votre feuille de style CSS, et vous jouez avec les chiffres afin de trouver l'emplacement idéal.

Si vous avez rencontrez des problèmes lors de ce tutoriel, n'hésitez pas à m'en faire part dans un commentaire, j'y répondrai dès que possible.

qu'est-ce que c'est ?

Bon, je pense que tout le monde connait le verbe défiler donc je ne vais pas donner sa définition ici.
Néanmoins, voici deux exemples de directions de défilements qui vous sauront possibles au cour de ce tutoriel.

Mon texte defile de droite a gauche
Mon texte defile de gauche a droite

On peut bien évidemment faire défiler de haut en bas et de bas en haut ainsi que remplacer le texte par des images.

comment faire ?

Tout d'abord vous ouvrez le module ou l'article dans lequel vous souhaitez faire défiler votre texte ou vos images, mettez votre texte ou vos images en question de la manière que vous voulez puis cliquez sur le bouton HTML de votre article afin de rajouter les balises qui permettront le défilement dont il est question.

Observez votre code, si vous n'avez pas changé l'alignement par défaut de votre texte ou images vous devriez avoir un <p> au début et à la fin </p>, p c'est pour paragraphe. Lorsque vous allez ajouter le code qui sera donné plus loin, vous devrez le mettre juste après le premier <p> et tout de suite avant le dernier </p> car si votre défilement est en dehors du paragraphe, et bien votre paragraphe ne défilera pas, logique.

Le code HTML de base utilisé pour le défilement est celui-ci qui se placera directement après <p>

<marquee> c'est la balise par défaut utilisée pour les défilements, ci-dessus elle est suivit de direction qui représente justement la direction de votre contenu, pour définir sa direction vous remplacerez * par, selon votre choix, right pour aller vers la droite, left pour aller vers la gauche, up pour aller vers le haut ou down pour aller vers le bas. Enfin, l'attribut scrollamount détermine la vitesse de votre défilement, ** doit être remplacé par un chiffre qui fixera le nombre de pixels qu'il y aura entre chaque déplacements, plus le chiffre sera grand, plus le déplacement sera rapide et inversement.

Il faut également écrire cette fin de code qui permettra de fermer la balise et se placera juste avant </p>

Ce tutoriel touche à sa fin, si vous avez bien suivit et compris le principe, vous devriez normalement avoir le résultat souhaité à la base. Toutefois si vous rencontrez des problèmes, je vous invite à m'en faire part dans les commentaires, je vous répondrai le plus rapidement possible.

qu'est-ce que c'est ?

Voici différents styles de curseurs par défaut que vous pourrez choisir lors du tutoriel.
Passez votre curseur sur les textes pour voir les différentes formes de curseurs.

Main (pointer)
Texte (text)
Viseur (crosshair)
Attente (wait)
Objet déplaçable (move)
Curseur par défaut (default) 
Point d'interrogation  (help)

Changer la taille vers le haut (n-resize)
Changer la taille vers le bas (s-resize)
Changer la taille vers la droite (e-resize)
Changer la taille vers la gauche (w-resize)
Changer la taille haut+droite (ne-resize)
Changer la taille haut+gauche (nw-resize)
Changer la taille bas+droite (se-resize)
Changer la taille bas+gauche (sw-resize)
 

comment faire ?

Comme d'habitude, commencez pas ouvrir la feuille CSS de votre blog
Apparence > Modifier le thème > Ajouter du CSS

Copiez/collez le code qui suit

body représente le corps de la page, il encadre tout votre blog donc les modifications que l'on pourra écrire entre crochets à sa suite se feront sur tout votre blog. cursor c'est votre curseur, dans l'exemple il est suivit de wait qui représente le curseur d'Attente, pour avoir un autre curseur que celui-ci, il vous suffit de remplacer wait par le nom du curseur de votre choix qui se trouve entre parenthèses plus haut.

Si vous souhaitez mettre une image (GIF, PNG, JPG, etc.)  pour avoir un curseur
entièrement personnalisé, c'est ce code là qu'il vous faut insérer

qu'est-ce que c'est ?

Pour les exemples je vais me servir des derniers icons que j'ai fait.
Voila ce que devrait donner le résultat de ce tutoriel, passez votre souris dessus.

comment faire ?

Pour commencer, ouvrez la feuille CSS de votre blog
Apparence > Modifier le thème > Ajouter du CSS

1. APPLIQUER L'EFFET DU PREMIER ICON (Opaque > Transparent)

Copiez/collez le code suivant dans votre feuille

img c'est le sélecteur par défaut de la totalité des images présentes sur votre blog, lorsque l'on rajoute la variante :hover à un sélecteur ça ne le concerne que lorsque l'on passe la souris dessus.
opacity c'est l'opacité de l'image, il est suivit de la valeur 0.8 dans l'exemple ci-dessus mais vous pouvez changer la valeur à votre guise entre 0.0 et 1, 0.0 étant totalement transparent et 1 totalement opaque.

2. APPLIQUER L'EFFET DU DEUXIEME ICON (Transparent > Opaque)

Copiez/collez le code suivant dans votre feuille

Inutile de réecrire les même explication du haut concernant le deuxième bloc, penchons nous sur le premier.
Donc img c'est toujours le sélecteur par défaut des images de votre blog, sauf que cette fois il n'est pas suivit de la variante :hover et donc il concerne l'image lorsque qu'elle n'est pas touchée. Dans l'exemple l'opacité de l'image à une valeur de 0.8 mais comme dit plus haut, vous pouvez la changer à votre guise. Ainsi, l'image paraitra transparente à première vue. L'utilité du deuxieme bloc maintenant, c'est de rendre l'image "normale" au passage de la souris, du coup l'opacité est réglée sur 1 (Totalement opaque) et au passage de votre souris vous verez l'image et ses couleurs originales.

qu'est-ce que c'est ?

comment faire ?

Pour commencer, vous ouvrez votre feuille CSS qui se trouve dans
Apparence > Modifier le thème > Ajouter du CSS

Puis vous copiez ce code

a est le sélécteur des liens du blog par défaut.
text-shadow c'est notre fameuse ombre qui vient derriere nos liens et il est suivit de quatre valeurs, la première c'est l'axe horizontal de l'ombre par rapport aux liens (en px), la deuxième c'est l'axe vertical (en px) et la troisième réprésente la "dureté" (en px) de l'ombre en quelque sorte, c'est à dire que plus le chiffre sera petit, plus l'ombre sera flou ou bien inversement, plus le chiffre sera grand, plus l'ombre sera nette.
Enfin, la couleur, à la place de #ffffff, vous pouvez notez le code héxadecimal de la couleur de votre souhait, ainsi, votre ombre aura la couleur définie.

un peu plus d'approfondissement

Pour appliquer tout ceci aux textes et non aux liens, il suffit de remplacer notre a par un p.
Ce qui nous donne :