Widget articles récents avec images et nombre des commentaires de ceux-ci.

By // 8 commentaires:
Afficher les articles récents avec une image pour les illustrer, voilà le rêve que doivent avoir nombreux utilisateurs de Blogger.


Grâce à Blogger update, ce rêve est devenu réalité. Un simple code inséré dans un widget Html/Javascript et l'affaire est dans la poche. Il y a même un palliatif pour les articles n'ayant aucune illustration, une image aléatoire est affichée sur les 6 (voire plus) que vous aurez inséré dans le code.

En plus de cela, il y a même possibilité d'afficher le nombre des commentaires de chaque article affiché. Cool non ?

Autre chose, si vous voulez aussi afficher la date de l'article, mettez le lien suivant http://vietwebguide2.googlepages.com/recentposts_thumb4_postdate.js à la place de http://anhvo.info.googlepages.com/recentposts_thumb4.js qui se trouve dans le code que je vais vous donner.

Il vous suffit de coller le code ci-dessous dans un widget Html/Javascript. Pour cela :

1. Aller sur paramètres, flux d'actualisation et mettez flux complet (ça Anne ne le fera pas)

2. Aller sur votre compte Blogger, sur "Mise en page", puis cliquer sur "Ajouter un nouvel élément"

3. Sur la pop-up qui s'ouvre, choisissez Html/Javascript et dans sur l'affichage suivant, donnez un nom à votre widget (par exemple : Récentes publications) et collez le code ci-après dans la grande case.


<script type="text/javascript">
imgr = new Array();

imgr[0] = "http://anhvo.info.googlepages.com/phi00001.png";
imgr[1] = "http://anhvo.info.googlepages.com/phi00002.png";
imgr[2] = "http://anhvo.info.googlepages.com/phi00003.png";
imgr[3] = "http://anhvo.info.googlepages.com/phi00004.png";
imgr[4] = "http://anhvo.info.googlepages.com/phi00005.jpg";
imgr[5] = "http://anhvo.info.googlepages.com/phi00006.jpg";
imgr[6] = "http://anhvo.info.googlepages.com/phi00007.jpg";

tablewidth = 180;
cellspacing = 1;
bgColor = "#ABAE9B";
imgwidth = 45;
imgheight = 45;
bgTD = "#000000";
fntsize = 12;
acolor = "#ffffff";
icon = "•";

text = "commentaires";

numposts = 10;
home_page = "http://en.vietwebguide.com/";

</script>
<script src="http://anhvo.info.googlepages.com/recentposts_thumb4.js" type="text/javascript"></script>


Important ! Lisez ce qui suit pour mieux comprendre ce code :


Les liens allant de http://anhvo.info.googlepages.com/phi00001.png à http://anhvo.info.googlepages.com/phi00007.png : sont ceux des images qui s'afficheront pour les articles n'ayant aucune illustration. Vous pouvez changer celles-ci par les votres.

Number 180: largeur de votre sidebar. N'oubliez pas de l'adapter

Cellspacing = 1 : espace entre les images et les titres des articles.

bgColor = "#ABAE9B" : couleur du contour.

imgwidth = 45; imgheight = 45 : longueur et largeur de l'image.

bgTD = "#000000" : couleur de fond du widget;

fntsize = 12; : taille du texte des liens;

acolor = "#ffffff" : couleur du texte des liens

text = "commentaires" : message pour les commentaires. Si vous ne voulez pas afficher le nombre des commentaires de vos articles dans le widget, changez le en text = "no"

numposts = 10 : le nombre maximum d'articles à afficher.

home_page = "http://en.vietwebguide.com/" - changer le http://en.vietwebguide.com/ par l'URL de votre blog, n'oubliez pas le / à la fin.

Ce widget, je suis sure que beaucoup vont l'aimer.

Widget pour articles les plus du jour

By // 1 commentaire:
Voulez-vous afficher les articles les plus lus du jour sur votre blog ? Ahvo a réalisé un petit script utile pour arriver à cette fin.

Il vous suffit de coller le code ci-dessous dans un widget Html/Javascript. Pour cela :

1. Aller sur votre compte Blogger, sur "Mise en page", puis cliquer sur "Ajouter un nouvel élément"

2. Sur la pop-up qui s'ouvre, choisissez Html/Javascript et dans sur l'affichage suivant, donnez un nom à votre widget (par exemple : Articles les plus lus du jour) et collez le code ci-après dans la grande case. Cliquez ensuite sur enregistrer et l'affaire est dans la poche.



<script type="text/javascript">
topviewstoday_limit = 10;
</script>
<script type="text/javascript" src="http://vietwebguide2.googlepages.com/topviewstoday_v10.js"></script>

Vous pouvez changer le chiffre 10 par un supérieur ou inférieur afin d'afficher le nombre d'articles de votre choix.

Etes-vous preneur ?

Widget pour les articles les plus lus du Blog avec nombre des lectures

By // 8 commentaires:
Votre blog a-t-il un certain nombre d'articles ? Aimeriez vous afficher le plus lus d'entre-eux avec le nombre de lecture pour chacun ?



Grâce à Anhvo, il vous sera maintenant possible de réaliser cette prouesse.

Pour cela :

1. Aller sur votre compte Blogger, sur "Mise en page", puis cliquer sur "Ajouter un nouvel élément"

2. Sur la pop-up qui s'ouvre, choisissez Html/Javascript et dans sur l'affichage suivant, donnez un nom à votre widget (par exemple : Articles les plus lus du jour) et collez le code ci-après dans la grande case. Cliquez ensuite sur enregistrer et l'affaire est dans la poche.

<script type="text/javascript">
start_views_num = 500;
limit = 7;
</script>
<script src="http://anhvo.info.googlepages.com/topviews222.js" type="text/javascript"></script>


Vous pouvez changer le "7" par un chiffre de votre choix pour le nombre d'articles à afficher et "500" par un autre chiffre (c'est pour le nombre des lectures).

Etes-vous preneur ?

Widget libellé avec barre de recherche integrée

By // 6 commentaires:
Quelqu'un voudrait-il avoir un widget libellé dans lequel est intégré une barre de recherche ?



Article sponsorisé par l'Espace des étudiants en médecine du blog du chalet et des chalistes et Blogixtra

L'un des avantages que l'on peut tirer de l'exploitation des modèles blogger récemment créer sont les fonctionnalités nouvelles qui y sont ajoutées. Je viens de mettre un nouveau modèle sur mon blog Café biblique (il me plaît bien). J'y ai remarqué une barre de recherche couplé d'un des libellés qui ne s'affichent pas simultanément. Il faut cliquer sur le titre Recherche ou Catégories pour afficher soit la listes de vos catégories soit le module de recherche. Par défaut, c'est le barre de recherche qui s'affiche en premier.

L'avantage de ce widget est qu'il permet d'économiser de la place. Surtout qu'un blog peut avoir plusieurs libellés qui s'ils sont constamment affichés prennent énormément de la place sur le blog. Avec ce plugin, les catégories sont cachés et affichés seulement si le lecteur clique sur le titre catégorie.

Pour ceux qui seraient intéresser par cette fonctionnalité, voici ce qu'il faut faire :

1. Se connecter à votre compte Blogger. Aller sur "Mise en page" puis sur "Modifier le code Html" et là cochez sur "Développer des modèles de gadget. Pour les étapes suivantes, après avoir mis le code de l'étape, enregistrez le modèle, puis passez à l'autre étape.

2. Mettre le code suivant après la balise <b:section id='sidebar' preferred='yes' showaddelement='yes'> (ou similaire) qui commence votre sidebar

<b:widget id='Label1' locked='true' title='Categories' type='Label'>
<b:includable id='main'>
<div class='tabber'>
<div class='tabbertab'>
<h2>Search</h2>
<div class='searchform'>
<form expr:action='data:blog.homepageUrl + "search"' id='searchform' method='get' name='searchform'>
<input class='s' name='q' onblur='if (this.value == '') {this.value = 'Chercher sur ce blog...';}' onfocus='if (this.value == 'Chercher sur ce blog...') {this.value = '';}' type='text' value='Chercher sur ce blog...'/>
<input alt='Submit button' class='button' src='http://i254.photobucket.com/albums/hh92/eblogtemplates/wppremium/button-submit.gif' type='image'/>
</form>
</div>
</div>

<div class='tabbertab'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<ul class='tablist'>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
</div>

</div><!--Tabber end -->
</b:includable>
</b:widget>


3. Mettre le code css suivant avant la balise ]]></b:skin>


/* Tabber Style start -------------------- */

.tabberlive .tabbertabhide {
display:none;
}
.tabber {
}
.tabberlive {
margin:0 5px;
}
ul.tabbernav
{
margin:0;
padding: 3px 0;
font: bold 12px Arial, Helvetica, sans-serif;
}

ul.tabbernav li
{
list-style: none;
margin: 0;
display: inline;
}
ul.tabbernav li a
{
padding: 3px 0.5em;
margin-left: 3px;
text-decoration: none;
}
/*---- tabbertab = the tab content---------------------*/
.tabberlive .tabbertab {
padding:5px;
}

