Accordion widget for featured posts with thumbnails

Rodney | 06:37 | 5 commentaires





In SimplexPro template design by Simplex desing there’s an accordion widget which show featured posts with thumbnails. This widget help you to publicize posts of a important label of your blog.



accordion widget for featured posts with thumbnails
I really love the ability it gives visitors to enhance or hide posts shows within.


label posts shows with thumbnails

This widget only work with one label and thumbnails will only be view if you offer a full feed. To have it in your blog, just follow these steps:

1. Login your Blogger account and go to “Layout” > “Edit html”
2. Place this css just before ]]></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. Put this code before </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>

Save your template.
4. Go to “Layout” and add a new Html widget where you’ll put all this code: replace words in bold with correct informations.

<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 = "Your label";
                                 home_page = "http://yourblog.blogspot.com/";
                             </script>
<div class='accordion'>
<script src='http://simplexdesign.googlecode.com/files/j-label-fix.js' type='text/javascript'></script>

</div>

Save the widget,  go to have a look and enjoy this accordion widget showing one label featured posts with thumbnails!

Categorie(s): ,






About Blogger Mastering:
Blogger Mastering is a blog to help you master blogging with Google blogging plateform. You can get also free templates.



5 commentaires:

  1. hemmm...nice post, i like it..!!! please visit me on http://kianhome.blogspot.com/

    RépondreSupprimer
  2. When I get really cool! Thanks, keep up the good work with the incredible lessons. :)

    RépondreSupprimer
  3. Ce commentaire a été supprimé par l'auteur.

    RépondreSupprimer

Sections ...

Total Pageviews (01/03/2012)

Templates Blogs - Blog Catalog Blog Directory

Followers

Fourni par Blogger.
Etes-vous exceptionnel? Selon la légende, seules les personnes exceptionnelles vont aimer et partager cet article!
Accordion widget for featured posts with thumbnails