Widget Gadget Message populaire horizontal

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

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"

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.