Code html pour widgets Blogger 2

L'article le plus lu au cours de cette année est celui sur les codes html pour widgets Blogger 1. Le temps est venu de vous donner la deuxième série des codes html pour les widgets afin de vous familiariser encore plus avec ceux-ci et de surmonter la difficulté qu'on pourrait rencontrer quand on ne peut ajouter un autre widget qu'en allant tripoter le code html.

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.)

1.Newsreel (actualités)

Ajoutez automatiquement les titres de Google Actualités à votre blog.

<b:widget id='NewsBar1' locked='false' title='VOTRE TITRE' type='NewsBar'>
<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'>
<div expr:id='data:widget.instanceId + "_bar"'>
<span class='newsBar-status'>Loading...</span>
</div>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

2. Barre de recherche de vidéos

Vous pouvez afficher des extraits provenant de YouTube et de Google Video pour que vos lecteurs puissent les regarder sans quitter la page.

<b:widget id='VideoBar1' locked='false' title='VOTRE TITRE' type='VideoBar'>
<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'>
<div expr:id='data:widget.instanceId + "_bar"'>
<span class='videoBar-status'>Chargement...</span>
</div>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

3. Image

Ajoutez une image depuis votre ordinateur ou un autre emplacement du Web.

<b:widget id='Image1' locked='false' title='VOTRE TITRE' 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>

4. AdSense

Gagnez de l'argent en affichant des annonces pertinentes sur votre blog.

<b:widget id='AdSense1' locked='false' title='' type='AdSense'>
<b:includable id='main'>
<div class='widget-content'>
<data:adCode/>
</div>
</b:includable>
</b:widget>

5. Flux

Ajoutez le contenu d'un flux RSS ou Atom à votre blog.

<b:widget id='Feed1' locked='false' title='VOTRE TITRE' type='Feed'>
<b:includable id='main'>
<h2><data:title/></h2>
<div class='widget-content'>
<ul expr:id='data:widget.instanceId + "_feedItemListDisplay"'>
<b:loop values='data:feedData.items' var='i'>
<li>
<span class='item-title'>
<a expr:href='data:i.alternate.href'>
<data:i.title/>
</a>
</span>
<b:if cond='data:showItemDate'>
<b:if cond='data:i.str_published != ""'>
<span class='item-date'>
- <data:i.str_published/>
</span>
</b:if>
</b:if>
<b:if cond='data:showItemAuthor'>
<b:if cond='data:i.author != ""'>
<span class='item-author'>
- <data:i.author/>
</span>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

6. Libellés

Afficher tous les libellés des messages dans votre blog.

<b:widget id='Label2' locked='false' title='VOTRE TITRE' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/&gt;
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a&gt;</b:if>(<data:label.count/>)</li></b:loop></ul><b:include%20name='quickedit'/></div></b:includable></b:widget> Logo%20(Bouton%20Blogger) <b:widget%20id='BloggerButton1'%20locked='false'%20title=''%20type='BloggerButton'><b:includable%20id='main'><div%20class='widget-content'><a%20href='http://www.blogger.com'><img alt='Powered By Blogger' expr:src='data:fullButton'/></a>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

7. Archive de blog

Afficher les liens vers des messages plus anciens. Déjà ajouté

