Maret 2013

Ajouter Le Bouton Suivre/Follow De Twitter � Blogger

Ajouter le bouton Suivre de Twitter (Twitter Follow Me Button) � votre blog Blogger pour augmenter le nombre de vos abonn�es et valoriser votre audience en affichant le nombre de personnes qui vous suivent.
L'int�gration du bouton Follow Me/Suivez Moi est simplissime et toute personne connect�e cliquant sur celui-ci s'abonnera instantan�ment � vos publications sans m�me passer par Twitter.

Pr�sentation Et Code Du Bouton Follow/Suivre De Twitter

Bouton Large Avec Compteur

Suivre @TBlogueur

<a href="https://twitter.com/TBlogueur" class="twitter-follow-button" data-show-count="true" data-size="large">Suivre @TBlogueur</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

Bouton Large Sans Compteur

Suivre @TBlogueur

<a href="https://twitter.com/TBlogueur" class="twitter-follow-button" data-show-count="false" data-size="large">Suivre @TBlogueur</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

Bouton Normal Avec Compteur

Suivre @TBlogueur

<a href="https://twitter.com/TBlogueur" class="twitter-follow-button" data-show-count="true" data-size="medium">Suivre @TBlogueur</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

Bouton Normal Sans Compteur

Suivre @TBlogueur

<a href="https://twitter.com/TBlogueur" class="twitter-follow-button" data-show-count="false" data-size="medium">Suivre @TBlogueur</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

Configuration Du Bouton

- Remplacez TBlogueur avec votre nom d'utilisateur Twitter.
- Vous pouvez remplacer le mot Suivre avec un mot de votre choix, par exemple : Follow , S'abonner...
- Vous pouvez masquer votre pseudonyme en supprimant @Nom_D'utilisateur.
- Si vous avez d�j� installer le bouton de partage Twitter, alors ne recopiez pas le script :

car c'est le m�me utilis�.

Ajouter Le Bouton D'abonnement Suivre De Twitter � Blogger

Pour int�grer le bouton Suivez-moi de Twitter dans votre blog, il vous suffit de copier son code puis allez � "Mise En Page" > "Ajouter un Gadget" > "HTML/JavaScript"
collez le bout de code pr�c�demment copi�, puis cliquez sur "Enregistrer".

Pour placer le bouton Follow au d�but des articles,
allez � "Mod�le" > "Modifier le code HTML" > "D�velopper des mod�les de gadgets"
et ins�rez le code du bouton juste apr�s la balise :

Si vous d�sirez afficher le bouton � la fin de vos articles, alors placez le code appropri� juste apr�s une des lignes suivantes :

Pour plus d'informations, visitez la page Twitter ressources :
https://twitter.com/about/resources/buttons#follow

Details More Info

Gadget Top Commentateurs Avec Image Pour Blogger

Ajouter le "Widget Top Commentateurs Avec Image" dans Blogger Blogspot.
Le but du gadget "Top Commentateurs" est tr�s simple : il affiche sur toutes les pages de votre blog le classement des lecteurs et lectrices qui interagissent le plus sur votre blog: les internautes qui ont post� le plus de commentaires, en affichant leur image personnalis� s'il en ont un, ou l'avatar par d�faut sinon, avec un lien vers le profil de cette commentateur ce qui pourrait provoquer vos visiteurs � poster plus de commentaire pour apparaitre dans le Top des Commentateurs.

D�monstration :
Voici une capture d'�cran du r�sultat final :

Ajouter Le Gadget Top Commentateurs Avec Image Dans Blogger

Le Widget "Top Commentateurs" est tr�s simple � installer et tr�s fonctionnel;
Pour l'int�grer � votre blog, acc�dez � "Mise En Page" > "Ajouter Un Gadget" > "HTML/JavaScript"
et copier/coller le code suivant :

Cliquer sur "Enregistrer".
Le widget "Top Commentateurs Avec Image" est install� maintenant sur votre blog.

Details More Info

Comment Rediriger Une Page Vers Une Autre Dans Blogger

Blogger offre la fonctionnalit� redirection temporaire "302" sous l�appellation "Redirections Personnalis�es" qui permet de rediriger automatiquement les visiteurs du blog d'une page � une autre de mani�re transparente.
Cette fonctionnalit� ne s'applique que sur les pages internes de votre blog.
Donc si de mani�re temporaire une page, un article est inaccessible (apr�s une suppression par erreur par exemple) ou que vous souhaitez que l'url de votre blog pointe directement sur une page sp�cifique sans passer par la page d�accueil, il peut �tre int�ressant de d�finir une redirection personnalis�e.

