Gadget article recommandé (slide out) pour Blogger

By
Advertisement

Nous avons déjà proposé dans ce blog quelques gadgets qui permettent de garder les visiteurs un peu plus longtemps sur son blog. Je pense notamment au gadget pour articles similaires à la fin des articles, le gadget pour articles récents avec images et commentaires, etc.

J'aimerais vous proposer 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.

Gadget article recommandé (slide out) pour les blogs hébergés par Blogger (blogspot)


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 suivante:


]]></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é <a href="http://blogger-au-bout-du-doigt.blogspot.com">Blogger</a></p> <div id="bpslidein_image"></div> <div  id="bpslidein_title">Chargement..</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> 

Vous pouvez admirer le résultat obtenu en vous rendant sur une page d'article.

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.

@+


17 commentaires:

  1. Pas mal !
    Une ptite question :

    Et si je veux mettre ce slide plutôt en bas de la page d'accueil ?
    C'est possible ?
    Et penses-tu que c'est bien ?

    Merci

    http://infostuces.blogspot.com

    RépondreSupprimer
    Réponses
    1. Bon, je crois que c'est possible si tu enlève la première et la troisième ligne du code de l'étape 5.

      Supprimer
  2. Salut Rodney,
    j'ai essayé d'emlever les lignes 1 et 3 de l'étape 5, mais cela ne marche pas.

    T'as une autre idée ?

    Merci

    RépondreSupprimer
  3. Bonjour, j'ai installé ce gadget (merci beaucoup pour le tuto !)
    Est-il possible de remplacer les couleurs en changeant le code, pour remplacer ce bleu qui va moyennement avec le reste de mon blog ?

    RépondreSupprimer
  4. comment choisir l'article recommande ?

    RépondreSupprimer
  5. Désole de revenir à la charge....mais j'aimerais vraiment pouvoir choisir le message qui va apparaitre au lieu d'un choix aléatoire.

    il est évident que c'est possible....mais mes connaissance ne me permettent pas de modifier le code si quelqu’un peut m'aider

    merci d'avance

    RépondreSupprimer
  6. En fait j'ai déjà essayé, en modifiant la couleur et la police, en réinstallant le truc, ça reste bleu, incroyable quoi .. Et en plus je l'ai vu en rose et en rouge sur hellocoton et un autre site, j'ai du me planter quelque part c'est pas possible :/

    Merci pour votre aide quand même !

    RépondreSupprimer
  7. comment faire pour changer la couleur du titre de mon blog:http://proverbeafricain.blogspot.com/.
    merci pour tes conseils.

    RépondreSupprimer
  8. Je ne sais pas si quelqu'un pourra m'aider, mais moi je ne trouve aucunes des 3 lignes de l'étape 4... :-(

    RépondreSupprimer
  9. Bonjour Chef Dinou,

    Pour avoir l'un des 3 lignes tu n'as qu'a cocher "Développer des modèles de gadgets" tout en bas de : Modèle › Modifier le code HTML

    soyez les Bienvenu dans mon blog : http://regimeetsante.blogspot.com (100% régime et nature).

    RépondreSupprimer
  10. merci pour tes conseils et du courage pour la suite.

    RépondreSupprimer
  11. Les gars, moi sa marche pas du tout sa fait rien du tout !!

    RépondreSupprimer
  12. Je me suis trompée au début car je l'ai mal placé mais maintenant que j'ai corrigé,ça fonctionne. Le résultat est formidable. Merci encore pour les gadgets.

    RépondreSupprimer
  13. Super ton blog. je le consulte régulièrement pour améliorer mon blog www.senegal-logistique.net. JE SALUE LE TRAVAIL COLOSSAL QUE TU ABAS POUR NOUS AUTRES. Seulement j'ai également découvert que tu mets discrètement un lien qui renvoie vers ton blog dans les codes que tu nous proposes. Ce n'est pas méchant, rassure toi. Rien de grave, vraiment. Je trouve jusque que c'est plutôt malin. Je ne m'y connais pas très bien en codage mais j'ai quand même réussi à effacer le lien dans mon site. Pour ceux qui souhaitent faire de même, vous pouvez aller dans HTML/Javascript où vous aviez copié le dernier code et chercher le bout de code Blogger. Vous pouvez vous servir de Ctrl+F. Une fois trouvé vous pouvez l'effacer si vous voulez. C'est dire que rien n'est gratuit en faite. On nous propose d'ajouter des codes gratuitement dans nos sites mais il y a toujours une contre partie. Visible ou cachée.

    RépondreSupprimer
    Réponses
    1. Sénégal Logistique : le bout de code qu'il faut enlever c'est celui commençant par la balise par a href ... avec le l'url du site et qui se termine par Blogger et la balise a fermée.

      Supprimer
  14. Bonjour,
    Merci pour tous ces codes que vous nous donnez.
    J'ai essayé celui-ci sur mon blog : http://www.erhabenmaya.com, j'ai bien suivi ce que vous avez dit, mais la pop up n'affiche que l'imagette, sans aucun libellé, en plus l'imagette n'a aucun lien.
    Dommage car c'était bien sympa. Je ne sais pas pourquoi ça ne fonctionne pas dans mon blog.
    Bonne soirée.
    Cordialement.

    RépondreSupprimer

Salut Cher Lecteur.

Bien que les commentaires ne sont pas modérés en amont, ne perdez pas votre temps à mettre des commentaires sans aucun lien avec l'article. Ils seront effacés.

Ne venez surtout pas mettre des commentaires bidons pour promouvoir les sciences occultes ici (voyance, magie, etc.), vérifiez le blog, aucun commentaire de ce genre n'a résisté à la gomme de l'administrateur.

Bon, ceci étant dit, puissiez-vous respecter les lois de votre pays, les lois universelles ainsi que le bon sens en postant votre commentaire sur ce blog.

Remarque : Seul un membre de ce blog est autorisé à enregistrer un commentaire.

@ Blogger au bout du doigt. Fourni par Blogger.

SEO & REFERENCEMENT