<b:widget id='BlogArchive1' locked='false' title='VOTRE TITRE' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + "_ArchiveList"'>
<b:if cond='data:style == "HIERARCHY"'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == "FLAT"'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == "MENU"'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div>
<b:include name='quickedit'/>
</div>
</b:includable>
<b:includable id='flat' var='data'>
<ul>
<b:loop values='data:data' var='i'>
<li class='archivedate'>
<a expr:href='data:i.url'><data:i.name/></a&gt;%20(<data:i.post-count/>)</li></b:loop></ul></b:includable><b:includable%20id='menu'%20var='data'><select%20expr:id='data:widget.instanceId%20+" _ArchiveMenu??>
<option value=''><data:title/></option>
<b:loop values='data:data' var='i'>
<option expr:value='data:i.url'><data:i.name/&gt; (<data:i.post-count/>)</option>
</b:loop>
</select>
</b:includable>
<b:includable id='interval' var='intervalData'>
<b:loop values='data:intervalData' var='i'>
<ul>
<li expr:class='"archivedate " + data:i.expclass'>
<b:include data='i' name='toggle'/>
<a class='post-count-link' expr:href='data:i.url'><data:i.name/></a&gt;(<span%20class='post-count'><data:i.post-count/></span>)<b:if%20cond='data:i.data'><b:include%20data='i.data'%20name='interval'/></b:if><b:if%20cond='data:i.posts'><b:include%20data='i.posts'%20name='posts'/></b:if></li></ul></b:loop></b:includable><b:includable%20id='toggle'%20var='interval'><b:if%20cond='data:interval.toggleId'><b:if%20cond='data:interval.expclass%20==" expanded??>
<a class='toggle' expr:href='data:widget.actionUrl + "&action=toggle" + "&dir=close&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;toggle=" + data:interval.toggleId + "&toggleopen=" + data:toggleopen'>
<span class='zippy toggle-open'>▼ </span>
</a>
<b:else/>
<a class='toggle' expr:href='data:widget.actionUrl + "&action=toggle" + "&dir=open&toggle=" + data:interval.toggleId + "&toggleopen=" + data:toggleopen'>
<span class='zippy'>► </span>
</a>
</b:if>
</b:if>
</b:includable>
<b:includable id='posts' var='posts'>
<ul class='posts'>
<b:loop values='data:posts' var='i'>
<li><a expr:href='data:i.url'><data:i.title/></a></li>
</b:loop>
</ul>
</b:includable>
</b:widget>

8. Profil

Afficher des informations sur vous-même.

<b:widget id='Profile1' locked='false' title='Qui suis-je ?' type='Profile'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<b:if cond='data:team == "true"'> <!-- team blog profile -->
<ul>
<b:loop values='data:authors' var='i'>
<li><a expr:href='data:i.userUrl'><data:i.display-name/></a></li>
</b:loop>
</ul>
<b:else/> <!-- normal blog profile -->
<b:if cond='data:photo.url != ""'>
<a expr:href='data:userUrl'><img class='profile-img' expr:alt='data:photo.alt' expr:height='data:photo.height' expr:src='data:photo.url' expr:width='data:photo.width'/></a>
</b:if>
<dl class='profile-datablock'>
<dt class='profile-data'><data:displayname/></dt>
<b:if cond='data:showlocation == "true"'>
<dd class='profile-data'><data:location/></dd>
</b:if>
<b:if cond='data:aboutme != ""'><dd class='profile-textblock'><data:aboutme/></dd></b:if>
</dl>
<a class='profile-link' expr:href='data:userUrl'><data:viewProfileMsg/></a>
</b:if>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

9. En-tête de la page

Affichez le titre et la description du blog.


<b:widget id='Header1' locked='true' title='LE NOM DE VOTRE BLOG (Header)' type='Header'>
<b:includable id='main'>
<b:if cond='data:useImage'>
<b:if cond='data:imagePlacement == "REPLACE"'>
<!--Show just the image, no text-->
<div id='header-inner'>
<a expr:href='data:blog.homepageUrl' style='display: block'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
</a>
</div>
<b:else/>
<!--Show image as background to text-->
<div expr:style='"background-image: url(\"" + data:sourceUrl + "\"); " + "background-repeat: no-repeat; " + "width: " + data:width + "px; " + "height: " + data:height + "px;"' id='header-inner'>
<div class='titlewrapper' style='background: transparent'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</h1>
</div>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</div>
</b:if>
<b:else/>
<!--No header image -->
<div id='header-inner'>
<div class='titlewrapper'>
<h1 class='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</h1>
</div>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</div>
</b:if>
</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. N'oubliez pas d'ajouter ce blog à vos favoris sur Technorati.