vendredi 17 août 2012

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.

51 commentaires:

  1. merci à toi pour cette explication très complète... Elle me fait réfléchir d'ailleurs à un petit rafraîchissement de ma page...

    RépondreSupprimer
    Réponses
    1. J'espère que ça ira, je n'étais pas sur en écrivant, j'ai eu peur que ce ne soit pas compréhensible^^ Ce qui est bien avec les vignettes c'est qu'en plus tu peux en changer comme tu veux.

      Supprimer
  2. :D
    "Ps : Évitez de choisir les mêmes que les miennes, merci"
    Au moins c'est dit :)


    Sur wordpress, c'est le même principe que j'ai utilisé,... c'est vrai que c'est plus sympa qu'un simple lien texte


    très bonne journée

    RépondreSupprimer
    Réponses
    1. Ah ça me paraît logique et c'est de la politesse. Oui et on peut changer dès qu'on en a marre.

      Supprimer
  3. Fait moi un bébé XD
    Sérieusement merci beaucoup ça va m'être utile :D

    RépondreSupprimer
  4. On me pose aussi des questions dessus (surtout pour les catégories personnalisées). Je ne fais pas tout à fait pareil que toi, les miennes de sont pas centrées, mais ça revient au même ^^

    RépondreSupprimer
    Réponses
    1. Moi j'ai un tic, faut que tout soit soit justifié, soit centré. Mais sur ton blog ça ne choque pas et en plus tu es douée toi pour les montages et tes vignettes sont superbes.

      Supprimer
    2. J'aime beaucoup aussi que tout soit nickel, mais au pire je peux toujours mettre les balises "center" :P Oh, c'est gentil ^^ les tiennes aussi sont jolies, j'adore les écritures, elles correspondent bien au genre à chaque fois je trouve. Après, c'est un avis personnel =)

      Supprimer
    3. Au pire oui, encore faut-il le savoir et connaître un peu le html. Ah si tu es super douée, moi je fais au plus simple. J'ai essayé de trouver des écritures qui colle au genre ou à l'image.

      Supprimer
  5. Merci, à l'occas' j'essayerai le menu "derniers avis", ça fait un moment que je voulais te demander comment faire :)

    RépondreSupprimer
    Réponses
    1. Ah bin comme ça tu as tout sous la main sans demander, mais fallait pas hésiter^^

      Supprimer
  6. Personnellement j'utilise le soft proposé sur le site de waxoo. Ya pas mieux pour personnaliser son site ;)
    http://www.waxoo.fr/en/wordpress/personnaliser-joomla-personaliser-wordpress-a-moindre-cout/

    RépondreSupprimer
    Réponses
    1. Je ne connais pas du tout forcément c pour wordpress. Mais si qq1 est intéressé il aura l'adresse. :)

      Supprimer
  7. merci Galleane pour ces explications, je vais tenter ;)

    RépondreSupprimer
    Réponses
    1. De rien, si jamais je reste dispo si il y a un truc qui coince :)

      Supprimer
  8. merci pour cet article :)
    petite question cependant : comment fais-tu pour avoir un espacement aussi réduit entre tes livres de "derniers avis" stp ? (le blanc entre les couvertures)
    merci ;)

    RépondreSupprimer
    Réponses
    1. Quand tu met une image sur ton blog, elle à une sorte de lien qui quand tu clic dessus, tu peux la voir en plus grand. Donc il faut qu'une fois l'image basculée sur ton billet, tu cliques sur Associer pour retirer ce lien^^.

      Supprimer
    2. Super, merci beaucoup Galleane !!! :) Bon dimanche :)

      Supprimer
  9. Je viens de tomber là dessus grâce à mon ami google et ça m'a beaucoup aidé ! Il ne me reste plus qu'à aligner mes rubriques !

    RépondreSupprimer
    Réponses
    1. Contente que ça aide, c'est fait pour^^ Bon courage :)

      Supprimer
  10. Encore merci bcp ! Ton article m'a été d'une grande aide. :)

    RépondreSupprimer
  11. Merci pour ton article justement je cherche depuis que j'ai ouvert le blog y'a 1 mois comment faire lol, mais etant nouvelle tu appel quoi part biller car je ne l'ai pas trouver dans la liste de gadget ??
    Encore merci à toi

    RépondreSupprimer
    Réponses
    1. Si tu ne donnais le passage dont tu parles, parce que là je ne comprends pas bien ta question^^.

      Supprimer
    2. Pas grave je te remercie j'ai compris !!! encore merci à toi !!
      c'était pour les nouveau avis mais cela ne fais pas beau sur mon blog

      Supprimer
  12. Merci pour cet article, cela fait un moment que je cherche comment afficher mes derniers avis.
    Tu utilise aussi Paint pour réaliser tes bannières ?

    RépondreSupprimer
    Réponses
    1. Non pour les bannières j'utilise photofiltre pour faire des fondus.

      Supprimer
  13. Réponses
    1. Comment on convertie des images en codes HTML ?

      Supprimer
    2. Quand tu as inséré une image dans un billet, il suffit de basculer dans son mode html (à côté de rédiger, en haut à droite) et tu as le code qui apparaît.

      Supprimer
    3. Désoler de te déranger encore une fois, comment fait-tu pour mettre les images qui bougent à cotés, car moi sur mon blogspot, ça me met en dessous.
      Je te monntre l'exemple : www.milohomeblog.blogspot.fr

      Supprimer
    4. Normalement si dans le billet que tu as préparé avec tes images elles figurent à côtés et que tu n'as pas sauté de ligne entre certaines, elle apparaîtrons côte à côté dans l'animation.

      Supprimer
  14. Merci beaucoup pour cette explication qui va me servir à renouveler un peu ma page d'accueil. :)

    RépondreSupprimer
  15. Salut à toi !
    Je suis tomber sur ton blog que j'ai d'ailleurs savoureé avec délice, jet je suis tomber sur cette aide qui oh combien va mettre précieuse mais j'ai une question toute bête qui j'espère tu pourras me répondre
    Alors voilà j'essaie de faire des petites rubrique sous ma bannière comme toi avec "accueil", "un bout de moi", "PAL", etc mais je ne sais pas faire les images, comment tu les as fait ? avec quel site ? Car j'ai essayer avec Photoscape, je penser avoir réussi mais quand je l'ai mis pour avoir le lien de l'image ça ne veut pas donc je suppose que mon image ne fonctionne pas.

    Bref j'espère avoir été clair,
    Merci par avance de ta réponse ^^
    À bientôt

    RépondreSupprimer
    Réponses
    1. Pour les images, je fais ça avec Paint ou Photofiltre tout simplement. Je sélectionne la partie de l'image que je veux prendre et ensuite il faut "rogner" l'image. Enfin ça porte d'autre nom suivant les logiciels que tu utilises. Pour avoir l'adresse de l'image, il faut soit l'héberger sur ton blog soit sur un site d'hébergement d'image. C'est peut-être à ce niveau que ça bloque.

      En espérant t'avoir aidé.

      Supprimer
  16. Merci beaucoup de ce tuto !!! Ca m'a bien servi ;)

    RépondreSupprimer
  17. Un grand merci pour cet article, ça m'aide beaucoup :)

    RépondreSupprimer
  18. Merci pour ton tutoriel ! Si tu savais combien de temps j'ai essayé avant de trouver tes explications ;)

    RépondreSupprimer
  19. Merci infiniment pour ta chronique !!!!! Enfin une personnes qui sais s'exprimer !!! Sa fait des jours que j'essaie, alors que je connais ton blog depuis pas mal de temps mais je ne connaissait pas cette chronique ^^ merci bcp bcp !!!

    RépondreSupprimer
    Réponses
    1. Ce billet n'est pas évident à trouver il faut dire ^^. Je suis ravie d'avoir aidé et que mon billet soit compréhensible :)

      Supprimer
  20. Quand les images bougent, sait-on mettre un lien qui envoie vers une page quand on clique dessus ? Sinon, c'est vraiment sympa, du travail est en perspective
    Bien à toi et encore merci,
    Kevin

    RépondreSupprimer
  21. Merci Galleane pour ce tuto!!! C'est super sympa et gentil!!
    J'ai juste une petite question: qu'est-ce que tu entends par un "billet vierge"??

    RépondreSupprimer
    Réponses
    1. Je suppose que depuis ton premier commentaire tu as réussi à te dépatouiller avec les images ^^
      Pour le billet vierge, c'est juste un nouveau billet, comme si tu écrivais un nouvel article.

      Supprimer
    2. ouf, ça y est, j'y suis arrivée^^, j'ai compris qu'en cliquant deux fois sur associer les images se mettent les unes après les autres et bien collées! ;)
      Par contre, on doit modifier la largeur de la page? car je ne peux en mettre que 4 et la 5ème image est renvoyée à la ligne...?

      Supprimer
    3. Soit tu modifie la largeur de ton encart principal, je parle de tout ce qui est hors fond, soit tu joues avec la taille des images, j'explique comment faire dans mon billet. Je serais toi j'apprendrai à modifier la taille de mes images ou par défaut tu les mets en "petit". Si tu joue avec la largeur de la page, ça va jouer sur ta mise en page pour tes articles. Sauf si ça ne te dérange pas.
      PS : Du coup ne fait pas attention à ma réponse à tom com en dessous ^^

      Supprimer
  22. Ha super merci beaucoup! En fait, j'avais déjà essayé mais j'arrive pas du tout a mettre les images les unes a côté des autres...

    RépondreSupprimer
    Réponses
    1. Alors là je ne vois pas pourquoi tu ne pourrais pas. Sauf si elles sont trop grandes, dans ce cas-là c'est normal qu'elles ne rentrent pas les unes à la suite des autres. Si elles sont de petite taille met les les unes en bas des autres. Tu clic sur la toute première puis tu fais aller ton curseur sur la droite et tu appuies su la touche suppr et au bout d'un moment celle placée en dessous remontera au niveau de la première.
      Sinon je ne sais pas quoi te dire, c'est difficile à distance.

      Supprimer

Merci de votre passage et de votre message. Je modère mes commentaires donc ils s'afficheront une fois validés.