Widget accordéon d'articles avec vignettes

Aujourd'hui j'aimerais vous présenter un widget en forme d'accordéon présent sur mon blog "Blogger Mastering", et qui me permet d'afficher les Blogger templates que j'ai (et aurais) publié.

La spécificité de ce widget est que quand l'on débarque sur la page, seul le dernier article est affiché avec une vignette accompagné d'un petit résumé (le premier paragraphe). Les restes des articles sont réduit à leur simple titre. Pour les afficher, il suffit de cliquer sur la petite flechètte au coin droit du titre du post.  Le lecteur dispose également de la possibilité de referme tout cet accordéon afin d'afficher seulement les titres des articles.

Deux conditions sont à remplir pour que ce widget affichant un accordeon d'articles d'une certaine catégorie puisse fonctionner : il faut que vous diffusiez un flux complet de votre blog et comme vous l'aurez déviné, seul un libellé sera pris en compte. Vu que les libellés font office de catégories sur blogger, le libellé qui sera utilisé sera celui d'une catégorie dont vous voulez spécialement faire la publicité.

Voici les étapes à suivre avoir ce widget sur votre blog :

1. Connectez-vous à votre compte Blogger. Allez sur "Mise en page", puis sur "Modifier le code html".
2. Mettez le code css suivant juste avant la balise ]]></b:skin>

.accordion {
float:left;
width: 260px;
border-bottom: solid 1px #c4c4c4;
}
.accordion h4 {
background: #e9e7e7 url(http://www.webdesignerwall.com/demo/jquery/images/arrow-square.gif) no-repeat right -51px;
padding: 7px 15px;
margin:0;
font: bold 120%/100% Arial, Helvetica, sans-serif;
border-top: solid 1px #c4c4c4;
border-bottom: none;
cursor: pointer;
}
.accordion h4:hover {
background-color: #e3e2e2;
}
.accordion h4.active {
background-position: right 5px;
}
.accordion p {
background: #f7f7f7;
margin: 0;
padding: 10px 15px 20px;

}


3. Mettez les scripts ci-après juste avant la balise </head>

<script src='http://contact.dinhquanghuy.googlepages.com/jquery.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){

$(&quot;.accordion h4:first&quot;).addClass(&quot;active&quot;);
$(&quot;.accordion p:not(:first)&quot;).hide();

$(&quot;.accordion h4&quot;).click(function(){
$(this).next(&quot;p&quot;).slideToggle(&quot;slow&quot;)
.siblings(&quot;p:visible&quot;).slideUp(&quot;slow&quot;);
$(this).toggleClass(&quot;active&quot;);
$(this).siblings(&quot;h4&quot;).removeClass(&quot;active&quot;);
});

});
</script>

Enregistrez votre modèle.

4. Rendez-vous sur "Mise en page" et ajoutez un nouveau widget html dans lequel vous mettrez ce code (remplacez-y les éléments en gras par les informations correctes) :

<script language='javascript'>
                                 imgr = new Array();
                                 imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";
                                 showRandomImg = true;
                                 jimgwidth = 220;
                                 jimgheight = 120;
                                 jfntsize = 12;
                                 jacolor = "#E67C15";
                                 jaBold = true;
                                 jtext = "Comments";
                                 jshowPostDate = true;
                                 sumtitle = 25;
                                 jsummaryPost = 200;
                                 summaryFontsize = 12;
                                 summaryColor = "#000";
                                 numposts = 6;
                                 label = "Votre libellé";
                                 home_page = "http://votreblog.blogspot.com/";
                             </script>
<div class='accordion'>
<script src='http://simplexdesign.googlecode.com/files/j-label-fix.js' type='text/javascript'></script>

</div>

Enregistrez votre widget et allez admirer le résultat. Vous verrez désormais un widdget accordéon d'articles avec vignettes sur votre blog. Sympa, non ?

@+