ul.tabbernav li a {
background:#F4F3E8 none repeat scroll 0%;
border-bottom:medium none;
}
ul.tabbernav li a:link {
color:#B30000;
}
ul.tabbernav li a:hover {
background:#333333 none repeat scroll 0%;
color:#FFFFFF;
}
ul.tabbernav li.tabberactive a {
background-color:#D8D7CC;
border-bottom:1px solid #D8D7CC;
color:#30261E;
}
ul.tabbernav li.tabberactive a:hover {
background:white none repeat scroll 0%;
border-bottom:1px solid white;
color:#000000;
}
.tabberlive .tabbertab {
background:#D8D7CC none repeat scroll 0% 50%;
border-top:0pt none;
}

/* If desired, hide the heading since a heading is provided by the tab */
.tabberlive .tabbertab h2 {
display:none;
}
.tabberlive .tabbertab h3 {
display:none;
}

ul.tablist {
color:#333333;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:5px 0px;
padding:0pt;
}

ul.tablist li {
border-bottom:1px dotted #959595;
font-size:11px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0pt 5px;
padding:2px 0pt 0pt 15px;
text-align:left;
}

ul.tablist li {
background:transparent url(http://i254.photobucket.com/albums/hh92/eblogtemplates/wppremium/bullet-arrow3.gif) no-repeat scroll 3px 8px;
border-bottom:1px dotted #959595;
color:#333333;
}
ul.tablist li a {
color:#333333;
}
ul.tablist li a:hover {
color:#B30000;
}

/*tabs on the page */
.tabberlive#tab1 {
}
.tabberlive#tab2 {
}
.tabberlive#tab2 .tabbertab {
height:200px;
overflow:auto;
}
.searchform {
padding: 10px;
}
.searchform .s {
font-family: Arial, Helvetica, Sans-Serif;
padding: 5px;
margin-right:5px;
width: 213px;
float: left;
background: #fff;
color: #333;
border:1px solid #443b34;
}
.searchform .button {
}

4. Mettre le code javascript suivant après la balise ]]></b:skin>

<script type='text/javascript'>
// <![CDATA[
function tabberObj(argsObj)
{
var arg;
this.div = null;
this.classMain = "tabber";
this.classMainLive = "tabberlive";
this.classTab = "tabbertab";
this.classTabDefault = "tabbertabdefault";
this.classNav = "tabbernav";
this.classTabHide = "tabbertabhide";
this.classNavActive = "tabberactive";
this.titleElements = ['h2','h3','h4','h5','h6'];
this.titleElementsStripHTML = true;
this.removeTitle = true;
this.addLinkId = false;
this.linkIdFormat = '<tabberid>nav<tabnumberone>';

for (arg in argsObj) { this[arg] = argsObj[arg]; }

this.REclassMain = new RegExp('\\b' + this.classMain + '\\b', 'gi');
this.REclassMainLive = new RegExp('\\b' + this.classMainLive + '\\b', 'gi');
this.REclassTab = new RegExp('\\b' + this.classTab + '\\b', 'gi');
this.REclassTabDefault = new RegExp('\\b' + this.classTabDefault + '\\b', 'gi');
this.REclassTabHide = new RegExp('\\b' + this.classTabHide + '\\b', 'gi');
this.tabs = new Array();

if (this.div) {

this.init(this.div);
this.div = null;
}
}

tabberObj.prototype.init = function(e)
{
var
childNodes, /* child nodes of the tabber div */
i, i2, /* loop indices */
t, /* object to store info about a single tab */
defaultTab=0, /* which tab to select by default */
DOM_ul, /* tabbernav list */
DOM_li, /* tabbernav list item */
DOM_a, /* tabbernav link */
aId, /* A unique id for DOM_a */
headingElement; /* searching for text to use in the tab */

if (!document.getElementsByTagName) { return false; }

if (e.id) {
this.id = e.id;
}

this.tabs.length = 0;

childNodes = e.childNodes;
for(i=0; i < childNodes.length; i++) {

if(childNodes[i].className &&
childNodes[i].className.match(this.REclassTab)) {

t = new Object();
t.div = childNodes[i];

this.tabs[this.tabs.length] = t;

if (childNodes[i].className.match(this.REclassTabDefault)) {
defaultTab = this.tabs.length-1;
}
}
}

DOM_ul = document.createElement("ul");
DOM_ul.className = this.classNav;

for (i=0; i < this.tabs.length; i++) {

t = this.tabs[i];
t.headingText = t.div.title;

if (this.removeTitle) { t.div.title = ''; }
if (!t.headingText) {

for (i2=0; i2<this.titleElements.length; i2++) {
headingElement = t.div.getElementsByTagName(this.titleElements[i2])[0];
if (headingElement) {
t.headingText = headingElement.innerHTML;
if (this.titleElementsStripHTML) {
t.headingText.replace(/<br>/gi," ");
t.headingText = t.headingText.replace(/<[^>]+>/g,"");
}
break;
}
}
}

if (!t.headingText) {

t.headingText = i + 1;
}

DOM_li = document.createElement("li");
t.li = DOM_li;
DOM_a = document.createElement("a");
DOM_a.appendChild(document.createTextNode(t.headingText));
DOM_a.href = "javascript:void(null);";
DOM_a.title = t.headingText;
DOM_a.onclick = this.navClick;
DOM_a.tabber = this;
DOM_a.tabberIndex = i;

if (this.addLinkId && this.linkIdFormat) {

aId = this.linkIdFormat;
aId = aId.replace(/<tabberid>/gi, this.id);
aId = aId.replace(/<tabnumberzero>/gi, i);
aId = aId.replace(/<tabnumberone>/gi, i+1);
aId = aId.replace(/<tabtitle>/gi, t.headingText.replace(/[^a-zA-Z0-9\-]/gi, ''));

DOM_a.id = aId;
}

DOM_li.appendChild(DOM_a);
DOM_ul.appendChild(DOM_li);
}

e.insertBefore(DOM_ul, e.firstChild);
e.className = e.className.replace(this.REclassMain, this.classMainLive);
this.tabShow(defaultTab);

if (typeof this.onLoad == 'function') {
this.onLoad({tabber:this});
}

return this;
};

tabberObj.prototype.navClick = function(event)
{

var
rVal, /* Return value from the user onclick function */
a, /* element that triggered the onclick event */
self, /* the tabber object */
tabberIndex, /* index of the tab that triggered the event */
onClickArgs; /* args to send the onclick function */

a = this;
if (!a.tabber) { return false; }

self = a.tabber;
tabberIndex = a.tabberIndex;

a.blur();

if (typeof self.onClick == 'function') {

onClickArgs = {'tabber':self, 'index':tabberIndex, 'event':event};

if (!event) { onClickArgs.event = window.event; }

rVal = self.onClick(onClickArgs);
if (rVal === false) { return false; }
}

self.tabShow(tabberIndex);
return false;
};

tabberObj.prototype.tabHideAll = function()
{
var i; /* counter */

for (i = 0; i < this.tabs.length; i++) {
this.tabHide(i);
}
};

tabberObj.prototype.tabHide = function(tabberIndex)
{
var div;

if (!this.tabs[tabberIndex]) { return false; }

div = this.tabs[tabberIndex].div;

if (!div.className.match(this.REclassTabHide)) {
div.className += ' ' + this.classTabHide;
}
this.navClearActive(tabberIndex);

return this;
};

tabberObj.prototype.tabShow = function(tabberIndex)
{
var div;

if (!this.tabs[tabberIndex]) { return false; }

this.tabHideAll();
div = this.tabs[tabberIndex].div;
div.className = div.className.replace(this.REclassTabHide, '');
this.navSetActive(tabberIndex);

if (typeof this.onTabDisplay == 'function') {
this.onTabDisplay({'tabber':this, 'index':tabberIndex});
}

return this;
};

tabberObj.prototype.navSetActive = function(tabberIndex)
{
this.tabs[tabberIndex].li.className = this.classNavActive;

return this;
};

tabberObj.prototype.navClearActive = function(tabberIndex)
{
this.tabs[tabberIndex].li.className = '';

return this;
};

function tabberAutomatic(tabberArgs)
{
var
tempObj, /* Temporary tabber object */
divs, /* Array of all divs on the page */
i; /* Loop index */

if (!tabberArgs) { tabberArgs = {}; }

tempObj = new tabberObj(tabberArgs);
divs = document.getElementsByTagName("div");
for (i=0; i < divs.length; i++) {

if (divs[i].className &&
divs[i].className.match(tempObj.REclassMain)) {

tabberArgs.div = divs[i];
divs[i].tabber = new tabberObj(tabberArgs);
}
}

return this;
}

function tabberAutomaticOnLoad(tabberArgs)
{
var oldOnLoad;

if (!tabberArgs) { tabberArgs = {}; }

oldOnLoad = window.onload;
if (typeof window.onload != 'function') {
window.onload = function() {
tabberAutomatic(tabberArgs);
};
} else {
window.onload = function() {
oldOnLoad();
tabberAutomatic(tabberArgs);
};
}
}

if (typeof tabberOptions == 'undefined') {

tabberAutomaticOnLoad();

} else {

if (!tabberOptions['manualStartup']) {
tabberAutomaticOnLoad(tabberOptions);
}

}
// ]]>
</script>

5. Enregistrez le modèle et allez voir le résultat.

Quelqu'un est-il preneur ?

Intense Debate pour les commentaires sur Blogger

By // 5 commentaires:
Demandé par Rodney pour faire écho à l'article de Feufol sur "Un autre style pour les commentaires sur Blogger", ce second volet parle d'une autre plate-forme de commentaires: Intense Debate.

