Accueil         Contactez-Nous    Sitemap  

 

Important : Exporter le blog ou Télécharger le modèle avant d'appliquer le moindre changement dans le code HTML de son blog.

 

Ajouter articles similaires à blogger

Libellés :
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="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='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="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";
 
Outils Blogger http://www.outils-blogger.blogspot.com/ : Outils, Astuces, Widgets, Modèles, Adsense, Seo-Référencement.

8 commentaires:

strychnine a dit…

Merci, il marche très bien ce widget :)

Tambour Major a dit…

Enfin un widget efficace ! Merci !

G.E.R.A.R a dit…

Bonjour,
Je cherche vainement ce type de widget mais sans les images, est-ce possible et comment faire??
Merci d'avance pour votre réponse.

Bibulle NailArt a dit…

Bonjour, j'aimerais beaucoup utiliser ce widget mais je ne trouve pas la ligne post-footer, ni l'une ni l'autre de celles proposées dans mon code HTML.... Auriez vous une idée de ce que je peux faire? merci!

Les Astuces de Margaux a dit…

Je ne le trouve pas non plus!

FERGANI khaled a dit…
Ce commentaire a été supprimé par l'auteur.
Cherry a dit…

Il faut taper ctrl+f pour chercher ces codes (enfin c'est comme ça que je procède !)

Mustapha labyedh a dit…

Salu outils-blogger les code enregistré tré bien son erreur mes affichage des Articles Similaires ça marche pas ?

Laisser un commentaire

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Visiteurs

free counters