Le gadget Message populaire est le meilleur Widget de Blogger (à mon avis) et permet de visionner les articles les lues de votre blog Blogger mais on peut aller plus loin avec cette nouvelle astuces Blogger ou plutôt un nouveaux design du Widget Blogger :

Quelques explications pour l'afficher sur votre blog en version horizontal.

Vous pouvez voir la démo de lien ci-dessous

Le gadget Message populaire est le meilleur de Blogger (à mon avis).  Quelques explications pour l'afficher sur votre blog en version horizontal.

Ce script très facile à installer, il suffit de mettre le script pour le nouveau gadget HTML

Connectez-vous au tableau de bord Blogger et accédez à la conception - Éléments de la page
Cliquez sur "Ajouter un gadget" et choisissez "Messages populaire" ( Si vous avez déjà ce gadget sauter cette étape )

Après vous avez Gadget Message populaire "Ajouter un gadget" et sélectionnez "HTML / Javascript"

Le gadget Message populaire est le meilleur de Blogger (à mon avis).  Quelques explications pour l'afficher sur votre blog en version horizontal.

copier le script ci-dessous dans le nouveaux gadget "HTML / Javascript Gadget"

Si vous avez déjà jQuery dans votre modèle s'il vous plaît supprimer le script

Fait-votre message populaire maintenant avec animation

<style>

#slider ol,#slider ul,#slider li
{
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
}

.popular-posts img {
margin: 0 !important;
padding:0 !important;
width:150px;
height:120px;
}

ol, ul {
list-style: none;
}

.wrapper {
width: 720px;
margin: 0 auto;
position:relative;
}

.clear {
clear: both;
}

.display-none {
display:none;
}

#slider {
position: relative;
top: -2px;
z-index: 1;
}

#slider .prev {
position: absolute;
width: 21px;
height: 21px;
display: block;
background: url(http://i575.photobucket.com/albums/ss197/akhmadaminullah/arleft.png) no-repeat center center;
top: 150px;
left: -51px;
}

#slider .next {
position: absolute;
width: 21px;
height: 21px;
display: block;
background: url(http://i575.photobucket.com/albums/ss197/akhmadaminullah/arright.png) no-repeat center center;
top: 150px;
right: -51px;
}

#slider #slider-wrapper {
width: 720px;
height: 300px;
padding-top: 40px;
overflow: hidden;
z-index: 999;
position: relative;
}

#slider #slider-inner {
width:9780px;
height:300px;
position:absolute;
}

#slider .article {
width: 150px;
height: 300px;
float: left;
margin-right: 30px;
}

#slider .article img {
margin-bottom: 25px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, .15);
-moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, .15);
-webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, .15);
}

#slider .article h2 {
margin-bottom: 15px;
line-height: 18px;
}

#slider .article h2 a {
font-size: 18px;
color: #404040;
font-weight: bold;
text-shadow: 0 1px 0 #fff;
line-height: 23px;
}

#slider .article .meta-comments a {
font-size: 10px;
font-weight: bold;
text-transform: uppercase;
text-shadow: 0 1px 0 #fff;
}

#slider .article .item-snippet {
margin-left: 15px;
}

#slider .widget-item-control { display: none}

</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="http://accordion-for-blogger.googlecode.com/svn/trunk/gridslidepopularpost.js"></script>

Vous avez plus qu'à enregistrer.

6 commentaires:

  1. Dommage cela ne fonctionne pas chez moi =(

    RépondreSupprimer
  2. @Cro"K"Mou : dsl je pense que c'est le code je viens de le rectifier

    RépondreSupprimer
  3. Je ne sais pas pourquoi mais ca marche pas... :(

    RépondreSupprimer
  4. Salut, super ça fonctionne bien mais je voudrais le centrer sur ma page. Comment faire ? Voici ce que ça donne actuellement (tout en bas de page) : http://riffonstage.blogspot.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