Peut attirant par sa complexité, devenant vite une barrière pour les non-utilisateurs de Blogger, le formulaire d'origine de Blogger n'incite pas vraiment le visiteur à s'exprimer...C'est cet aspect peut engageant qui m'a poussé a chercher une alternative crédible pour mon blog, pouvant si possible se rapprocher des standards de commentaires Wordpress avec des cases claires et faciles à remplir. Intense Debate s'est vite imposé car il répond à ces points tout en ajoutant l'édition de commentaire.




Un formulaire enfantin.

Alors tout d'abord, Intense Debate c'est un formulaire simple permettant à chacune et chacun ne possédant pas de compte particulier sur une quelconque plate-forme de blogging de laisser un commentaire et de le signer de son pseudo et l'url de son site. Ce point et très important car un blogger aime faire de la pub pour son blog quand il fait un commentaire. cette plate-forme est en sus compatible avec les gravatars.Remarquez, pour les personnes ayant un compte Intense Debate, se connecter est un véritable jeu d'enfant avec le bouton "Login" situé directement au dessus de la zone de commentaires.

En harmonie avec le blog.

Au chapitre intégration et harmonie avec le blog, Intense Debate n'est pas en reste avec une interface en relief du plus bel effet (sauf sur fond blanc..).


Les commentaires de l'auteur du blog sont dans un encadré bleuté pour une meilleure distinction, et la taille des encadrés est paramètrable selon 3 styles prédéfinis depuis le dashboard.


Un flux RSS dédié à vos commentaires est intégré dans l'interface, sans oublier les nombreux widgets faciles à intégrer. Commentaires les plus récents, meilleurs commentateurs, etc. il y en a pour tous les goûts. Je regrette juste qu'il manque un nuage de tag pour les commentaires... (très pratique pour mettre en avant ces derniers)



Un choix de paramétrages variés.

Le dashboard est assez complet avec un lot de paramétrages inédits sur Blogger, avec par exemple des filtres, la possibilité de blacklister des gens, etc.


L'installation d'Intense Debate peut se faire via la feuille de style (facile et semi-automatisé) ou par widget ( chose que je déconseille car le formulaire Blogger sera dans ce cas encore apparent ), et uniquement sur les nouveaux posts ou sur tous au choix.


A moins que vous n'ayez une grande quantité de commentaires, je ne peux que vous inciter à l'installer sur tout les posts car cette plate-forme à l'avantage de disposer d'un module d'importation des anciens commentaires! Cela marche à merveille désormais.


Pour finir, Intense Debate c'est aussi une communauté (principalement anglophone car le service est en anglais...) comme on peut en voir fleurir un peu partout, et un système de notation unique des commentaires permettant de définir les plus pertinents ou appréciés.

Bref, un (très) bon moyen de doter son blog d'un formulaire de commentaires complet et qui donne envie de commenter!

Voilà à peu près tout sur Intense Debate; en espérant vous avoir convaincus, et pourquoi pas convertis. Et puis un grand merci à Rodney de m'avoir proposé de faire un article ici sur Blogger au bout du doigt.

Mister aiR, blogmaster des blogs OroO/Oro'o et Le Canard qui Croque.

Seo pour les images sur Blogger

By // 7 commentaires:
Les images servent à illustrer les articles de nos blogs. Un bon SEO de ceux-ci peut faire d’eux de sources d’attraction des visiteurs à ne pas négliger. Comment alors optimiser les images pour les moteurs de recherche (surtout si on a un blog qui s’appelle Suitimages) ?

1. Nommer intelligemment les images



Quand vous mettez des images dans un article, veillez à nommer ceux-ci intelligemment, afin qu’ils puissent vous attirer des visiteurs. Si votre article parle des prisonniers maltraités, il vous faut nommer au moins une image avec le titre de l‘article.

Photo des moribonds à la Prison de Makala


Prenons que notre article se nomme : Prison de Makala : le tour des lieux. La première illustration que nous allons mettre devra être nommer (à partir d’un éditeur des photos) : prison-de-makala-le-tour-des-lieux (malheureusement, le blogmaster ne l’a pas fait). Je recommande de séparer les mots par des tirets car ils sont mieux lis par les moteurs de recherche de cette manière (un peu comme l’url des articles : souvenirs-de-prison.blogspot.com/2008/08/prison-de-makala-le-tour-des-lieux.html).

Vous pourrez nommer les autres images comme vous voulez, mais n’omettez pas de mettre les mots clés de votre article sur le nom d’au moins une image.

2. Ajouter les balises alt et title dans une image d'un article sur Blogger



Sur Blogger, quand on ajoute un dessin ou une photo dans l’article, beaucoup oublient de l’optimiser en y ajoutant les attributs alt (texte alternatif qui s'affiche quand l'image ne s'est pas affichée) et title (titre qui s'affiche lorsque l'on passe la sourris).

Pour ajouter ces attributs, après avoir mis votre illustration dans le message (pendant que vous y travaillez dans votre compte), cliquer sur “Mode Html ” et recherchez un code du genre :


<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrrbSB0DTijX6bIxgiVoZ5i7CxhGPOzdqxjozMuqAYx2J6JomwqQ5LQHx3HHUIImGNelx-XzVlrA-IlpXX5tX0DY0xuOlDmNo_ID6bWqcid3xo4zZteixVMaO5apeYsJ7urHD443hyFpy6/s1600-h/seo-pour-contenu-articles-sur-blogger.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqPgiIX1Ej5h-YIaHw7lhpuADbXZhs9IMMDJA2-BG5SBJqIxy6J0Inv3iyN547FkqG6OL_nScGJDmKKUIENN8HTpC6c5wDMvWY30jv1OdkBmd8DhmqWceNs9pvBZTqy8vgfkRewskI4lAn/s320-r/seo-pour-contenu-articles-sur-blogger.jpg" alt="Description de l'image qui apparaît quand elle n'est pas affichée" title="Le nom de l'image"/></a>

Ajoutez les parties en rouge en les adaptant selon l'image de votre article.


3. Le rôle de la taille de l’image pour le Seo



Je ne sais pas pourquoi, mais vous remarquez qu’en faisant une recherche sur Google image, celles qui sont mieux positionnée sont celles comprise entre 500 et 300 pixels.

Donc, si vous voulez que vous images soient un atout dans votre stratégie d’optimisation, ne leur donnez pas une taille en dessous de 300 pixels ou au-dessus de 500 pixels.

Si vous respectez scrupuleusement les trois points ci-hauts dans le seo de votre blog, vos images deviendront de vrais facteurs d’attraction des visiteurs.

Seo pour navigation et liens

By // Aucun commentaire:

La navigation et les liens de votre blog doivent permettre aux lecteurs humains de savoir avec exactitude où aller et comment y aller et aussi permettre aux robots de moteurs de recherche de savoir où aller et où ne pas aller (pour éviter le duplicated content et l’indexation des pages inutiles pour Google, tels que la page pour vous contacter).

Pour satisfaire ces deux catégories des visiteurs de votre blog, il faut inclure un moyen de navigation sur blog. Jason Katzenback conseille de commencer par comprendre pour cela, quelles pages ou catégories sont importantes pour vous (que vous voulez voir être bien positionnées sur les moteurs de recherche) et quelles sont les pages importantes pour les visiteurs et moins importantes pour Google. Ces dernières pages seront étiquettées de l’attribut rel=’nofollow’ afin qu’ils ne soient pas pris en compte par les moteurs de recherche tout en restant accessibles aux visiteurs.


A. Navigation optimisée pour les visiteurs et les moteurs de recherche



Pour ce qui est d’une barre de navigation, les articles suivant renseignent sur les moyens d’en ajouter une sur votre blog :

a) Barre menu

b) Une barre horizontale pour vos catégories

c) Barre de navigation avec boutons

d) Barre menu avec image

La difficulté qui se présente quand on utilise le widget Liste des Liens fournit par Blogger, c’est qu’il est difficile d’ajouter l’attribut rel='nofollow' à certains liens afin d’empêcher aux moteurs de recherche de les indexer.

Ceci devrait pourtant être le cas pour le lien vers la page d’accueil, s’il est nommé « accueil » puisque si les moteurs de recherche indexent ce lien, ils considéreront que le mot « accueil » est le mot clé le plus important de la page principale de votre blog. A moins que vous ayez un blog sur l’hôtellerie et les hôtesses de l’air, je ne crois pas que le mot accueil serait l’anchor text idéal pour l’url principale de votre blog.

Pour remédier à ce désagrément, il suffit de manipuler le widget LinkList afin d’y ajouter manuellement certains liens auxquels on peut ajouter l’attribut rel='nofollow'. C’est ce que j’avais du faire pour la barre de navigation de ce blog afin d’éviter des malentendus avec Google. Certains auront peut être remarqué qu’après le changement de modèle, j’avais pris du temps sans mettre un lien vers la page d’accueil. Ceci parce que je cherchais la combinaison idéal pour éviter certains désagrément.

Le widget Liste de lien ci-dessus comprend 1) en rouge, les liens ajouté manuellement et qui se trouveront toujours au début (que l’on peut marquer d’un attribut rel='nofollow'), 2) en bleu, les liens qui sont ajouté en allant sur « Mise en page, éléments de la page et en cliquant sur modifier pour le widget « Liste des liens » (ces liens peuvent être ordonné alphabétiquement, de façon ordonnée ou à l’inverse à moins qu’ils soient classés selon leur ordre d’arrivée, le dernier à la première place), et enfin 3) en vert, les liens qui se trouveront toujours à la fin (que l’on peut aussi marquer ou non d’un attribut rel='nofollow').

<b:widget id='LinkList2' locked='true' title='Liste des liens' type='LinkList'>
<b:includable id='main'>
<div class='widget-content'>
<b:if cond='data:title'/>
<ul>
<li class='page_item'><a href='/' rel='nofollow'>Accueil</a></li>
<li class='page_item'><a href='Mettre une url ici' rel='nofollow'>A propos</a></li>
<b:loop values='data:links' var='link'>
<li class='page_item'><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
<li class='page_item'><a href='/' rel='nofollow'>Contact</a></li>
<li class='page_item'><a href='/'>Menu 3</a></li>
</ul>
</div>
</b:includable>
</b:widget>


B. Liens optimisés pour les moteurs de recherche




Quand vous citez un article précédemment publié (sur votre blog ou ailleurs), il n’est jamais sage de nommer le lien « cliquez ici », « ici » ou « ici » et « là ».

L’anchor text (le nom du lien) doit refléter ce que contient l’article. Il doit avoir les mots clés de l’article afin d’améliorer son positionnement sur les moteurs de recherche et permettre au lecteur de savoir où le lien le conduit.

Toutefois, il ne faut pas exagérer l’utilisation d’un ou des mots clés pour nommer un lien. Le fait que tous les liens entrant (ceux venant des autres blogs) d’une page spécifique de votre blog ont toujours le même mots clés, la même phrase, peut vous valoir une pénalité de la part de Google. John Chow qui avait abusé du système en menant une campagne de Linkbaiting avec « Make money online » comme mots clés vers la page d’accueil de son blog, subi le courroux du célèbre moteur de recherche jusqu’à ce jour.


Y a-t-il quelque chose d’intéressant que vous avez appris ?

Blogger et le duplicated content

By // 2 commentaires:
Y a-t-il moyen d’éviter le problème de duplicated content sur Blogger ?



L’un des défis à relever quand on a un blog sur Blogger est celui du duplicated content. En effet, les contenus entiers des articles se retrouvent sur les pages dédiées à chaque article, à la page d’accueil, les pages d’archives et les pages de libellés. Toutes ces pages étant indexées par Google, ceci le conduira à frapper d’une pénalité certaines pages car retrouvant le même contenu à plusieurs pages différentes du blog.

Admettons que vous avez publié 4 articles sur votre blog et que ces 4 articles s’affichent sur l’url principale de votre blog (http://votreblog.blogspot.com/). En même temps, ces 4 articles seront aussi affiché sur la page d’archives  (http://votreblog.blogspot.com/2008_04_01_archive.html) faisant que Google considère l’une de ces pages comme étant copie de l’autre. Si vous aviez publié un seul article pour le mois de mai 2008, celui-ci se retrouvera sur sa page et aussi sur la page d’archives pour le mois de mai 2008 : deux pages différentes avec le même contenu.


Sur les autres plateformes de blogs, Wordpress par exemple, Il y a possibilité de mettre une balise avec l’attribut rel='nofollow' aux pages d’archives et à celles de libellés (tags) grâce auxquels on constitue les catégories.

L’autre expédiant est de mettre juste les premiers paragraphes des articles à la page d’accueil (un peu comme sur le Journal du blog) et de mettre juste les titres des articles sur les pages d’archives et des libellés.

Ainsi, on s’évite de voir certaines pages du blog être pénalisées à cause du duplicated content.

C’est pour cette raison que sur ce blog, j’affiche juste les titres des articles sur les pages d’archives et de libellés et évite d’afficher la totalité du contenu d’un article à la page d’accueil. Pour arriver à faire de même sur votre blog, voyez nos articles :

- Afficher juste les titres sur les pages d’archives et de libellés

- Afficher seulement une partie des vos articles à la page d’accueil

- Juste le résumé à la page d’accueil

Vous pouvez aussi voir l’article « Afficher une partie du message» .

L’avantage de ce système est que non seulement vous évitez les pénalités pour Duplicated content, mais vous multipliez aussi par la même occasion le nombre de pages vues par jour (puisque le lecteur n’a plus tous les 20 articles de la catégorie sur la même page, il doit aller voir chaque article sur sa page).

D’autres préconisent de désactiver l’archivage des articles en allant sur « Paramètres, archivage » et choisir « aucun archivage ».

Autre chose, je ne vous recommande pas de laisser vos articles être publié sur des sites tels Paperblog et autres du genre. Le problème est que ce site on la possibilité d’être mieux indexé (et plus vite) que votre blog, ce qui fait qu’en retrouvant le même contenu sur votre blog, Google le taxera d’être une copie alors que  c’est l’original.

Moi-même j’ai utilisé paperblog pendant un temps, mais quand j’ai pris conscience du problème que cela pouvait poser et ai remarqué que pendant tout le temps que j’y étais inscrit, ce site ne m’avait rapporter que 450 visiteurs, j’avais décidé de l’abandonner. Comme avec un peu de SEO, j’ai été en mesure d’augmenter de plus de 40 % le nombre des visiteurs et de pages vues du blog, je crois que je peux me passer de visites générées par de tels sites.

Optimiser le contenu des articles de son blog

By // Aucun commentaire:
Comment optimiser le contenu des articles de son blog pour les moteurs de recherche ? Le SEO ne concerne-t-il que les balises meta et les urls des articles (comme du blog) ou y a-t-il aussi possibilité d’optimiser ses articles pour un bon positionnement sur Google ?

 Ceci est la suite de notre série consacrée au SEO pour les blogs hébergés sur Blogger. Nous avions vu comment mieux positionner son blog grâce à son nom, son url et l’url des articles ainsi que leurs titres et sous titres. Nous avons aussi vu comment faire du seo pour les commentaires de son blog sur Blogger après avoir vu comment mettre des balises meta dynamiques (propre à chaque page du blog). Ici, nous allons voir comment rendre les textes de son blog (hébergé sur n’importe quel plateforme) attirant pour les moteurs de recherche.


En effet, si vous avez un  blog qui n’est pas principalement dédié à la publication d’images (comme celui de Marie du Nord), il faut que vos écrits (le contenu de vos articles) soient bien structurés de sorte qu’ils aient un bon positionnement sur les moteurs de recherche par rapport aux mots clés de chacun d’eux.



Densité des mots clés dans un article



Certains se sont souvent empressés de mettre une tonne des mots clés à leurs balises meta afin de forcer les moteurs de recherche à indexer leurs pages dans les catégories concernées. Seulement, vu la complexité des algorithmes actuellement utilisés, surtout par Google, il est peu probable que cela réussisse à apporter le résultat escompté si ces mêmes mots clés ne se retrouvent nulle part dans les articles ou leurs titres.


Comme le souligne Jason Katzenback, la nouvelle voix du blog Johncow.com (pas JohnChow.com), les moteurs de recherche, Google en particulier, deviennent de plus en plus intelligent dans le but d’offrir aux utilisateurs (humains bien-sûr) les meilleurs résultats possibles pour les recherches qu’ils effectuent.


L’un des derniers algorithmes mis au point par Google s’appelle Latent Semantic Indexing, LSI en sigle. Son but est d’imiter le processus de pensée humaine pour mieux déterminer la pertinence des  résultats de recherche pour les humains. Ainsi, en examinant une page web, il le verra si son contenu s’apparente à une conversation humaine ou si c’est juste une foire aux mots clés, crée dans le but de se retrouver à la première place des résultats.


Prenons un exemple. Dans une conversation normale, vous ne pouvez pas dire : « J’aime les bananes. Je vais m’acheter une banane. Je pèle la banane que j’ai achetée. J’avale la banane que j’ai pelée. » Pourtant, c’est ce que font certaines personnes quand le mot clé de leur article est banane. Ils le disséminent un peut partout sur l’article afin que les moteurs de recherches puissent mieux le positionner pour une recherche effectuée sur le mot banane.


Avec le LSI, Google vérifie la densité d’un mot clé dans le texte pour déterminer si le contenu est destiné aux humains ou non. Ainsi, la phrase ci-haut serait plutôt rendue comme ceci dans une conversation humaine normale : « J’aime les bananes. Je vais m’en acheter une que je vais vite avaler après l’avoir pelée. » Bien que le mots clés soit bananes (banane), il est rendu par autre chose dans la deuxième phrase.


Certains de ceux qui utilisent Blogger se sont déjà retrouvés un jour dans l’impossibilité d’y publier un message car leurs blogs avaient été indexé comme spams par les robots de Google, Moi et Napainléon Brainapart en savons quelque chose. La raison donnée est qu’on y retrouve une répétition des mêmes mots à temps et à contre temps (façon de parler). Et, quand le processus d’authentification à Google qu’une personne humaine conduit bel et bien le destinée du blog n’est pas entammé, celui-ci est supprimé dans les deux semaines.


Ceci m’était arrivé pour mon blog Café Biblique, il y a une année de cela. Vu que j’y parle de certaines choses que j’appuie en citant de versets de la Bible qui répètent les mêmes mots, encore et encore, Blogger s’était cru en présence d'un blog spam, foire aux mots clés destinés à fausser les résultats des moteurs de recherche. L’accès à la publication du blog fut bloqué pour un certain temps et ne fut rétabli que quand j’avais accomplis les étapes nécessaires pour authentifier à Google que ce n’était pas un robot qui jouait au Blogging. Comprenez que le système LSI ce n’est pas de la blague.


Pour optimiser le contenu de ses articles pour les moteurs de recherche, Yaro Starak, du blog Entrepreneur-journey.com, recommande de faire une recherche sur Google avec les mots clé que vous avez ciblé pour un article. Voyez à quelle densité ou fréquence ils se retrouvent sur les articles paraissant en premières positions et essayer d’imiter cette répartition dans votre article pour mieux le positionner.


Jason Katzenback lui est encore plus précis en recommandant que la densité des mots clés dans un article soit au maximum de 6 %. C’est-à-dire que pour un texte de 500 mots, les mots clés doivent se retrouver au plus 10 fois seulement.


Selon lui, on devrait avoir quelque chose du genre :

- Les mots clés au titre de l’article (surtout dans sa première moitié)
- Une fois dans la première phrase du premier paragraphe
- Une fois dans la dernière phrase du premier paragraphe
- Une ou deux fois dans les paragraphes du milieu du texte
- Une fois dans le dernier paragraphe.


Il recommande aussi de ne pas faire des paragraphes de plus de 3 phrases, en veillant de toujours passer à un autre paragraphe quand on commence un nouveau point. Surtout ne pas s’évertuer à mettre juste les mots clés en gras ou en italique, mais mettre en italique (ou en gras) les points essentiels sur lesquels on veut attirer l’attention des lecteurs.


Alors, allez-vous dormir moins ignorant aujourd’hui ou avez-vous quelque chose à rectifier  (ajouter ) sur la question ?

Rediriger un blog Blogger vers un autre

By // 7 commentaires:
Aujourd'hui je vous donne une autre astuce pour rediriger un blog Blogger, car il semble que l'autre ne marche pas pour certain.

Cette astuce est de Mohamed Rias, qui recommande de coller le code ci-après juste avant la balise </head> dans le modèle html de votre blog.

<script>
//<![CDATA[
alert('Vous allez être rediriger vers la nouvelle adresse du blog "http://votrenouvelleurl.blogspot.com" ');

window.location.href = 'http://votrenouvelleurl.blogspot.com';
//]]>
</script>

Remplacez votrenouvelleurl par votre nouvelle url et le tour est joué (n'oubliez pas d'enregistrer le modèle).

Numéroter les pages sur Blogger

By // 50 commentaires:
Mélusine et Lut m'ont souvent demandé comment mettre un système de numérotation des pages qui permette à ce qu'en cliquant par exemple sur le numéro 5, on aille à la page 5 du blog (le 5ème article récemment publié).


Je suis tombé ce matin sur une astuce de Mohamed Rias qui permet d'arriver à cette fin. Voyez l'image pour vous en convaincre.

Paginer la navigation sur Blogger

Vous pouvez aussi voir l'astuce en live sur Blogger accessories.


Comment intégrer la numérotation des pages pour naviguer au travers des articles sur Blogger ?

1. Se connecter sur son compte, puis aller sur "mise en page", "modifier le code html" (pas besoin de cocher sur "développer des modèles de gadget".

2. Mettre le code suivant avant la balise ]]></b:skin>