Comment Rediriger Une Page Vers Une Autre Dans Blogger

Pour saisir une redirection personnalis�e, acc�dez � "Param�tres" > "Pr�f�rences de recherche", puis cliquez sur "Modifier" � c�t� de "Redirections personnalis�es".

Saisissez l'ancienne URL dans le champ "Source" (De) et la nouvelle dans le champ "Destination" (Pour).
� noter que les URLs � mentionner doivent contenir uniquement le chemin path : il ne faut pas indiquer la racine du blog
par exemple, pour un article dont l'url est :

http://www.theblogueur.blogspot.com/2013/03/redirections-personnalisees.html

Ne doit �tre repris que cette partie :

/2013/03/redirections-personnalisees.html

Pour les pages statiques, la partie qui doit �tre reprise est :

/p/Nom-De-La-Page.html

Pour les pages libell�s :

/search/label/Nom-De-Libell�

Pour rediriger la page d'accueil, il suffit de mentionner un slash "/" :

Pour d�sactiver une redirection, cocher la case puis cliquer sur "Supprimer".
Cocher la case "Permanent" si vous voulez que les moteurs de recherche prendre en consid�ration la redirection.
Pour ajouter d'autres redirections, s�lectionnez "Nouvelle redirection"...

Details More Info

Comment Afficher Ou Cacher Les Widgets Sur Des Pages Specifiques Dans Blogger

Lorsque vous installez un widget dans Blogger, il sera affich�, par d�faut, sur toutes les pages de votre blog.
Parfois, vous souhaitez peut �tre de ne faire appara�tre ce widget que sur la page d'accueil, ou de le cacher uniquement dans les pages des articles, ou de l'afficher seulement dans les pages statiques, les pages de libell�s ou m�me dans des pages sp�cifiques du blog.
Dans cette optique, nous allons utiliser les balises conditionnelles pour pouvoir afficher les widget sur certaines pages et de les masquer sur le reste du blog.

Comment Afficher - Cacher Des Widgets Sur Certaines Pages Dans Blogger

Tout d'abord, il faut conna�tre le nom du widget, sinon vous devez r�cup�rer son ID : "HTML1", "TEXT1", "LINKLIST3"...
Pour ce faire, allez � "Mise En Page" puis cliquez sur le lien "Modifier" dans le widget d�sir�.
L'id du gadget appara�t � la fin de l'url dans la barre d'adresse de la petite fen�tre qui s'ouvre.(juste apr�s widgetid=)

Une fois l'id r�cup�r�, allez � "Mod�le" > "Modifier le code HTML" > et cochez la case "D�velopper des mod�les de gadgets". Recherchez ensuite votre widget en utilisant la fonction CTRL+F et en saisissant le nom ou l'id du gadget dans la zone de recherche.
Vous allez trouver un code qui ressemble � ceci :

<b:widget id='ID_Du_Gadget' locked='false' title='Nom_Du_Gadget' type='HTML'>
<b:includable id='main'>

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

C'est le code du widget ou gadget que vous avez ajout� dans la rubrique "Mise En Page".
Il ne reste qu'� ajouter les balises conditionnelles en dessous et au-dessus des balises <b:includable id='main'> et </b:includable> pour afficher les widgets dans des pages ou messages sp�cifiques. Et d'ins�rer un code CSS juste apr�s la balise <b:include name='quickedit'/> afin que le contenu du widget n�appara�tra pas comme une bo�te vide sur le reste des pages.
Voici quelques exemples :

Afficher le widget seulement dans la page d'accueil :

<b:widget id='ID_Du_Gadget' locked='false' title='Nom_Du_Gadget' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>

<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:else/>
<style type='text/css'>
#ID_Du_Gadget {display:none;}
</style>
</b:if>
</b:includable>
</b:widget>

Afficher le widget seulement dans les pages de messages (les articles) :

<b:widget id='ID_Du_Gadget' locked='false' title='Nom_Du_Gadget' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>

<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:else/>
<style type='text/css'>
#ID_Du_Gadget {display:none;}
</style>
</b:if>
</b:includable>
</b:widget>

Afficher le widget seulement dans les pages statiques :

<b:widget id='ID_Du_Gadget' locked='false' title='Nom_Du_Gadget' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "static_page"'>

<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:else/>
<style type='text/css'>
#ID_Du_Gadget {display:none;}
</style>
</b:if>
</b:includable>
</b:widget>

Afficher le widget seulement dans les pages articles et les pages statiques :

<b:widget id='ID_Du_Gadget' locked='false' title='Nom_Du_Gadget' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:post.url'>

