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

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.

5 Commentaires

Laisser un commentaire

  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

Enregistrer un commentaire

Laisser un commentaire

Plus récente Plus ancienne