Gadget article recommandé en slide pour Blogger

Vous connaissez le gadget pour articles similaires à la fin des articles, grace au libellés.

Maintenat je vous propose ici un autre gadget qui peut faire qu'un visiteur puisse lire plus d'un article sur votre blog.

C'est un slide out, trouvé chez Blogger Pluggins, qui affichera un article recommandé au lecteur au coin droit du bas des pages d'articles de votre blog.

Si vous êtes prêt à avoir ce gadget "article recommandé" sur votre blog, voici les étapes à suivre pour cela :

1. Connectez vous à votre compte blogger, cliquez sur “Modèle” pour le blog où vous allez ajouter la fonctionnalité. Sur la page qui va s’afficher, cliquez sur “Modifier le code html” puis sur “Traiter”. Cochez ensuite sur “Développer les modèles de Gadgets”.

2. Trouvez la balise :

]]></b:skin>

3. Ajoutez ce code css juste avant la balise ci-haut :

#bpslidein{z-index:5;width:400px;height:100px;padding:10px;background-color:#fff;border-top:3px solid #1616F5;position:fixed;right:-430px;bottom:0;-moz-box-shadow:-2px 0 5px #aaa;-webkit-box-shadow:-2px 0 5px #aaa;box-shadow:-2px 0 5px #aaa;font-family:Arial, Helvetica, sans-serif;}
#bpslidein p{font-size:11px;text-transform:uppercase;font-family:Arial,Helvetica,sans-serif;letter-spacing:1px;color:#555;}
#bpslidein_title{color:#555;font-weight:700;font-size:16px;margin:10px 20px 10px 0;}
#bpslidein a,#bpslidein a:hover,#bpslidein_title{text-decoration:none;color:#1616F5;}
#bpslidein .close,#bpslidein .expand,#bpslidein .help{border:2px solid #EEE;cursor:pointer;color:#9A9AA1;width:13px;height:15px;padding:2px 0 0 5px;position:absolute;right:10px;font-size:17px;font-weight:700;font-family:Arial, Helvetica, sans-serif;font-size:12px;}
#bpslidein .help{right:35px;}
#bpslidein_title,#bpslidein_image{float:left;width:80px;}
#bpslidein_title{width:290px;}

4. Trouvez l'un des bouts de code ci-après :

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

 ou

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

 ou encore

<data:post.body/>

5. Juste avant l'un d'eux (seulement l'un d'eux), mettez le code suivant :

<b:if cond='data:blog.pageType == "item"'>
<div style='display:none' id='bpslidein_place_holder'></div>
</b:if>

6. Enregistrez votre modèle.

7. Allez sur "Mise en page" et cliquez sur "Ajouter un gadget". Cliquez ensuite sur le "+" à côté "HTML/Javascript" et collez le code suivant dans la grande case de la pop-up qui va s'afficher, puis cliquez enfin sur "Enregistrer". Je vous recommanderez de ne pas donner de titre à ce gadget.

<div id="bpslidein" style="display:none;"> <div class="help">?</div><div class="expand">+</div> <div class="close">X</div> <p>Article recommandé</p> <div id="bpslidein_image"></div> <div  id="bpslidein_title">Loading..</div> </div> <script> if(document.location.href.split("/").length==6&&document.location.href.indexOf(".html")!=-1){if(typeof bp_onload_queue=='undefined')var bp_onload_queue=[];if(typeof bp_dom_loaded=='boolean')bp_dom_loaded=false;else var bp_dom_loaded=false;if(typeof bp_async_loader!='function'){function bp_async_loader(src,callback,id){var script=document.createElement('script');script.type="text/javascript";script.async=true;script.src=src;script.id=id;var previous_script=document.getElementById(id);if(previous_script)if(previous_script.readyState=="loaded"||previous_script.readyState=="complete"){callback();return}else{script=previous_script}if(script.onload!=null)previous_callback=script.onload;script.onload=script.onreadystatechange=function(){var newcallback;if(previous_script&&previous_callback)newcallback=function(){previous_callback();callback()};else newcallback=callback;if(bp_dom_loaded){newcallback()}else bp_onload_queue.push(newcallback);script.onload=null;script.onreadystatechange=null};var head=document.getElementsByTagName('head')[0];if(!previous_script)head.appendChild(script)}}if(typeof bp_domLoaded!='function')function bp_domLoaded(callback){bp_dom_loaded=true;var len=bp_onload_queue.length;for(var i=0;i<len;i++){bp_onload_queue[i]()}}bp_domLoaded();bp_async_loader("http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js",function(){bp_async_loader("http://gadget-article-recommandes.googlecode.com/files/bp-out-slide.min.js",function(){},"bp-out-slide")},"jQueryjs")} </script> 

Maintenant, vous aussi avez donc la possibilité d'afficher un slide out "Article recommandé" grâce à ce gadget sur votre blog hébergé par Blogger.