<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:else/>
<style type='text/css'>
#ID_Du_Gadget {display:none;}
</style>
</b:if>
</b:includable>
</b:widget>

Afficher le widget uniquement dans une page sp�cifique :

<b:widget id='ID_Du_Gadget' locked='false' title='Nom_Du_Gadget' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == "URL_De_La_Page"'>

<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:else/>
<style type='text/css'>
#ID_Du_Gadget {display:none;}
</style>
</b:if>
</b:includable>
</b:widget>

Cacher le widget seulement dans les pages archives :

<b:widget id='ID_Du_Gadget' locked='false' title='Nom_Du_Gadget' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType != "archive"'>

<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:else/>
<style type='text/css'>
#ID_Du_Gadget {display:none;}
</style>
</b:if>
</b:includable>
</b:widget>

Afficher le widget uniquement sur la page d'accueil et les pages de libell�s :

<b:widget id='ID_Du_Gadget' locked='false' title='Nom_Du_Gadget' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:blog.searchLabel'>


<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:else/>
<style type='text/css'>
#ID_Du_Gadget {display:none;}
</style>
</b:if>
</b:if>
</b:includable>
</b:widget>

Pour plus d'informations sur les balises conditionnelles, consultez l'article suivant :
Comment utiliser les balises conditionnelles <b:if>, <b:else/> dans Blogger

Details More Info

Comment Utiliser Les Balises Conditionnelles Dans Blogger

Les balises conditionnelles <b:if> / <b:else/> ( si / sinon) sont des �l�ments sp�cifiques � Blogger qui offrent davantage de souplesse en permettant de d�finir des modifications de mod�le qui ont lieu uniquement dans certaines conditions.
Les balises des conditions, Blogger Conditional Tags, sont utilis�es dans le code HTML du mod�le pour indiquer aux navigateurs ce que doit �tre afficher ou cacher selon le cas.
Vous allez voir que les conditions constituent vraiment la base pour rendre votre blog dynamique, c'est-�-dire pour afficher des choses diff�rentes en fonction de type des pages, de l'auteur, du nombre de commentaires, etc.

Principe Et Syntaxe Des Balises Conditionnelles

Le principe d'utilisation des balises conditionnelles est simple : on d�finie une condition et le contenu sera ex�cut� selon tel ou tel cas.
Ces balises peuvent �tre ins�r�es aussi bien dans le code HTML du mod�le que dans une gadget HTML/Js.
D'une mani�re g�n�rale, la syntaxe (en fran�ais) est la suivante :

Si Condition = �l�ment_compar� | op�rateur de comparaison | �l�ment comparant
=>Ex�cuter cette partie
Sinon
=>Ex�cuter cette autre partie
Fin si

Exemple :

SI le type de la page est �gale � TYPE
=> Ex�cuter cette partie
SINON
=> Ex�cuter cette autre partie
Fin de condition

on peut aussi utiliser une deuxi�me condition � la place de SINON :

SI le type de la page est �gale � TYPE
=> Ex�cuter cette partie
Fin de condition1
SI le type de la page est diff�rent de TYPE
=> Ex�cuter cette autre partie
Fin de condition2

Par exemple, si on veut afficher BONJOUR dans les pages article et BYE sur toutes les autres pages, alors en langage HTML cela donne :

<b:if cond='data:blog.pageType == "item"'>
BONJOUR
<b:else/>
BYE
</b:if>

ou encore :

<b:if cond='data:blog.pageType == "item"'>
BONJOUR
</b:if>

<b:if cond='data:blog.pageType != "item"'>
BYE
</b:if>

* � noter que la comparaison avec un autre �l�ment n'est pas obligatoire; donc s'il n'existe pas d'�l�ment comparant, la comparaison se fait selon le contenu de la donn�e.
Exemple :

<b:if cond='data:post.title'>

Cependant, la balise b:else n'est pas aussi obligatoire. Elle est utile s'il s'agit d'ex�cuter une alternative.

* L'�l�ment compar� peut �tre une donn�e Blogger, une valeur texte ou une valeur num�rique.
s'il s'agit d'une valeur texte, elle doit �tre encadr� de guillemet (' ') �chapp�s (") => Exemple : "Texte encadr�"

* Les op�rateurs de comparaison :
Voici comment comparer les donn�es dans Blogger :

Op�rateur	Signification	Type de valeur
==	Est �gal �	texte ou num�rique
!=	Est diff�rent de	texte ou num�rique
>	Est plus grand que	Uniquement num�rique
<	Est plus petit que	Uniquement num�rique

Les Diff�rents Types De Pages Blogger Et Les Balises Conditionnelles � Utiliser

