Ajouter articles similaires à blogger

Libellés : Widgets Blogger

Publié par Othmane BENTALEB à 15:36

Bismillah. Bienvenue sur Outils Blogger http://www.outils-blogger.blogspot.com/ : Outils, Astuces, Widgets, Modèles, Adsense, Seo-Référencement.

Cette fois, on va savoir comment ajouter widget 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.

Outils Blogger http://www.outils-blogger.blogspot.com/ : Outils, Astuces, Widgets, Modèles, Adsense, Seo-Référencement.

Outils Blogger http://www.outils-blogger.blogspot.com/ : Outils, Astuces, Widgets, Modèles, Adsense, Seo-Référencement.

Connectez-vous à votre tableau de bord Blogger et accédez à

Présentation    --->    Modifier le code HTML   --->   Développer des modèles de gadgets

 Maintenant chercher le code :  </head> et remplacer le par le code suivant :

<!--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/AVvXsEjMEgtfZgq9-d4HuIdm_hC8cfRcl340UUtB7Dm1wNor9lrUq5qtl24XoMgwz-2Gvc6LbCqB8DIF3FZX_HOKdL2kD8Ehvb5x1KgBFiKya9cZUOF-9qSgUGqJYMXR_59GZOkm6CltNnjQVYw/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Articles similaires";
</script>
<script src='https://sites.google.com/site/outilsblogger/articles-similaires/Articlessimilaires.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Articles similaires avec Thumbnails Scripts et Styles fin-->
</head>

Maintenant chercher le code suivant :

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

Si vous ne trouverez pas, essayer de trouver celui-ci :

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

Maintenant, placez le code suivant juste après l'un de ces codes (selon ce que vous avez trouvé) :

 <!-- 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://outils-blogger.blogspot.com/2011/05/ajouter-articles-similaires-blogger.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-->

Vous pouvez ajuster le nombre maximum de postes liés en modifiant le code :   var maxresults=5;

Pour modifier le titre du widget, vous devez modifier le code : var relatedpoststitle="Articles Similaires";

Pour changer la vignette par défaut pour les messages sans image, vous pouvez modifier le lien en bleu dans ce code

var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMEgtfZgq9-d4HuIdm_hC8cfRcl340UUtB7Dm1wNor9lrUq5qtl24XoMgwz-2Gvc6LbCqB8DIF3FZX_HOKdL2kD8Ehvb5x1KgBFiKya9cZUOF-9qSgUGqJYMXR_59GZOkm6CltNnjQVYw/s400/noimage.png";
 

Outils Blogger http://www.outils-blogger.blogspot.com/ : Outils, Astuces, Widgets, Modèles, Adsense, Seo-Référencement.