.showpageArea {font-size: 11px; width:470px;background: url(http://i263.photobucket.com/albums/ii150/mohamedrias/ShowPagenavbar.jpg) no-repeat left top; padding-top:10px;padding-bottom:10px;padding-right:15px;padding-left:30px; color:#003366;text-align:left;
}
.showpageArea a {
color:#0F0;
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
color:#0F0;
border:1px solid #FFF;
margin:0 10px;
padding:0 5px 0 8px;
}
.showpageNum a:hover {
color:#FE8314;
border:1px solid #0071A5;
background-color:#FFF;
}
.showpagePoint {
color:#FE8314;
margin:0 8px 0 4px;
}
.showpage a {
text-decoration:none;
color:#FFF;
padding:0 2px 0 4px;
}
.showpage a:hover {
color:#FE8314;
text-decoration:underline;
} .showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#cc0000;
}

Vous pouvez enlever l'url de l'image si vous préférez ne pas la mettre.

3. Trouvez la portion les codes suivants :

<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>


4. Mettre la partie ci-après juste après </b:section>

&lt;script type=&quot;text/javascript&quot;&gt;

function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==&quot;.blogspot.com/&quot;;
var isLablePage = thisUrl.indexOf(&quot;/search/label/&quot;)!=-1;
var isPage = thisUrl.indexOf(&quot;/search?updated&quot;)!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.length) : &quot;&quot;;
thisLable = thisLable.indexOf(&quot;?&quot;)!=-1 ? thisLable.substr(0,thisLable.indexOf(&quot;?&quot;)) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= &#39;&#39;;
var upPageHtml =&#39;&#39;;
var downPageHtml =&#39;&#39;;

var pageCount = 2;
var displayPageNum = 3;
var upPageWord = &#39;Précedente&#39;;
var downPageWord = &#39;Suivante&#39;;



var labelHtml = &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/search/label/&#39;+thisLable+&#39;?&amp;max-results=&#39;+pageCount+&#39;&quot;&gt;&#39;;

for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=&#39;&#39;){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

postNum++;
htmlMap[htmlMap.length] = &#39;/search/label/&#39;+thisLable+&#39;?updated-max=&#39;+timestamp+&#39;T00%3A00%3A00%2B08%3A00&amp;max-results=&#39;+pageCount;
}
}
}
}//end if(post.category){

itemCount++;
}

}else{
if(title!=&#39;&#39;){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!=&#39;&#39;) postNum++;
htmlMap[htmlMap.length] = &#39;/search?updated-max=&#39;+timestamp+&#39;T00%3A00%3A00%2B08%3A00&amp;max-results=&#39;+pageCount;
}
}
itemCount++;
}
}

for(var p =0;p&lt; htmlMap.length;p++){
if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){
if(fFlag ==0 &amp;&amp; p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
}else{
upPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;/&quot;&gt;&#39;+ upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
}
}else{
upPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
}

fFlag++;
}

if(p==(thisNum-1)){
html += &#39;&lt;span class=&quot;showpagePoint&quot;&gt;&lt;u&gt;&#39;+thisNum+&#39;&lt;/u&gt;&lt;/span&gt;&#39;;
}else{
if(p==0){
if(isLablePage){
html = labelHtml+&#39;1&lt;/a&gt;&lt;/span&gt;&#39;;
}else{
html += &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/&quot;&gt;1&lt;/a&gt;&lt;/span&gt;&#39;;
}
}else{
html += &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ (p+1) +&#39; &lt;/a&gt;&lt;/span&gt;&#39;;
}
}

if(eFlag ==0 &amp;&amp; p == thisNum){
downPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt; &lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ downPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
eFlag++;
}
}//end if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){
}//end for(var p =0;p&lt; htmlMap.length;p++){

if(thisNum&gt;1){
if(!isLablePage){
html = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;/&quot;&gt;&lt;/a&gt;&lt;/span&gt;&#39;+upPageHtml+&#39; &#39;+html +&#39; &#39;;
}else{
html = &#39;&#39;+labelHtml + +&#39; &lt;/a&gt;&lt;/span&gt;&#39;+upPageHtml+&#39; &#39;+html +&#39; &#39;;
}
}

html = &#39;&lt;div class=&quot;showpageArea&quot;&gt;&lt;span style=&quot;COLOR: #000;&quot; class=&quot;showpage&quot;&gt; Pages (&#39;+(postNum-1)+&#39;): &lt;/span&gt;&#39;+html;

if(thisNum&lt;(postNum-1)){
html += downPageHtml;

}

if(postNum==1) postNum++;
html += &#39;&lt;/div&gt;&#39;;

if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName(&quot;pageArea&quot;);
var blogPager = document.getElementById(&quot;blog-pager&quot;);

if(postNum &lt;= 2){
html =&#39;&#39;;
}

for(var p =0;p&lt; pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&amp;&amp;pageArea.length&gt;0){
html =&#39;&#39;;
}

if(blogPager){
blogPager.innerHTML = html;
}
}

}
&lt;/script&gt;

&lt;script src=&quot;/feeds/posts/summary?alt=json-in-script&amp;callback=showpageCount&amp;max-results=99999&quot;; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;<div style='text-align:right;font-size:10px;color:000000;margin-top:15px;'> <a href="http://rias-techno-wizard.blogspot.com/">Blogger accessories</a><a href='http://blogger-au-bout-du-doigt.blogspot.com/2008/08/numeroter-les-pages-sur-blogger.html'>Obtenir ce Widget ~ </a> </div>


Dans le code ci-haut, vous pouvez changer les lignes en rouge à votre souhait.

1 : var pageCount = 2;

Le chiffre en rouge représente le nombre d'article qui sera affiché sur une page. Vous pouvez changer le nombre pour afficher plus de 2 articles sur la page ou moins de 2 articles (1, pas O).

2 : var displayPageNum = 3;

Le chiffre en rouge ci-haut représente le nombre de page à afficher entre Précedente et suivante.

Par exemple, si vous choisissez 7, vous aurez quelque chose du genre :

Précendente 1,2,3,4,5,6,7 Suivante

3 :

var upPageWord = &#39;Précedente&#39;;
var downPageWord = &#39;Suivante

Vous pouvez changer le terme précedente et suivante par ceux que vous désirez.

Enregistrez le modèle.

Si vous avez mis un Widget libellé, vous remarquerez que tous les articles s'afficeront sur les pages de libellé quand on clique sur l'un d'eux. Pour remedier à ce problème :

5. Cocher sur la case "Développer des modèles de gadget"

6. Trouver la ligne de code suivante :

<b:widget id='Label1' locked='false' title='Labels' type='Label'>



Dans ce widget, trouvez la portion de suivante :

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/>
</a>
</b:if>
<span dir='ltr'>(<data:label.count/>)</span>


Remplacez le code ci-haut par celui-ci :

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url + &quot;?max-results=2&quot;'>
<data:label.name/>
<span dir='ltr'>(<data:label.count/>)</span>
</a>
</b:if>

Le chiffre en rouge représente le nombre d'article à afficher sur une page libellé. Changez-le par un autre si vous désirez et enregistrez le modèle.

A+

Seo pour les commentaires sur Blogger

By // 3 commentaires:
Sur Blogger chaque commentaires se voit attribuer une Url propre. Ceci fait qu'avec un article qui a 50 commentaires, vous avez 51 url différentes qui conduisent vers la même page. Seulement, à cause de l'attribut rel='nofollow' attribué aux urls des commentaires, seul l'url de l'article sera suivi par les moteurs de recherche.

S'il en était autrement, toutes ces urls (celui de l'article et ceux de ses commentaires) seront indexés par les moteurs de recherche, avec pour conséquence que son blog peut soit se retrouver bien positionné sur une page de résultat de recherche grâce à l'url d'un commentaire, soit se retrouver plus d'une fois sur une page de résultat de recherche grâce à l'url de l'article et celui d'un (ou des) commentaire(s).

Pour remédier à ce problème et faire indexer même ses commentaires par les moteurs de recherche, il faut :

1. Aller sur votre compte, sur "mise en page", "modifier le code html" et cocher sur "développer des modèles de gadet".

2. Trouver la ligne de code suivante :

<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>

3. Effacer le rel='nofollow' et enregistrez le modèle.

Ainsi, si votre blog a 350 articles et 1500 commentaires, vous aurez plus de 1850 urls qui conduisent sur les 350 pages d'articles de votre blog.

N'est-ce pas génial ça ?

Balises meta dynamiques sur Blogger

By // 15 commentaires:
Les balises Meta  informent les moteurs de recherche sur le titre de votre blog, sa description et les mots clés de celui-ci (on peut ajouter aussi le nom du blog master). En leur absence, les moteurs de recherche vont chercher ces informations ailleurs sur votre blog (et Dieu sait ce qu’ils peuvent prendre à la place).


Souvent, quand on met des balises meta, on se limite à en attribuer des communs à toutes les pages du blog.  Or, l’un des critères utilisé par Google pour taxer un contenu d’être une copie dupliquée d’une autre, c’est le fait qu’il y ait la même description et le même titre dans les balises meta pour des pages différentes d'un même site (blog). Google se dit que si deux contenu du même blog ont le même titre et la même description, pourquoi sont-ils sur deux pages différentes ? L’un doit être la copie de l’autre. Voyez pourquoi je vous ai recommandé de mettre l’option pour n’afficher que le Titre de l’article à la place du Nom du blog sur la barre de titre. Ceci permet d’avoir des titres différents pour les pages de son blog.




Que faire alors pour avoir des balises meta propres à chaque page du blog ?



C’est simple. J’ai du adapter l’astuce pour afficher seulement le titre de l’article sur la barre de titre avec le widget de Yony (qui ne marche plus) pour rendre dynamique les balises meta sur son blog. Je dois remercier Dany et Maryse du blog Tour du monde en Photo et vidéos qui m’avaient fournis des balises meta qui marchent car celles que j’utilisais avant n’étaient pas vues sur les sites qui analysent leur présence.




Il reste cependant que je trouve un moyen pour afficher aussi les mots clés pour chaque article en utilisant les libellés de chacun de ceux-ci.



En attendant, voici le code nécessaire pour afficher des balises meta différentes pour chaque page de votre blog. Dans la première partie du code (avant le <b:else/>) vous avez les balises meta pour afficher le titre et la description du blog à la page d’accueil. Dans la deuxième partie du code (après le <b:else/>) vous avez une balise pour afficher la description de l’article. C’est le titre de l’article qui sera utilisé comme description de celui-ci. Il faut alors qu’il soit pertinent. Si vous le voulez, vous pouvez recopier la balise pour les mots clés et l’insérer dans la deuxième partie, le temps que j’arrive à vous donner le moyen de mettre les libellés de chaque article comme mots clés.


<b:if cond='data:blog.pageType == &quot;index&quot;'>

<title><data:blog.title/></title>



&lt;meta  content=&quot;Ecrire le nom de l'auteur ici&quot; name=&quot;author&quot;/&gt;

&lt;meta name=&quot;description&quot; content=&quot;Ecrire la description ici&quot;/&gt;

&lt;meta NAME=&quot;keywords&quot; content=&quot;Ecrire les mots clés ici. séparez les par une virgule&quot;/&gt;

<b:else/>

<title><data:blog.pageName/></title>

&lt;meta name=&quot;description&quot; content=&quot;<data:blog.pageName/>&quot;/&gt;

</b:if>



Le code ci-haut est à mettre dans le modèle html de votre blog à la place de :



<title><data:blog.title/></title>



Ou à la place du code suivant, si vous aviez inclus la méthode pour afficher le titre de l'article sur la barre des titres.





<b:if cond='data:blog.pageType == &quot;index&quot;'>

<title><data:blog.title/></title>

<b:else/><title><data:blog.pageName/></title>

</b:if>



IMPORTANT : Ne partez pas encore, ce n’est pas tout !



Etes-vous sûr que les mots clés que vous allez mettre vont vous rapporter assez de visiteurs ? Si vous n’en êtes pas sûr, même si vous l’êtes, il faut vérifier la pertinence de vos mots clés et au cas contraire (s’ils ne sont pas pertinents) en prendre d’autres.



Comment choisir des mots clés pertinents ?


Qu’arrivera-t-il à votre blog si vos principaux mots clés ne reçoivent qu’une moyenne de 250 recherche par mois sur Google et que vous ne recevez qu'au plus 1 % de ces chercheurs sur votre blog ? Vous aurez 2,5 visiteurs par mois grâce aux mots clés de votre blog. Pas fameux.



Je vous recommande de faire analyser votre blog sur Google Keyword Tool (générateur des mots clés), afin de voir quelle est la moyenne mensuelle de recherche de vos mots clés sur le meilleur  moteur de recherche et quels mots clés il vous propose à la place.



Pour la question "Comment souhaitez-vous générer des idées de mots clés ?",  choisissez "Contenu de site web". Mettez l'url de votre blog sur la case à droite et cochez sur "Inclure d'autres pages de mon site auxquelles cette URL permet d'accéder". Cliquez sur "Trouver des idées de mots clés".
Parmi les variantes que Google vous propose, choisissez celles qui ont une plus grande moyenne de recherche pas mois et le moins de concurrence. Disons qui dépassent le 50.000 (si vous en trouvez). Ainsi, même si seulement 1 % de ceux qui font une recherche avec ce mot clés sur Google sont dirigés vers votre blog, vous aurez 500 visiteurs le mois grâce à ce seul mots clés. Si dans la même logique vous mettez 15 mots clés ayant une moyenne de 50.000 recherches par mois, si vous n’obtennez que 1 % de ce 50.000 x 15, vous aurez 7500 visiteurs le mois grâce à vos 15 mots clés. Ajoutez à cela les autres facteurs qui amènent les visiteurs sur votre blog (le contenu, les liens sur les autres blogs, la pub de votre blog que font vos lecteurs à leurs proches et amis) vous vous en sortirez assez bien par mois en terme de visite.





Toutefois, je ne vous garantis par que vous aurez forcément au moins 1 % de visiteurs par rapport à la moyenne de recherche de chacun des mots clés que vous avez mis. Vous pouvez en avoir plus ou même moins. Mais, grâce à cette astuce, VOUS AUREZ MIS TOUTES LES CHANCES DE VOTRE COTE.



Autre chose, après avoir mis les mots clés que vous aurez pris sur Google dans votre balise meta pour la description, je vous recommande de publier au moins un article ayant les mots clés choisis au titre. Je ne vous dis pas de mélanger tous les mots clés sur le titre d’un seul article. Je vous recommande de publier pour chaque mots clés un article qui le contient au titre.


Votre lanternne a-t-elle était éclairée ?

SEO pour le nom du blog, les titres des articles et les sous titres

By // 3 commentaires:


Comment rendre le nom de son blog, les titres des articles ainsi que les sous titres intéressants pour les moteurs de recherche afin qu'il puissent les afficher (le blog ou l'article) parmi les premiers résultats de recherche ?

1. Le nom du blog



a. La constitution de l'url



L'une des premières choses à faire lorsque l'on crée un blog sur Blogger, c'est de constituer son url, la partie qui apparaîtra entre http:// et .blogspot.com.

La composition de cette url doit se faire de manière à la rendre attirante pour les moteurs de recherche puisque les visiteurs eux verront au premier abord le titre tel qu'il s'affiche sur la barre des titres.

Un conseil d'amis, mettez des mots clés comme url de votre blog, les mots qui résument le mieux l'objet de votre blog. C'est toujours mieux de mettre le mot clé le plus important en première position afin que quand Google analyse les sites (blogs) à classer selon les mots clés qui se trouvent sur l'url de l'adresse principale, vous soyez bien coté pour ce mot clé (vous serez encore mieux coté si ce même mot clé apparaît dans la description de votre blog).


Comment alors constituer son url ?

Il existe deux méthodes. Prenons que vous voulez nommer votre blog "Blagues pour tous" :

- soit vous mettez une url du genre : http://blaguespourtous.blogspot.com

- soit vous mettez une url du genre : http://blagues-pour-tous.blogspot.com

J'ai toujours préféré la deuxième méthode car je trouve qu'elle facilite la tâche aux robots des moteurs de recherche qui tendent de plus en plus à lire le contenu du net comme le ferait un humain afin d'offrir un meilleur résultat aux chercheurs.

Vous avez la possibilité de questionner Google sur l'appréciation qu'il fait de votre blog par rapport à tous les autres sites (et blogs) qui ont le même mots clés que le votre sur leur url. Faites pour cela une recherche du genre : allinurl:"votre mot clé".


b. La composition du nom du blog



Quel nom donner à son blog ? Cette question peut vous sembler inopportune puisqu'il est censé que vous avez déjà nommé votre blog en le créant.

Mais posez-vous la question de savoir si le nom de votre blog vous permet d'avoir plus de visiteurs ou s'il est handicap. J'ai appris, après quelques années d'utilisation du net, que lorsque l'on fait de recherche, on lit d'abord le titre en bleu présenté sur les résultats de recherche.

Prenons que je fasse une recherche sur l'énergie nucléaire, quelle serait ma réaction face à deux résultat différents présentant le nom du blog (ou site), l'un du genre "Le blog de Rodney SANKINKA" et l'autre du genre "Tout savoir sur l'énergie nucléaire". Je ne cliquerais sur le titre "Le blog de Rodney SANKINKA" que si je le reconnais comme expert ou spécialiste en matière nucléaire (un peu comme si c'était Einstein) tandis que si c'est un inconnus pour moi, même s'il était affiché en première position et l'autre en deuxième position, j'aurais plus tendance à aller cliquer sur le deuxième résultat.

Si toutefois vous tenez absolument à mettre un nom ou quelque chose de vraiment pas lié directement avec l'objet (la ligne éditoriale) de votre blog, il faut que vous mettiez une description claire de son objet dans la balise meta pour la description du blog. Ainsi, si la description suivante "Un spécialiste répond à toutes vos questions sur l’énergie nucléaire" est associée au nom "Le blog de Rodney SANKINKA", on a plus de chance de ne pas être sauté par le chercheur pour aller cliquer sur le deuxième titre "Tout savoir sur l'énergie nucléaire". Encore faudrait-il dans la suite démontré une certaine expertise dans le sujet que l'on traite.

Si vous optez pour la deuxième option, vous pourrez vérifier comment votre blog est classé par rapport à un mot clé particulier se trouvant sur son url en allant sur Google et en faisant une recherche du genre : allintitle:"votre mot clé".

c. Optimiser une bannière pour les moteurs de recherche sur blogger



Normalement, le nom de votre blog se trouve encadré dans les balises H1 pour indiquer aux moteurs de recherche que c’est le titre le plus important du blog. Or, quand vous mettez une bannière, cette image ne bénéficie pas de l’encadrement de ces balises.

Pour remédier à ce problème, Amanda de Blogger Buster préconise d’ajouter le titre de votre blog entre les balises H1 dans le code de l’entête qui contient une bannière.

Pour cela, connectez-vous sur votre compte, allez sur mise en page, modifier le code Html et cochez sur « Développer des modèles de gadget ».

1. Trouvez le code css suivant (ou du même genre) juste avant la balise <b:skin> :

#header h1 {
margin:5px 20px;
padding:45px 20px .25em 10px;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}

2. Ajoutez la ligne suivante dans ce code juste avant } :

display: none;

Voici à quoi ça devrait ressembler après l’ajout :

#header h1 {
margin:5px 20px;
padding:45px 20px .25em 10px;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
display: none;
}

4. Trouver le code de l’entête de votre blog (faites CTL+F et chercher “header”)

5. Mettez le code en gras à l’endroit indiqué et remplacez “Le nom de votre blog” par le nom de votre blog

<b:if cond='data:useImage'>
<b:if cond='data:imagePlacement == "REPLACE"'>
<!-Show just the image, no text->
<div id='header-inner'>
<h1>Le Nom de votre Blog</h1><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/>

2. Les titres des articles



a. La constitution des urls



Sur Blogger, le titre de l'article est intégré dans son url (les 40 premières lettres surtout, espaces compris).

S'il s'y trouve des caractères spéciaux ou des mots avec accents, ceux-ci (les caractères et la lettre avec accent) sont automatiquement éliminés de la composition de l'url de l'article.

Ainsi, lorsque vous écrivez un article, lors de la première publication, évitez de mettre des apostrophes et autres mots avec accents. Si vous trouvez cela nécessaire de mettre un mot comportant un caractère spécial, mettez ce mot sans la lettre avec caractère. Par exemple, s'il faut que le mot "Modèle" se retrouve sur le titre de votre article, écrivez plutôt "Modele" (sans mettre d'accent sur le premier "e") lorsque vous cliquerez sur "Publier le message" pour la première fois. Comme on ne peut changer l'url d'un article après avoir publié le message, vous pourrez revenir pour en modifier le titre et mettre l'accent à l'endroit indiqué.

La différence dans la constitution de l'url sera donc la suivante si vous utilisez ou omettez l'accent :

- Si vous mettez le mot "modèle" avec accent : http://abc.blospot.com/2008/08/modle.html

Une url constituée de cette manière est très mauvaise pour les moteurs de recherche, puisqu'ils tiennent aussi compte des mots inclus dans l'url de votre blog (comme article) pour le classer sur les résultats. Ainsi, quand quelqu'un qui fait une recherche le mot "modèle", le moteur de recherche ne le trouvant pas sur votre "url" a beaucoup plus de facilité de le déclasser des premiers résultats à afficher.

- Si vous omettez l'accent du mot "modèle" : http://abc.blospot.com/2008/08/modele.html

Url très bonne pour les moteurs de recherche car vous mettez de votre côté un atout de plus (pas le seul) pour être classé parmi les premiers résultats à afficher sur une recherche du mots "modèle".

b. Composition du titre



Le titre de chaque article de votre blog doivent contenir les mots clés de ceux-ci.

Prenons que j'écrive un article sur les commentaires sur Blogger et que le mot commentaire n'apparaît même pas sur le titre de mon article, c'est une mauvaise affaire. Puisque, bien que Google trouvera certainement le mot commentaire dans le corps du texte, il peut le prendre comme un mot quelconque que j'ai utilisé en écrivant mon article. Tandis que s'il retrouve le mot commentaire et au titre de l'article et dans le corps du texte, il se dit alors que ce mot doit avoir une importance capitale dans l'article que j'ai écrit. Ceci permettra à ce que l'article soit mieux positionné sur les résultats des recherches faites pour le mot "commentaire".


Autre chose, Yony, de On en blogue, conseil de mettre un mot avec caractère spécial sur la version finale du Titre de l’article afin de forcer les moteurs de recherche à aller chercher la description de ce dernier dans le corps du texte.

3. Les sous titres dans les articles



Dans un travail scientifique ou un livre, les titres sont hiérarchisés, ayant chacun en son sein un contenu spécifique. En rapport avec le titre. Cela évite au lecteur de se perdre dans une lecture ininterrompue sans repères.

Les balises <h2></h2>, <h3></h3>, <h4></h4> etc. sont là pour accomplir la tâche ci-haut évoquée dans les sites Internet et les blogs. Ceci est très bénéfique non seulement pour les lecteurs mais aussi pour les moteurs de recherche qui sont informés de l’importance des mots se trouvant entre ces balises par rapport aux autres mots que contient l’article. Cela influencera la façon dont ils classeront vos articles sur les résultats de recherche sur un sujet donné, pouvant le classer en première position à cause du sous titre qu’il contient.


En écrivant par exemple cet article, j’ai mis les autres titres dans les balises de cette manière :

<h2>1. Le nom du blog </h2>

Contenu de la partie

<h3>a. Constitution de l’url</h3>

Contenu de la partie

<h3>b. Composition du nom </h3>

Contenu de la partie

Et ainsi de suite…

Les moteurs de recherches sont informés de la hiérarchisation de mon article et vont en tenir compte dans la composition de leurs résultats de recherche.


Conclusion

Nous venons de voir ce que l’on peut faire du nom du blog, des titres des articles et des sous titres afin d’améliorer la visibilité de son blog sur les moteurs de recherche, principale source de provenance de nombreux de nos blogs. Ce que nous venons de voir constitue la base de ce qu’il faut savoir pour commencer. Vous pouvez améliorer vos connaissances sur les sujets en consultant des livres et sites spécialisés sur le SEO.

Si vous avez une autre astuce pour améliorer la visibilité de son blog Blogger grâce au nom du blog, aux titres des articles ou aux sous titres, n’hésitez pas à nous en faire part.


Avez-vous appris quelque chose d'utile ?


Compteur d'articles et commentaires de votre blog

