Comment ajouter Related Posts Widget Pour Blogger avec Thumbnails

Maintenant, voici une super astuce pour afficher les messages connexes sous chacun de vos messages de blog, avec des vignettes. Les articles relatifs sont choisis parmi les autres postes dans cette même catégorie / label / tag. Avec cette widget beaucoup de vos lecteurs resteront sur votre site pour de plus longues périodes quand ils voient les messages d'intérêt connexes.

Étapes ajoutant la Related Posts Widget pour Blogger / Blogspot

Étape 1: Aller vers Modèle ==> Modifier HTML

Étape 2 : Chercher </head> utilisant CTRL+F

Etape 3: Copier and coller le code suivant avant </head>

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts{float:left;width:auto;}
#related-posts a{border-right: 1px dotted #eaeaea;}
#related-posts a:hover{background: #f2f2f2;}
#related-posts h2{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;}
#related-posts .related_img {margin:5px;border:4px solid #f2f2f2;width:100px;height:100px;transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out;}
#related-title {color:#222;text-align:center;padding: 0 10px;font-size:14px Oswald; line-height:16px;text-shadow:0 2px 2px #fff;height:28px;width:100px;}
#related-posts .related_img:hover{border:4px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style>
<script type='text/javascript' src='http://helplogger.googlecode.com/svn/trunk/relatedposts.js' />
</b:if>

Étape 3: Chercher <div class='post-footer'> et ensuite copier /coller le code suivant après

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=5"' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=5;
var relatedpoststitle="<b>Related Posts:</b>";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div>
<div class='clear'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://helplogger.blogspot.com'><img alt='Blogger Tricks' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxqKFnwjLvt_fmJv7Gbnd7c99uUq6kGkDWRZMiJecveVhUbPpqd25Sy59ROO8BuNJIf92KhCgEumib_MB5tRscG2YTKZYOc1Pa6rj9j6SdJbaTBcBnZIdev4bHZwC_2SfsZXU3KBjlt7rB/s1600/best+blogger+tips.png'/></a>
</b:if></b:if>

changer la valeur de 5 max-results = 5 avec le nombre de messages que vous souhaitez afficher

Étape 4: Enregistre votre template

Comment ajouter Related Posts Widget Pour Blogger avec Thumbnails

Enregistrer un commentaire

Popular Posts