0 Popular Series Widget Special Collapsible Effects

Popular Series widget is one of the dominant widget that  can easily shows your Series posts. Blogger often write some series content for a longer time but if a reader wants to read all the part of series then it is hard to find all part together and readers may lose interest to read. Popular series widget accumulate all of your popular series links together and readers can easily read at their continence time. This widget designed in user-friendly  way with special collapsible effects and you can add your all Popular Series links. This widget is with transparent background so it is best fit for every templates. Hope it will help your readers to find out your most Popular series of content easily. You can see the demo from my templates footer. So, lets proceed to the tutorials.

Step 1 Log in to your Blogger account and Go to your Blogger Dashboard

Step 2 Go to your Layout tab.

Step 3 Click on "Add a Gadget" then select "HTML/JavaScript" Widget.

Step 4 Now Copy the below code and Paste it in "HTML/JavaScript" Gadget

<script src="https://bloggerspicebd.googlecode.com/files/Popular%20Series%20script%28www.bloggerspice.com%29.js" type="text/javascript">
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript">
</script>
<script type="text/javascript">

$(document).ready(function(){
               
                $(".toggle_container").hide();

                $("h3.trigger").click(function(){
                                $(this).toggleClass("active").next().slideToggle("slow");
                });

});
</script>
 <style id="page-skin-1" type="text/css">
/*------www.bloggerspice.com-----*/
ul.container{
/* The topmost UL */
width:250px;
margin:0 auto;
padding:0px;
}
li.menu{
/* The main list elements */
padding:5px 0;
width:100%;
}
li.button a{
/* The section titles */
display:block;
font-family: Arial, sans-serif,Helvetica;
font-size:12px;
overflow:hidden;
padding:0px 0px 5px 0;
position:relative;
width:100%;
text-transform:capitalize;
}
li.button a:hover{
/* Removing the inherited underline from the titles */
text-decoration:none!important;
}
li.button a span{
/* This span acts as the right part of the section's background */
right:0px;
top:0px;
position:absolute;
color:#ccc;
display:block;
}
.dropdown{
/* The expandable lists */
display:none;
padding-top:5px;
width:100%;
}
.dropdown li{
/* Each element in the expandable list */
border:1px solid #7E7E7E;
color:#CCCCCC;
margin:5px 0;
padding:4px 10px;
}
.dropdown li:hover {
border:1px solid #ccc;
text-decoration:none;
}
.dropdown li a:hover {
text-decoration:none;
}
</style>
 <ul class="container">
<li class="menu">
 <ul>
<li class="button"><a href="#">Complete SEO Tips ▼</a></li>
<li class="dropdown">
<ul>
<li>1. <a href="http://www.bloggerspice.com/2013/01/optimize-your-blog-post-titles-for.html"rel="nofollow" target="_blank">Title Optimization</a></li>
<li>2. <a href="http://www.bloggerspice.com/2013/01/optimizing-blogger-title-tag-by-adding.html" rel="nofollow" target="_blank">Meta Tag And Description</a></li>
<li>3. <a href="http://www.bloggerspice.com/2013/01/customize-your-posts-with-blogger_13.html"rel="nofollow" target="_blank">Permalink</a></li>
<li>4. <a href="http://www.bloggerspice.com/2013/01/blogger-image-optimization-importance_17.html"rel="nofollow" target="_blank">Image Optimization</a></li>
<li>5. <a href="http://www.bloggerspice.com/2013/01/the-most-effective-seo-on-page-and-off.html">On/Off Page Optimization</a></li>
<li>6. <a href="http://www.bloggerspice.com/2013/02/optimize-your-blog-labels-archives-and.html"rel="nofollow" target="_blank">Label,Archive,Comments Optimization</a></li>
</ul>
</li>
</ul>
 </li>
<li class="menu">
 <ul>
<li class="button"><a href="#">Earn By Guest Posting ▼</a></li>
<li class="dropdown">
<ul>
<li>1. <a href="http://www.bloggerspice.com/2013/03/6-websites-that-pay-you-for-photoshop.html"rel="nofollow" target="_blank">Part 1</a></li>
<li>2. <a href="http://www.bloggerspice.com/2013/03/14-websites-that-pay-you-for-web-design.html"rel="nofollow" target="_blank">Part 2</a></li>
</ul>
</li>
</ul>
 </li>
<li class="menu">
 <ul>
<li class="button"><a href="#">Multiple Upload  ▼</a></li>
<li class="dropdown">
<ul>
<li>1. <a href="http://www.bloggerspice.com/2013/02/how-to-upload-file-in-multiple-file.html"rel="nofollow" target="_blank">Embedded Upload</a></li>
<li>2. <a href="http://www.bloggerspice.com/2013/02/upload-your-mediafile-in-multiple-file.html"rel="nofollow" target="_blank">Mirror Creator</a></li>
<li>3. <a href="http://www.bloggerspice.com/2013/03/upload-movie-file-in-multiple-file.html"rel="nofollow" target="_blank">Mirror Upload</a></li>
</ul>
</li>
</ul>
 </li>
<li class="menu">
 <ul>
<li class="button"><a href="#">Get Backlinks ▼</a></li>
<li class="dropdown">
<ul>
<li>1. <a href="http://www.bloggerspice.com/2013/02/get-do-follow-backlinks-from-social.html"rel="nofollow" target="_blank">Part 1</a></li>
<li>2. <a href="http://www.bloggerspice.com/2013/02/get-another-100-do-follow-backlinks_20.html"rel="nofollow" target="_blank">Part 2</a></li>
</ul>
</li>
</ul>
 </li>
</ul>
  <div class="clear"></div>

Step 5 Now Hit on save Button

Customization

• Change Complete SEO Tips  with series name
• Change http://www.bloggerspice.com/2013/01/optimize-your-blog-post-titles-for.html with link address
• Change rest of the Series name and links