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="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/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="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/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>

6 commentaires:

  1. ~x( y'a Po de changement !!! ca marche po :-/

    RépondreSupprimer
  2. Bonjour

    je suis désolée mais je n'arrive pas installer cette fonction
    dans mon code html j'ai 2 fois la ligne div class='post-footer-line post-footer-line-1' à laquelle faut il mettre le code?
    J'ai essayé sur les 2 lignes mais quand je fais aperçu il n'y a rien
    voici mon blog : http://rosebookinaupaysdeslivres.blogspot.fr/

    merci d'avance

    RépondreSupprimer
  3. Bonjour,

    Moi non plus ça ne marche pas. Rien ne se produit.

    (Et si j'peux me permettre on écrit "article qui peut vous intéresser" et non pas "intéressé".

    RépondreSupprimer
  4. Ce commentaire a été supprimé par l'auteur.

    RépondreSupprimer
  5. Ce commentaire a été supprimé par l'auteur.

    RépondreSupprimer

Laisser un commentaire

💯 Meilleurs Articles sur LeBlogger.fr : Astuces Blogger et Blogspot

 
LeBlogger.fr - Astuces Blogger et Blogspot © 2013. Tous Droits Reservés. Produit Par Biz-Media

Le site le plus complet d'aide aux créateurs de blogs avec Blogger. Tutoriels, conseils et astuces.
LeBlogger est une plateforme d'actualité. C'est un service qui offre l'actualité Web, Astuces iPhone et astuces Facebook et des milliers de couverture pour vos page Facebook.
Services gratuits pour webmasters , des widgets pour votre site ou blog, pour mieux capter l'attention de vos visiteurs.
Top