Personnaliser son blog - Catégories et Mes derniers avis à lire

Voilà un billet un peu spécial. Cela fait plusieurs fois qu'on me demande comment j'ai fait pour faire et mettre des vignettes pour mes catégories de livres. Je pense qu'il y a d'autres façons de faire, moi je vais vous montrer comment j'ai fait. Je ne suis pas une pro mais si ça peut vous aider à personnaliser votre blog alors tant mieux.

Avant de commencer, je précise que je suis sous la plus récente version de blogger et que je ne sais pas si sur l'ancienne vous retrouverez les mêmes termes. Et pour les autres plateformes je ne sais pas non plus mais il doit y avoir des équivalences dans les fonctions.

Pour des catégories personnalisées:

*Avant tout, choisissez des images qui vous plaisent, moi c'est principalement des couvertures de livres mais on peut choisir ce qu'on veut.
Ps : Évitez de choisir les mêmes que les miennes, merci^^

*Ensuite, je les retravaille sur paint, mais n'importe quel logiciel de retouche fera l'affaire. Je vais au plus simple en coupant/rognant les parties qui me plaisent le plus. Ensuite j'écris le genre auquel je veux l'associer. Bref, laisser parler votre imagination et faite les montages ou simple coupures qui vous parle.

*Une fois que c'est fait, vous vous ouvrez un billet vierge dans lequel vous allez y mettre vos images réalisées. 

- Ensuite il faut que vous associiez chaque image avec le lien correspondant au genre qu'il lui est rattaché. Une image est par défaut associée à une adresse donc il faut cliquer une première fois sur associer puis recliquer dessus pour mettre le lien que vous voulez et qui au moment de cliquer dessus vous conduira là où il faut.

1. Associer

2. Associer une nouvelle fois

3. Une fenêtre de lien va s'ouvrir

4. Là il faut mettre le lien de la catégorie visée, celui de l'image concernée. Ce lien se trouve grâce à vos mots clés. Pour cela allez à la fin d'un billet avec le mots clés recherché et cliquez dessus.

Exemple là, je clic sur Dystopie et dans ma barre d'adresse j'obtiens http://bloggalleane.blogspot.fr/search/label/Dystopie. C'est ça que je dois mettre dans ma case Adresse Web. 

5. Vous faites ça pour toutes vos images. Vous gardez votre article toujours ouvert et allez ensuite vous allez dans votre mise en page, dans une nouvelle fenêtre, et il vous faut ajouter le gadget html/javascript. 

6. Vous revenez à votre article avec vos images, vous basculer dans le mode html, vous copiez tout et coller ensuite le tout dans votre gadget. Et voilà^^. 

A noter que mes images dans mon billet de départ sont centrées et qu'elles le seront aussi du coup aussi dans la colonne du gadget. Sinon, elles seront alignées sur la gauche par défaut ou sur la droite si vous les mettez à droite dans votre billet. Mais vous faîtes comme vous préférez.

Pour le menu Derniers Avis:

La méthode est la même, le gadget aussi. Je remets mes explications sans détailler sauf précisions différentes.

Toujours dans un billet vierge, on se prépare ses images, là pour moi c les couvertures entières. Mais pareil si vous préférez vous faire un montage c pareil.

1. Associer

2. Associer une seconde fois.

3. On met son petit lien, de l'avis du livre concerné

4. On ajoute un nouveau gadget html/javascript, que moi j'ai placé sous mon en-tête/gadget pages (voir première image du billet) mais qui peut être placé aussi au dessus du gadget Messages du blog.

5. On reviens dans le billet où on a préparé ces couvertures, on bascule dans le mode html, on copie et on colle dans le gadget.

Note : Mes images sont à la taille "petit", mais vous les mettez à la taille que vous souhaitez. Si vous ne savez pas comment, je peux rajouter des infos. 

Bien sûr il faudra refaire cette opération aussi souvent que vous mettrez des billets, moi je fais la mise à jour une fois par semaine. Oui je suis un peu feignante.

Voilà pour les informations de bases. Si vous avez des questions, n'hésitez pas. A vous de jouer maintenant :D

--------------------------------------------------------------
Edit du 27/04/13

Animer ses images ou son texte:
Le code que j'ai mis est : <marquee direction="left" scrollamount="2"> code html image </marquee>
Ce qui est commun pour toutes les opérations que je vais évoquer : <marquee direction="" scrollamount=""></marquee>

1. Effet de mouvement:
Suivant l'effet voulu, il vous faudra alors changer les indications entre les guillemets.
Mouvement de droite à gauche : <marquee direction="left"> code html image </marquee>
Mouvement de gauche à droite : <marquee direction="right"> code html image </marquee>
Mouvement de haut en bas : <marquee direction="dawn"> code html image</marquee>
Mouvement de bas en haut : <marquee direction="up"> code html image </marquee>

2. Vitesse de mouvement:

Dans mon premier code : <marquee direction="left" scrollamount="2"> code html image </marquee>, la mention scrollamount définit la vitesse de défilement des images. Plus le chiffre est bas, plus la vitesse l'est également et inversement.

3. Image qui s'arrête si on pointe le curseur de la souris dessus :

Le code à mettre est : <marquee direction="left" onmouseout="this.start();" onmouseover="this.stop();" scrollamount="2"> code html image </marquee>

Pour varier les effets, se référer au petit 1, puisqu'on y retrouve le code de base.

Remarques:

*Les codes marchent aussi avec du texte. A la place du code html de l'image, il suffit de mettre votre texte.

*Je ne sais pas si ça fera pareil sur toutes les plate-formes, mais chez moi les modifications de directions, de vitesses et d'arrêt sur curseur ne se voient qu'une fois l'article publié. A l'aperçu on peut néanmoins jauger la vitesse et la direction.

*Pour les effets haut et bas, quand les images sont côtes à côtes, elles effectuent ce mouvement comme un bloc, côtes à côtes. Sinon il faut les mettre l'une sur l'autre.