Popular Series Widget Special Collapsible Effects

Popular Series Widget Special Collapsible Effects

1
data:blog.title
blogger widget

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

Popular Series Widget Special Collapsible Effects
4 Stars stars - "Popular Series Widget Special Collapsible Effects" Popular Series widget is one of the dominant widget that  can easily shows your Series posts...

Post a Comment

I was following your blog for the beginning. And i was badly looking for this widget for my blog. Thanks for sharing bro.

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *