Comment INSTALLER Articles Similaire Avec Image Pour BLOGGER

Comment afficher les liens vers les messages liés au libellés avec une image miniature. Le mode d'emploi pour vous aider à augmenter les pages vues / des visiteurs.

Les visiteurs seront tentés d'aller voir les articles liés quand ils sont présentés joliment avec des vignettes.

C'est une première version de Linkwithin qui utilise aussi les vignettes similiaires pour chaque articles.

Pour l'affichage des vignettes, ce gadget va utiliser les images téléchargées pour l'article en utilisant l'uploader image blogger.

Gadget articles similaires avec des vignettes pour Blogger :

Voici les étapes détaillées pour installer le gadget pour blogger des messages liés avec des vignettes.

1. Connectez-vous à votre tableau de bord Blogger et accédez à Mise en page> Modifier le code HTML et de cocher la case "Développer les modèles de gadget"

2. Maintenant chercher

</head>

et le remplacer par

<!--Articles similaires
avec Thumbnails thumbnails Scripts et
Styles Debut-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2CS88r4KahWyjyfIdZtnqehiTGkexLiCgd9cykX361RZFj0lp1jr9H7LktNOq-JuEVO4jWEWSD7S8umkJiQxBAQ91RlwhYZbLeqKwKCgLqsBjMbBGKIhXo1hLBZmjmcnQuano58rdsFg/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Articles similaires";
</script>
<script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Articles similaires avec Thumbnails Scripts et Styles fin-->
</head>

3.Maintenant Trouver le code suivant

<div class='post-footer-line post-footer-line-1'>

Si vous ne pouvez pas le trouver, alors essayer de trouver celui-ci :

<p class='post-footer-line post-footer-line-1'>

Maintenant, immédiatement après l'une de ces lignes (selon ce que vous pourrez trouver) place ce bout de code :

<!-- Articles similaires avec Thumbnails Code Depart-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://lebloggers.blogspot.com/2010/10/articles-similaire-avec-image-pour.html'><img style="border: 0" alt="Articles similaires Gadget pour Blogger avec Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='http://bloggertemplates.bloggerplugins.org/' ><img style="border: 0" alt="Blogger Templates" src="http://image.bloggerplugins.org/blogger-templates.png" /></a>
</b:if></b:if>
<!-- Articles similaires avec Thumbnails Code Fin-->

4.Vous pouvez ajuster le nombre maximum de postes liés à l'affichage en modifiant cette ligne dans le code.

var maxresults=5;

5.Pour modifier le titre du widget, vous pouvez modifier cette ligne de code

var relatedpoststitle="Articles Similaires";

6.Pour changer la vignette par défaut (Message sans image), vous pouvez modifier cette ligne de code

var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2CS88r4KahWyjyfIdZtnqehiTGkexLiCgd9cykX361RZFj0lp1jr9H7LktNOq-JuEVO4jWEWSD7S8umkJiQxBAQ91RlwhYZbLeqKwKCgLqsBjMbBGKIhXo1hLBZmjmcnQuano58rdsFg/s400/noimage.png";

7.Pour changer la couleur de la ligne Splitter, modifier

var splittercolor="#d4eaf2";

Pour modifier les couleurs et tous les autres, vous devrez modifier le CSS. Si vous tombez dans l'application du présent troubles, ne paniquez pas ...

Suffit de me laisser un commentaire ici et je vais vous aider. Si vous voulez me donner des suggestions sur la façon d'améliorer ce widget, il serait vraiment bien.

Comment afficher les messages relatifs à chaque page et non seulement sur les pages de messages?
Il suffit de retirer les deux lignes commençant par à la fois l'étape 3 et l'étape 2.

Qui est dans ces lignes

<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>

et

<!-- remove --></b:if>