La page d'accueil du blog : Blogger Home page

<b:if cond='data:blog.url == data:blog.homepageUrl'>
{...}
</b:if>

Les pages articles (message,post) ou Items

<b:if cond='data:blog.pageType == "item"'>
{...}
</b:if>

Les pages index : index page
Elle se r�f�re � toutes les autres pages sauf les pages articles c�d la page d'accueil, de libell�s, des archives et celle de la recherche.

<b:if cond='data:blog.pageType == "index"'>
{...}
</b:if>

Les pages statiques : static page

<b:if cond='data:blog.pageType == "static_page"'>
{...}
</b:if>

Cibler � la fois les pages articles et les pages statiques

<b:if cond='data:blog.url == data:post.url'>
{...}
</b:if>

Les pages de libell�s : Label page

<b:if cond='data:blog.searchLabel'>
{...}
</b:if>

Les pages des archives : Archive page

<b:if cond='data:blog.pageType == "archive"'>
{...}
</b:if>

Une page en particulier :
Il suffit d'ins�rer l'adresse URL de la page d�sir�e.

<b:if cond='data:blog.url == "URL_De_La_Page"'>
{...}
</b:if>

Page d'erreur 404 : Blogger error page

<b:if cond='data:blog.pageType == "error_page"'>
{...}
</b:if>

Le premier article ou l'article le plus r�cent du blog

<b:if cond='data:post.isFirstPost'>

La version mobile

<b:if cond='data:blog.isMobile'>

Inverser Une Condition

Une condition peut �tre invers� simplement en rempla�ant l'op�rateur == (est �gal �) avec l'op�rateur != (est diff�rent de) :

<b:if cond='data:blog.url != data:blog.homepageUrl'>
{...}
</b:if>

Dans l'exemple pr�c�dant le contenu va s'afficher dans toutes les pages du blog mais pas dans la page d'accueil.

Comment utiliser les balises conditionnelles

Le contenu qu'on veut afficher/masquer doit �tre ins�rer � l'int�rieur de la condition c�d entre les deux balises <b:if...> et </b:if>
Les conditions peuvent �tre utiliser n'importe-o� dans le code HTML, mais dans certain cas il faut les ins�rer avec soin afin d'�viter l'affichage des erreurs lors de l'enregistrement du mod�le.
Par exemple si on veut appliquer une condition sur un widget il faut la mettre entre les deux balises <b:includable id=....> et </b:includable>
Dans certaines situations il faut regrouper plusieurs conditions afin d'arriver � un r�sultat. Par exemple pour afficher un contenu dans la page d'accueil, dans les pages statiques et dans un article en particulier, il faut �crire �a :

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:blog.url == "static_page"'>
<b:if cond='data:blog.url == "URL_De_La_Page"'>
Le contenu qu'on veut l'afficher uniquement si on se trouve dans la page d'accueil ou dans une page statique ou dans l'article indiqu�.
</b:if>
</b:if>
</b:if>

N'oubliez surtout pas de fermer les conditions avec la balise </b:if> pour chaque <b:if...> us�.

Details More Info

seo

Blog Archive

Ajouter Le Bouton Suivre/Follow De Twitter � Blogger

Pr�sentation Et Code Du Bouton Follow/Suivre De Twitter

Configuration Du Bouton

Ajouter Le Bouton D'abonnement Suivre De Twitter � Blogger

Gadget Top Commentateurs Avec Image Pour Blogger

Ajouter Le Gadget Top Commentateurs Avec Image Dans Blogger

Comment Rediriger Une Page Vers Une Autre Dans Blogger

Comment Rediriger Une Page Vers Une Autre Dans Blogger

Comment Afficher Ou Cacher Les Widgets Sur Des Pages Specifiques Dans Blogger

Comment Afficher - Cacher Des Widgets Sur Certaines Pages Dans Blogger

Afficher le widget seulement dans la page d'accueil :

Afficher le widget seulement dans les pages de messages (les articles) :

Afficher le widget seulement dans les pages statiques :

Afficher le widget seulement dans les pages articles et les pages statiques :

Afficher le widget uniquement dans une page sp�cifique :

Cacher le widget seulement dans les pages archives :

Afficher le widget uniquement sur la page d'accueil et les pages de libell�s :

Comment Utiliser Les Balises Conditionnelles Dans Blogger

Principe Et Syntaxe Des Balises Conditionnelles

Les Diff�rents Types De Pages Blogger Et Les Balises Conditionnelles � Utiliser

Inverser Une Condition

Comment utiliser les balises conditionnelles

Subscribe to the FEED via email

Find Us at Facebook

Labels

Total Pageviews