Ce widget affiche les messages ajoutées récamment  automatiquement sur blogger. Il montrant les messages sous forme de curseur.  
Ajouter les derniers messages avec image en slider animée


Si vous n'avez pas plus d'un blog , vous pouvez utiliser ce widget pour votre propre blog.  

Il peut vous aider à avoir le taux de rebond moins avec plus de pages vues . 

Ce widget blogger poste les articles récente automatiquement lorsque vous avez posté sur vos blogs .
Alors je vous explique comment ajouter le gadget des messages avec curseur (widget sidebar) de blogueur blog.

Étapes pour ajouter ce widget à Blogger

  • Connectez-vous à votre compte Blogger
  • Aller au tableau de bord et passer à la section Mise en page
  • Cliquez sur Ajouter un lien gadget et sélectionnez l'option HTML / JavaScript

<style scoped="" type="text/css">
/*trickstoo modified widget of abt slider widget*/
ul.abt-sidebar-slider *{
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
ul.abt-sidebar-slider{
font:normal normal 11px embria
}
ul.abt-sidebar-slider,ul.abt-sidebar-slider li{
margin:0;
padding:0;
list-style:none;
position:relative
}
ul.abt-sidebar-slider{
width:100%;
height:500px
}
ul.abt-sidebar-slider li{
height:24.5%;
position:absolute;
padding:0;
width:49.5%;
float:left;
overflow:hidden;
display:none
}
ul.abt-sidebar-slider li:nth-child(1),ul.abt-sidebar-slider li:nth-child(2),ul.abt-sidebar-slider li:nth-child(3),ul.abt-sidebar-slider li:nth-child(4){
display:block
}
ul.abt-sidebar-slider img{
border:0;
width:100%;
height:100%} ul.abt-sidebar-slider li:nth-child(1){width:100%;
height:49.5%;
margin:0 0 2px;
left:0;top:0
}
ul.abt-sidebar-slider li:nth-child(2){left:0;top:50%}
ul.abt-sidebar-slider li:nth-child(3){left:50.5%;top:50%}
ul.abt-sidebar-slider li:nth-child(4){width:100%;left:0;top:75%}
ul.abt-sidebar-slider .overlayx,ul.abt-sidebar-slider li{
-webkit-transition:all .4s ease-in-out;
-moz-transition:all .4s ease-in-out;
-o-transition:all .4s ease-in-out;
-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out
}
ul.abt-sidebar-slider .overlayx{
width:100%;
height:100%;
position:absolute;
z-index:2;
left:0;
top:0;
background-image:url(http://1.bp.blogspot.com/-FtnGJHMcWH8/UIV3IE-aaJI/AAAAAAAAGHs/WvLypnWxg5A/s1600/linebg-fade.png);
background-position:50% 50%;
background-repeat:repeat-x
}
ul.abt-sidebar-slider .overlayx,ul.abt-sidebar-slider img{
border:4px solid black;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px
}
ul.abt-sidebar-slider li:nth-child(1) .overlayx{
background-position:50% 25%
}
ul.abt-sidebar-slider .overlayx:hover{
-ms-filter:"progid:DXImageTransform.Microsoft. Alpha(Opacity=10)";
filter:alpha(opacity=10);-khtml-opacity:0.1;
-moz-opacity:0.1;opacity:0.1
}
ul.abt-sidebar-slider h4{
position:absolute;
bottom:30px;
z-index:2;
color:white;
margin:0;
width:100%;
padding:0 10px;
line-height:1.5em;
font:embria;
font-weight:normal
}
ul.abt-sidebar-slider li:nth-child(1) h4,ul.abt-sidebar-slider li:nth-child(4) h4{
font-size:150%
}
ul.abt-sidebar-slider .label_text{
position:absolute;
bottom:10px;
left:10px;
z-index:2;
color:white;
font-size:90%}
ul.abt-sidebar-slider li:nth-child(2) .autname,ul.abt-sidebar-slider li:nth-child(3) .autname{
display:none
}
.buttons{
margin:5px 0 0
}
.buttons a{
display:inline-block;
text-indent:-9999px;
width:15px;
height:25px;
position:relative
}
.buttons a::before{
content:"";
width:0;
height:0;
border-width:8px 7px;
border-style:solid;
border-color:transparent #535353 transparent transparent;
position:absolute;
top:50%;
margin-top:-8px;margin-left:-10px;
left:50%
}
.buttons a.nextx::before{
border-color:transparent transparent transparent #535353;
margin-left:-3px
}
</style>
<div id="featuredpostside"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="https://trickstoo-slider-recent-posts.googlecode.com/svn/trickstoo-slider.js" type="text/javascript"></script>
<script type='text/javascript'>
//<![CDATA[
FeaturedPostSide({
blogURL:"http://www.leblogger.fr",
MaxPost:8,
idcontaint:"#featuredpostside",
ImageSize:300,
interval:6000,
autoplay:true,
tagName:false
});
//]]>
</script> <small><a href="http://www.leblogger.fr/2014/03/ajouter-les-derniers-messages-avec.html" target="_blank">Obtenir ce gadget</a></small>

Point Importante :

Avant d'enregistrer ce widget, vous devez faire quelques changements de la manière suivante.

  • Remplacer http://www.leblogger.fr avec l'URL de votre blog.
  • Vous pouvez modifier l'intervalle de temps par le remplacement de 6000. Il est en mille de secondes.
  • Vous pouvez arrêter la lecture automatique en remplaçant "autoplay: true" par "autoplay: false"

Voilà tout. Vous avez terminé!

Enfin, cliquez sur Enregistrer sur le bouton.

2 commentaires:

  1. Bonjour... très bien se gadget... mais les images... comment faire pour les mettre de bonne taille...
    Voici mon blog... http://journal100limites.blogspot.ca/

    RépondreSupprimer
  2. Salut!
    Tout d'abord, merci pour ce gadget qui est tout simplement GENIAL! Cela faisait un moment que je cherchait un gadget permettant de montrer mes articles sous forme d'images et je n'en trouvais pas...
    sinon, j'ai une autre question sur une fonctionnalité que je n'arrive pas à trouver : je souhaiterais que lorsqu'on clique sur mes catégories, mes articles s'affichent en petites vignettes avec une courte description comme on peut le voir sur certains blog wordpress. Jusque là, je n'ai reussi qu'a les afficher sous forme de liste avec une image un peu floue avec un code trouvé sur bloggercode... une aide serait très grandement apréciée! :D
    en tout cas très bonne continuation!!
    => exemple ici : http://www.lagaleriemilla.fr/

    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