Les tuto 2 Demolite

Blog tuto, aide à la création et au design des blogs et sites internet, Montage photo, trucs et astuces, logiciels gratuits...

16 novembre 2010

Mettre un bouton à la place des liens de vos catégories

Posté par Demolite - Dans la catégorie Canalblog
Tags : , , , , ,

Pour que tout le monde comprenne bien de quoi il s'agit, (car je n'ai pas d'exemple à vous proposer, cette option n'est pas installer sur ce blog), un bouton c'est une image cliquable qui envoie sur un site ou sur une autre page de votre blog.

Ici, nous allons remplacer les liens de vos Catégories par des boutons liens , donc...à la place des liens actuels il y aura des images cliquables, c'est plus clair ?

Un premier lieu, il faut que vos Catégories soient crées...c'est plus simple, vous pourrez en créer d'autres après bien sur...
Vous devez commencer par créer le code de vos boutons, pour chaque catégories.

Si vous avez 4 catégories : Les apéro, Les entrées, Les plats et Les desserts

Il va vous falloir 4 images pour les transformer en bouton liens...

Une fois que vous avez vos images, elles doivent êtres de la même taille, sinon ça fait cracra...

Si vous utilisez Internet Explorer, les images se placent automatiquement à gauche et sur Firefox, elles sont centrées, donc ne vous fatiguez pas à rajouter des balises <center> ou <left>, elles ne seront pas prisent en compte, vous avez donc tout intérêt à créer des boutons de la même taille que vos colonnes, enfin quelques px en moins quand même pour que votre image ne soit pas coupée.

Vos colonnes doivent faire 200 px, la dimension idéale pour vos images est donc 180x40 ou 190x40 vous pouvez jouer sur la hauteur et mettre des images plus hautes.

Ensuite, Ouvrez un Nouveau message et importez votre première image...
Pensez à décocher les 2 cases de calibrage si votre image est animée.

Passez votre message en Mode Html pour récupérer le code de votre image, vous devez avoir un code qui ressemble à ça :

<p><img width="180" height="40" border="0" src="https://p4.storage.canalblog.com/48/45/255038/11955802.jpg" alt="Bouton1" /></p>

Pour que votre image soit cliquable et qu'elle nous dirige sur votre catégorie, il faut ajouter le code en bleu comme ceci :

<p><a href="Adresse de votre catégorie"><p><img width="180" height="40" border="0" src="https://p4.storage.canalblog.com/48/45/255038/11955802.jpg" alt="Bouton1" /></p>

Pour récupérer l'adresse de la catégorie, il y a 2 possibilités, soit en cliquant droit sur le lien de la catégorie qui se trouve dans une de vos colonnes, puis de cliquer sur copier l'adresse du lien.

Sans_titre_3

Soit en ouvrant un article de cette catégorie, dans le bas du message vous avez le nom de la catégorie dans laquelle est posté l'article, il faut cliquez droit dessus pour récupérer l'adresse comme indiqué sur la capture ci-dessus.

Maintenant nous allons voir où coller ce joli code dans la Page d'accueil...

<p><a href="Adresse de votre catégorie"><p><img width="180" height="40" border="0" src="https://p4.storage.canalblog.com/48/45/255038/11955802.jpg" alt="bouton1" /></p>

Ouvrez la Page d'accueil est repérez ce code (en cliquant sur les touches Ctrl + F simultanément, vous pouvez faire une recherche dans la page) :

<div class="title">Cat&eacute;gories</div>

Juste en dessous de cette ligne de codes, collez le joli code que vous venez de faire.

Ce qui doit donner ça :

Sans_titre_4

Voila déjà une bonne chose de faite...

Si vous faites un aperçu, votre bouton est bien en place et si vous cliquez dessus, il vous dirige bien vers votre catégorie.
Par contre, la liste des catégories et encore là...et oui c'est pas fini...

C'est pour cela que vous devez commencez par faire toutes vos lignes de codes pour chaque bouton, comme ça vous les mettez tous en même temps (les codes à la suite les uns des autres, avec un <p> entre chaque code qui correspond un bouton, pour laisser un espace entre les boutons).

Vous pouvez passer à l'étape suivante, c'est à dire supprimer le code qui permet d'afficher les catégories...

Le voilà, ce fameux code :

<$BlogCategoryName$>

Sans_titre_5

Pour que vos boutons apparaissent aussi sur les autres pages (page des archives et page d'un message), une fois que vous avez installé tous vos boutons, faites un copier du bloc catégories en entier et collez-le dans les autres pages.

Si un jour vous souhaitez remettre les catégories comme elles étaient, il suffit de créer un nouveau modèle et de récupérer le bloc de code d'origine de vos catégories.

Vous pouvez aussi collez vos lignes de code sous le titre de vos catégories comme ceci :

<div class="title">Catégories</div>
<p><a href="Adresse de votre catégorie 1"><p><img width="180" height="40" border="0" src="https://p4.storage.canalblog.com/48/45/255038/11955802.jpg" alt="bouton1" /></p>

<p><a href="Adresse de votre catégorie 2"><p><img width="180" height="40" border="0" src="https://p4.storage.canalblog.com/48/45/255038/11955802.jpg" alt="bouton2" /></p>

Ce qui revient au même.


Rappel : Avant de modifier vos pages html, faites une copie ! <---Tuto ici


« Accueil 1
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41