Afficher vos libellés avec boutons

Les libellés permettent de catégoriser les articles de son blog. Pour les ressortir de l'ensemble des liens se trouvant sur votre blog, il serait peut être mieux que leurs titres soient avec des boutons.

Voici pour vous une astuce de Hoctro pour arriver à cette fin :

Etape 1 : Ajouter le code css

Prendre le code css pour la marque de bouton que vous préférez et mettez le dans votre modèle en suivant les indications données.

Etape 2: Ajouter le code pour la liste des liens

Se connecter à votre compte Blogger. Aller sur « modèle », « modifier le code html » et là NE PAS cocher sur « développer des modèles de gadget ». Trouver une balise ressemblant à peu près à celle-ci < b:section class='sidebar' ... et mettre le code suivant juste en dessous.

<b:widget id='Label10' locked='false' title='Catégories' type='Label'>

<b:includable id='main'>

<div id='tabsE'>

<ul>

<li><a expr:href='data:blog.homepageUrl'><span>Accueil</span></a></li>

<b:loop values='data:labels' var='label'>

<li><a expr:href='data:label.url'><span><data:label.name/></span></a></li>

</b:loop>

</ul>

<!-- <b:include name='quickedit'/> -->

</div>

</b:includable>

</b:widget>

Sur la troisième ligne du code ci-haut se trouve la baise permettant l’appel des boutons à afficher. Sur vous avez choisis le menu tab E, remplacez tabsF par tabsE. Si par contre, vous avez choisis le menu tab A, remplacez tabsF par tabsA.

Enregistrez votre modèle.

Pour changer le titre de ce widget que j’ai nommé « Catégories », Aller sur « éléments de la page » et cliquer sur « modifier » du widget « Catégories. Changer le titre et enregistrer les modifications.

Etape 3 : Rendre horizontale la liste des libellés avec boutons

Pour rendre horizontale la liste des liens avec boutons, coller le code de l’étape 2 après la balise

<b:section class="header" id="header" maxwidgets="1" showaddelement="no">

que vous aurez transformé en celle-ci :

<b:section class="header" id="header" maxwidgets="2" showaddelement="yes">

Pour des plus amples explications, voir l’article « Ajouter un élément à l’entête de votre blog ».

Etape 4 : Afficher seulement les libellés ayant les plus d’articles

Pour afficher seulement les libellés ayant les plus d’articles, mettre le code suivant au lieu de celui de l’étape n° 2 :

<b:widget id='Label1' locked='false' title='Catégories' type='Label'>

<b:includable id='main'>

<div class='widget-content'>

<div id='tabsF'>

</div>

</div>

<script language='javascript' type='text/javascript'>

var display = "<ul>";

display = display + "<li><a expr:href='data:blog.homepageUrl'><span>Accueil</span></a></li>";

var text = "";

var text2 = "";

<b:loop values='data:labels' var='label'>

text = "<data:label.name/>";

text2 = text.charAt(text.length - 1);

if (text2 != '.') {

display = display + "<li><a expr:href='data:label.url + "?max-results=100"'><span>" + text + "</span></a></li>";

}

</b:loop>

display = display + "</ul>";

obj = document.getElementById('tabsF');

obj.innerHTML = display;

</script>

</b:includable>

</b:widget>

Si cet article vous a plus, vous pouvez souscrire à mon feed rss ou à ma newsletter pour rester à jour ou encore rejoindre ma communauté sur Blogcatolog. N'oubliez pas d'ajouter ce blog à vos favoris sur Technorati.