By // 15 commentaires:

Le voeux de Link était celui de savoir comment mettre un compteur d'articles et des commentaires du blog qui soit automatique (il est fatigué de le faire manuellement à ce qu'il paraît).

Il faut avouer que je ne savais pas trop comment faire ça jusqu'à ce que je passe sur le blog de tOiNOU, Ackorea . Là, j'avais pu remarquer au bas de la page une indication du nombre d'articles et des commentaires qu'il y a sur le blog. Je suis allé vérifier sur le code source pour voir si c'était fait manuellement ou automatiquement et Bingo ! C'est automatique. Voici pour vous le script utilisé, remplacez juste urldevotreblog par l'url de votre blog, puis mettez-le dans un widget Html/Javascript.



<script style='text/javascript'>
function showpostcount(json) {
document.write(parseInt(json.feed.openSearch$totalResults.$t,10));
}</script>
<script src='http://urldevotreblog.blogspot.com/feeds/posts/default?alt=json-in-script&callback=showpostcount'></script> articles et <script src='http://urldevotreblog.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showpostcount'></script> commentaires

SEO pour blogs Blogger

By // 5 commentaires:

Le SEO ! En avez-vous déjà entendu parler ? Si non, sachez que c’est l’acronyme anglais du mot “ Search Engine optimisation ”.

Le SEO regroupe l’ensemble des techniques permettant d’améliorer la visibilité (le classement) de son blog (ainsi que ses articles) sur les résultats des moteurs de recherche, principales sources de provenance des visiteurs pour nombreux blogs et sites de la place, dans le but très avoué d'augmenter le nombre des visiteurs et des pages vues de son site (blog).

Ne croyez surtout pas que le fait d’avoir créer un blog et d’y avoir mis du contenu attirera ipso facto des visiteurs sur votre blog et fera que celui-ci soit bien classé sur les résultats des moteurs de recherche. Il faut appliquer de la sagesse, mettre de son côté un certain nombre d’atouts et essayez diverses techniques afin que chaque élément de votre blog puisse être en votre faveur dans le classement que feront les moteurs de recherche.

Que ce soit le nom du blog, les titres et les sous titres des articles, les balises meta, le contenu écrit, les liens, les images, les vidéos, les widgets, bref, toutes les composantes de votre blog doivent être soignées afin de contribuer à la visibilité de celui-ci sur les résultats fournis par Tonton Google.

Nous allons avoir dans les jours qui viennent comment améliorer son classement sur les résultats de recherche selon les rubriques suivantes :
  1. Le nom du blog, les titres et les sous titres des articles
  2. Les balises meta
  3. Le contenu écrit
  4. Les commentaires
  5. Les liens et la navigation
  6. Les images et les vidéos
  7. Les widgets


Tous ces articles seront contenus dans notre rubrique SEO que vous pourrez venir consulter de tant en tant (pour vous rafraîchir la mémoire. Ne dit-on pas que la répétition est la mère de la science ?).

Alors, prêt à donner à votre blog un taux de visite et des pages vues digne d’un site web ?

Un ruban au coin droit de votre blog

By // 19 commentaires:

Sur le site La collection artiste de Lolotte, vous pouvez remarquer un ruban oblique au coin droit avec l'inscription "La collection artiste de Lolotte". Ce genre de barre à mon avis peut servir à beaucoup des choses, comme signaler à ses visiteurs qu'on est en vacance pendant quelque temps (mettre un message du genre "En vacance jusqu'au xxx août") et n'importe quoi que vous aimeriez annoncer à vos visiteurs sans pour autant faire un article pour ça.

J'avais demandé à la Blogmaster comme elle était parvenu à installer ce ruban et elle m'a indiqué le site Free Website Ribbon Generator où il est possible de générer le code nécessaire à l'installation de ruban sur son blog.


Sur le siteFree Website Ribbon Generator , il vous faut :

A) Mettre la phrase qui va apparaître sur le ruban
B) Mettre l'url de la page où vous voulez que le ruban dirige
C) Choisir la police ainsi que sa taille
D) Choisir la couleur de la police
E) Sélectionner un ruban parmi ceux qui sont proposés en cliquant sur le point à côté de celui que vous aimez
F) Aller cliquer sur "Generate" au bas de la page
G) Récuperer le script et aller le mettre dans son blog (juste avant la balise </head> ).

Quelqu'un est-il intéressé ?

Vos commentaires avec bulles et photos

By // 14 commentaires:

Sur mon blog, quand vous laissez un commentaire, celui-ci se retrouvera dans une bulle, un peu comme sur une Bande Dessinée. En plus, si vous avez mis une photo pour votre profil sur blogger, celle-ci s'affichera avec une flechette qui pointe vers votre nom. Au cas où blogger ne dispose d'aucune photo pour votre profil, une image de remplacement apparaîtra.


Cette fonctionnalité était disponible sur modèle Kubrick que j'ai installé sur mon blog Kanga ngaï photo. J'avais aussi voulu l'avoir sur ce blog, c'est ainsi que je suis allé voir dans son code source et ai déniché les éléments nécessaires pour arriver à cette fin.


Voici ce que j'ai fait :


1. Pour avoir de bulle encadrant mes commentaires, j'ai remplacer tout le code css des commentaires par celui-ci :


/* Comments----------------------------------------------- */


#comments { padding-top: 10px; color: #555; font-family: 'Trebuchet MS'; }
#comments h4 { margin: 0px; padding: 8px 0 0 30px; font-size: 20px; color: #555; background: url(http://www.blogblog.com/tictac/bubbles.gif) no-repeat; height: 29px !important; /* for most browsers */ height /**/:37px; /* for IE5/Win */ } #comments ul { margin-left: 0; }
#comments li { background: none; padding-left: 0; } .comment-body { background: url(http://chenkaie.googlepages.com/bg_comment.gif) no-repeat 35px 0px; padding-top:1px; }
.comment-body p { background:#d0d0d0; margin: 5px 0 0px 0; border: 6px solid #e5e5e5; line-height: 1.6em; padding: 7px 7px 7px 13px; }
.comment-body-author { background: url(http://chenkaie.googlepages.com/bg_comment.gif) no-repeat 35px 0px; padding-top:1px; }
.comment-body-author p { background:#ccdacc; margin: 5px 0 0px 0; border: 6px solid #e5e5e5; line-height: 1.6em; padding: 7px 7px 7px 13px; } .comment-author { margin: 0px 0px 0px 0px; padding: 0 10px 0 40px; color: #777; font-size: 16px; font-weight:bold; background: url(http://www.blogblog.com/tictac/comment_arrow.gif) no-repeat 20px 7px;}

.comment-footer { padding: 5px 0px 3px 30px;}
.comments-block .comment-body { background: #fff; }.comments-block .comment-footer{ margin: 0 0 0 -10px; }
.comment-title{ margin: 0 0 0 30px;}
.deleted-comment { font-style:italic; color:gray; }
.description { text-align:center; }
.commentphoto {
margin: 25px 0 0 0;
}
* html .commentphoto { /*IE only*/
margin: 30px 0 0 0;
}


.commentphoto img{
float: left;
padding: 2px;
border: 1px solid #333;
margin: -25px 10px 0px 40px;
}
* html .commentphoto img { /*IE only*/
float:right;
margin: -25px 0 0 0;
}

.commentelem {
}



2. Pour afficher les photos à côté des commentaires, j'ai ajouter les codes en bleu ci-dessous juste après le code en rouge :

]]> </b:skin>

<script src='http://chenkaie.googlepages.com/CommentPhoto.js' type='text/javascript'> </script>
<script type='text/javascript'>
// <![CDATA[
addLoadEvent(function(){showCommentPhotos('commentphoto','commentelem',1,'commentelem','http://chenkaie.blogspot.com',
'black','gray');});
//]]>
</script>

3. Pour que ces modifications s'affichent sur les pages avec commentaires, j'ai recherché le bloc de code commençant par :

<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>

Et se terminant par :

<div id='backlinks-container'>
<div expr:id='data:widget.instanceId + "_backlinks-container"'>
<b:if cond='data:post.showBacklinks'>
<b:include data='post' name='backlinks'/>
</b:if>
</div>
</div>
</div>
</b:includable>

4. J'ai sélectionné tout le bloc ci-haut et l'ai remplacé par celui-ci :

<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments == 1'>
1 <data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>
</h4>

<dl id='comments-block '>
<b:loop values='data:post.comments' var='comment'>
<div class='commentphoto'/>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<div class='commentelem'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>

<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<br/><data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</div>
</dt>
<!-- kaie added for comment-body-author highlight begenning1-->
<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<b:else/>
<!-- kaie added for comment-body-author highlight ending1-->
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
</b:if> <!-- kaie added for comment-body-author highlight -->
<dd class='comment-footer'>
</dd>
</b:loop>
</dl>

<p class='comment-footer'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</p>
</b:if>

<div id='backlinks-container'>
<div expr:id='data:widget.instanceId + "_backlinks-container"'>
<b:if cond='data:post.showBacklinks'>
<b:include data='post' name='backlinks'/>
</b:if>
</div>
</div>
</div>
</b:includable>

NB : Si vous aviez installé le formulaire pour les commentaires à la fin des articles, il faudra le réinstaller après l'opération.

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.


@ Blogger au bout du doigt. Fourni par Blogger.

SEO & REFERENCEMENT