30 mai 2012

Ajouter Des Liens Non Statiques au Gadget PageList Blogger

Widget Pagelist Blogger
Nous allons voir dans ce tutoriel comment ajouter des liens "non statiques" au gadget PageList de Blogger.
En fait, il existe deux méthodes pour ajouter des URLs (liens externes, urls de libellés, adresse d'un article etc...) au menu de pages Blogger :
- La première méthode (la plus simple) consiste à utiliser la nouvelle interface Blogger.
- La deuxième (un peu plus compliqué) consiste à modifier le code Html de votre modèle.





Méthode 1 : à l'aide de la nouvelle interface Blogger

1. Cliquez sur le lien 'Effectuer la mise à jour dès maintenant' en haut du tableau de bord Blogger. (Vous pouvez toujours revenir à l'ancienne interface à tout moment)
Mise à Jour Nouvelle Interface Blogger
2. Cliquez sur le menu 'gris' à côté du blogue dans lequel vous souhaitez ajouter des liens, puis sélectionnez 'Pages'
Nouvelle Interface Blogger

3. Cliquez maintenant sur 'Nouvelle Page' puis 'Adresse web'
Nouvelle Page Blogger

4. Entrez le titre et l'URL du lien puis cliquez sur 'Enregistrer'
Add Link to Blogger PageList

Méthode 2 : En Modifiant le code HTML

1. Si vous n'avez pas encore installé le gadget "PageList", alors rendez-vous dans l'onglet "Mise En Page" de votre blog, et cliquez sur "Ajouter un gadget".
Dans la liste des gadgets proposée par Blogger, sélectionnez "Pages". Vous pouvez ensuite configurer ce gadget en choisissant un titre et les pages à afficher.

2. Allez maintenant à "Modèle" > "Modifier le code HTML" > "Développer des modèles de gadgets"

3. Rechercher le code du gadget "Pages", comme ceci :
<b:widget id='PageList1' locked='false' title='Pages' type='PageList'>
<b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content'>
    <b:if cond='data:mobile'>
      <select expr:id='data:widget.instanceId + &quot;_select&quot;'>
        <b:loop values='data:links' var='link'>
          <b:if cond='data:link.isCurrentPage'>
            <option expr:value='data:link.href' selected='selected'><data:link.title/></option>
          <b:else/>
            <option expr:value='data:link.href'><data:link.title/></option>
          </b:if>
        </b:loop>
      </select>
      <span class='pagelist-arrow'>&amp;#9660;</span>

    <b:else/>
      <ul>
        <b:loop values='data:links' var='link'>
          <b:if cond='data:link.isCurrentPage'>
            <li class='selected'><a expr:href='data:link.href'><data:link.title/></a></li>
          <b:else/>
            <li><a expr:href='data:link.href'><data:link.title/></a></li>
          </b:if>
        </b:loop>
    Insérer vos liens ICI
      </ul>
    </b:if>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>

4. Insérer les liens entre les balise </b:loop> et </ul> de la façon suivante
<li> <a href="URL_du_lien">Titre Du Lien</a></li>

Voila c'est tout pour ce tutoriel, espérant qu'il répond à vos attentes.

29 mai 2012

Liste Déroulante Pour Les Libellés Blogger

Libellés Blogger
Le widget libellés de Blogger est présenté sous forme d'une liste verticale de liens ou encore d'un nuage.
Certains blogueurs se retrouvent avec trop de libellés, ce qui devient un peu illisible et le widget prendra trop d'espace.
Nous allons voir dans ce tutoriel comment adapter le gadget libellés sous forme de menu ou d'une liste déroulante contenant tous les libellés, étiquettes, catégories de votre blog.





Démonstration
libellés Blogger

Menu Déroulant Pour Les Libellés Dans Blogger

1. Si vous n'avez pas encore installé le gadget "Libellés", alors rendez-vous dans l'onglet "Mise En Page" de votre blog, et cliquez sur "Ajouter un gadget".
Dans la liste des gadgets proposée par Blogger, sélectionnez "Libellés". Vous pouvez ensuite configurer ce gadget en choisissant d'afficher tous les libellés de votre blog, ou seulement une sélection correspondant à vos catégories les plus importants. Ces libellés pourront également être classés par fréquence ou par ordre alphabétique. Il ne vous restera ensuite qu'à choisir l'emplacement de votre widget libellés.

2. Allez maintenant à "Modèle" > "Modifier le code HTML" > Gadgets NON Développés et recherchez (avec ctrl+F) la ligne suivante :
<b:widget id='Label1' locked='false' title='Libellés' type='Label'/>

3. Remplacez la ligne précédente avec le code suivant
<b:widget id='Label99' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<br/>

<select onchange='location=this.options[this.selectedIndex].value;' style='width:200px'>
<option>Labels</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
</option>
</b:loop>
</select>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

- Note : le texte en Bleu c'est le texte qui sera affiché sur la liste déroulante. Vous pouvez le modifier avec Libellés, Catégories, etc...
4. Enregistrer votre modèle.

Voilà, le gadget libellés s'affiche maintenant sous forme d'un menu déroulant.

26 mai 2012

Ajouter Le Bouton De Partage Facebook Blogger

Boutons De Partage Facebook
Le bouton de partage Facebook vous permet d’augmenter le trafic de votre blog en encourageant vos visiteurs à partager les liens de vos articles sur Facebook.
Ce bouton détecte automatiquement l'adresse de la page sur laquelle il est.
Pour l'utiliser, il vous suffit de choisir le style désiré et de copier son code et le mettre sur les pages de votre blog.






Présentation Du Bouton

|Version vertical avec compteur

Partager
<a name="fb_share" type="box_count" expr:share_url='data:post.url' href="http://www.facebook.com/sharer.php">Partager</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

|Version horizontal avec compteur

Partager
<a name="fb_share" type="button_count" expr:share_url='data:post.url' href="http://www.facebook.com/sharer.php">Partager</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

|Version horizontal sans compteur

Partager
<a name="fb_share" type="button" expr:share_url='data:post.url' href="http://www.facebook.com/sharer.php">Partager</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

|Icône 16*16

Partager
<a name="fb_share" type="icon" expr:share_url='data:post.url' href="http://www.facebook.com/sharer.php">Partager</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

|Bouton large


<script type="text/javascript">var fbShare = {url: '<data:post.url/>', size: 'large' }</script><script src="http://widgets.fbshare.me/files/fbshare.js" type="text/javascript"></script>

| Bouton léger


<script type="text/javascript">var fbShare = {url: '<data:post.url/>', size: 'small' }</script><script src="http://widgets.fbshare.me/files/fbshare.js" type="text/javascript"></script>

Ajouter le bouton de partage facebook à Blogger

Allez à "Modèle" > "Modifier le code HTML" cochez la case "Développer des modèles de gadgets"
Pour afficher le bouton au début des articles, placez son code juste après la balise :
<div class='post-header-line-1'>

Si vous désirez afficher le bouton à la fin de vos articles, alors placez le code approprié juste après l'une des lignes suivantes :
<div class='post-footer-line post-footer-line-1'>
<div class='post-footer-line post-footer-line-2'>
<div class='post-footer-line post-footer-line-3'>

Vous pouvez aussi placer le code du bouton dans un gadget "HTML/JS"

25 mai 2012

Ajouter Le Bouton J'aime Facebook à Blogger

Bouton Jaime Facebook
Ajouter le bouton J'aime Facebook (Facebook Like Button) à votre blogue afin de faire un peu de promotion de vos articles sur Facebook.
Le bouton J'aime vous permettra de savoir qui a apprécié vos articles, et laissera une trace discrète sur le mur de l'utilisateur.
Il est relativement intéressant car il peut être mis en place en quelques minutes à l'aide de quelques lignes de code.




Présentation Du Bouton

Standard + bouton 'Send'

Bouton avec compteur

Boîte avec compteur


Configuration Du Bouton

Type du bouton
Texte dans le bouton
Afficher le bouton 'Send'
Couleur du thème
Font
Alignement
Emplacement du bouton
Condition d'affichage
<div>
<b:if cond='data:post.isFirstPost'>
<script>(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));</script>
</b:if>
<fb:like expr:href="data:post.canonicalUrl" layout='standard' send='true' show_faces='false' font="arial" action="like" colorscheme="light"></fb:like>
</div>

Ajouter le bouton j'aime à Blogger

1. Copiez le code ci-dessus. Connectez-vous à votre compte Blogger et allez à "Modèle" ► "Modifier le code HTML" et cochez la case "Développer des modèles de gadgets".

2. Rechercher <data:post.body/> et juste avant coller le code copié.

Advertissement