Codes HTML pour widgets de Blogger 1

Il m’est souvent arriver de vouloir ajouter un widget sur blogger, mais en arrivant sur la page " modèle ", je ne voyais pas le widget " ajouter un élément ". Parfois, il m’a fallut attendre jusqu’au lendemain, espérant que cette fois là, le widget " ajouter un élément " réapparaîtra.

Cette difficulté peut être surmonter quand on a les codes html nécessaires pour chacun des widgets fournis par Blogger.

Pour cette première partie, je vais vous proposer les codes html nécessaires pour ajouter 1) des codes HTML/Javascript, 2) une liste des liens, 3) Une image et 4) un texte à votre Blog.

Il faut noter que :

a) ces widgets seront à ajouter à l’endroit que vous souhaité de votre blog (en-tête, colonnes, bas de page, etc.), en allant sur " modèle ", " modifier le code html " puis sélectionner " développer des modèles de gagdet " .

b) vous devez veiller à les placer juste après la balise </b:widget> avant la balise </b:section> qui elle clôture toujours une section (en-tête, colonnes :gauche ou droite, bas de page, etc.)

c) après avoir installer le code à l’endroit voulu, allez sur " modèle ", vous verrez le nouveau widget que vous venez d’installer avec le titre que vous lui avez donné. Il ne vous suffira plus que de cliquer sur " modifier " pour le modifier et y ajouter ce que vous voulez.


1.Widget pour ajouter des codes HTML/Javascript

<b:widget id='HTML1(Vous devrez changer la numérotation si vous avez déjà insérer un autre widget de ce type, cette phrase entre parenthèse et parenthèse à effacer)' locked='false' title='Mettre votre Titre Ici type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

2.Widget pour une liste des liens

<b:widget id='LinkList1(Numéro à changer si vous avez une autre liste des liens, cette phrase entre parenthèse et parenthèse à effacer)' locked='false' title='Mettre votre titre ici' type='LinkList'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

3. Widget pour insérer un image

<b:widget id='Image1(Numéro à changer si vous avez une autre image, phrase entre parenthèse et parenthèse à effacer)' locked='false' title='Mettre votre titre ici' type='Image'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_img"' expr:src='data:sourceUrl' expr:width='data:width'/>
<br/>
<b:if cond='data:caption != ""'>
<span class='caption'><data:caption/></span>
</b:if>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

3. Widget pour ajouter un texte à votre blog

<b:widget id='Text1(Numéro à changer si vous avez déjà insérer un autre texte, phrase entre parenthèse et parenthèse à effacer)' locked='false' title='Mettre votre titre' type='Text'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</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 Mybloglog et celle sur Blogcatolog.

Sentez-vous libre de laisser un commentaire.

Merci d'être passé.