New Attractive CSS Sliding Popular Posts Widget for Blogger

There are several of Popular post widgets made with CSS. Popular post widgets are useful in choosing the post as an trending story. By the wat this Slider was first used by Labstrikes. And now I’m just sharing the slider for you. However, the main feature of the Popular post widgets is to make the post still popular. This widget will help you to show the popular post from your blog like a photo gallery slider. This widget id made of CSS and with Html. Before adding it to your blog take a live demo at Labstrikes Let’s see how to add it in your blog.

There are several of Popular post widgets made with CSS. Popular post widgets are useful in choosing the post as an trending story. By the wat this Slider was first used by Labstrikes. And now I'm just sharing the slider for you. However, the main feature of the Popular post widgets is to make the post still popular. This widget will help you to show the popular post from your blog like a photo gallery slider. This widget id made of CSS and with Html. Before adding it to your blog take a live demo at Labstrikes Let's see how to add it in your blog.       Note: Backup your Blogger Template before making any changes How to Simple Sliding Popular Posts Widget for Blogger  Go to Blogger "Dashboard"  Then click the "Template" found at the sidebar And now hit "Edit HTML" Now search for this code ]]></b:skin> For searching use Ctrl+F to find the code. After finding it copy & paste the below code just above/before ]]></b:skin>.  #gallery {     position: relative;     margin: 0 35px 20px;     width: 590px;     height: 126px;     background: #ffffff; } #gallery .belt {     position: absolute;     top: 0;     left: 0;     list-style-type: none; } #gallery .panel {     float: left;     margin: 20px;     width: 84px;     height: 86px;     background: url(https://s23.postimg.org/cgryfolqv/PP_Galllery_Slider_Lab_Strike.png)      bottom center no-repeat;     overflow: hidden; } #gallery .panel img {     float: left;     border: 1px solid #DDD;     margin: 5px;     width: 72px;     height: 72px;     background: #FFF;     padding: 0px; } #gallery .panel img:hover {     filter: alpha(opacity=50);     -moz-opacity: 0.5;     -khtml-opacity: 0.5;     opacity: 0.5; } Then again search for </head> tag. Once you searched it copy & paste the below code just above/before  </head>  tag. <script src=''  type='text/javascript'/> <script src='https://helplogger.googlecode.com/svn/trunk/auto-slider.js'  type='text/javascript'/> <script type='text/javascript'> //<![CDATA[ stepcarousel.setup( {     galleryid: "gallery", beltclass: "belt", panelclass: "panel", autostep: {enable:true, moveby:1, pause:6000; }, panelbehavior: {     speed: 500, wraparound:true, persist:true; }, defaultbuttons: {     enable: true, moveby: 2,  leftnav: ["http://i48.tinypic.com/rmu550.png", -40, 36],  rightnav: ["http://i50.tinypic.com/161l1n9.png", 2, 36]; }, contenttype: ["external"]; })//]]> </script>  You're not yet finished ! Here is the last step to add your widget in your blog.  Now again search for <b:section class='main' id='main' showaddelement='yes'> Or <b:section class='main' id='main' showaddelement='no'>  Once you finished searching it then copy and paste the code given bellow right below the <b:section class='main' id='main' showaddelement='yes'> Or <b:section class='main' id='main' showaddelement='no'> .  <b:widget id='PopularPosts2' locked='false' title='Popular Posts' type='PopularPosts'> <b:includable id='main'> <b:if cond='data:blog.url == data:blog.homepageUrl'> <div style='margin-top:20px;margin-bottom:70px;margin-left:-20px;'> <div id='gallery'> <ul class='belt'> <b:loop values='data:posts' var='post'> <li class='panel'> <b:if cond='data:showThumbnails == &quot;false&quot;'> <b:if cond='data:showSnippets == &quot;false&quot;'> <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a> <b:else/> <div class='item-title'> <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a> </div> <div class='item-snippet'> <data:post.snippet/> </div> </b:if> <b:else/> <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'> <b:if cond='data:post.thumbnail'> <img expr:alt='data:post.title' expr:src='data:post.thumbnail'/> <b:else/> <img alt='no image' src='https://s24.postimg.org/hhzch1t7l/blank_image.png'/> </b:if> </a> </b:if> </li> </b:loop> </ul> </div></div> </b:if> </b:includable> </b:widget> Now save your template. That's it !  If you have still any doubt about installing this widget in your blog then feel free to share it in comments. I'll surely help you. Happy Blogging !
There are several of Popular post widgets made with CSS. Popular post widgets are useful in choosing the post as an trending story. By the wat this Slider was first used by Labstrikes. And now I'm just sharing the slider for you. However, the main feature of the Popular post widgets is to make the post still popular. This widget will help you to show the popular post from your blog like a photo gallery slider. This widget id made of CSS and with Html. Before adding it to your blog take a live demo at Labstrikes Let's see how to add it in your blog.       Note: Backup your Blogger Template before making any changes How to Simple Sliding Popular Posts Widget for Blogger  Go to Blogger "Dashboard"  Then click the "Template" found at the sidebar And now hit "Edit HTML" Now search for this code ]]></b:skin> For searching use Ctrl+F to find the code. After finding it copy & paste the below code just above/before ]]></b:skin>.  #gallery {     position: relative;     margin: 0 35px 20px;     width: 590px;     height: 126px;     background: #ffffff; } #gallery .belt {     position: absolute;     top: 0;     left: 0;     list-style-type: none; } #gallery .panel {     float: left;     margin: 20px;     width: 84px;     height: 86px;     background: url(https://s23.postimg.org/cgryfolqv/PP_Galllery_Slider_Lab_Strike.png)      bottom center no-repeat;     overflow: hidden; } #gallery .panel img {     float: left;     border: 1px solid #DDD;     margin: 5px;     width: 72px;     height: 72px;     background: #FFF;     padding: 0px; } #gallery .panel img:hover {     filter: alpha(opacity=50);     -moz-opacity: 0.5;     -khtml-opacity: 0.5;     opacity: 0.5; } Then again search for </head> tag. Once you searched it copy & paste the below code just above/before  </head>  tag. <script src=''  type='text/javascript'/> <script src='https://helplogger.googlecode.com/svn/trunk/auto-slider.js'  type='text/javascript'/> <script type='text/javascript'> //<![CDATA[ stepcarousel.setup( {     galleryid: "gallery", beltclass: "belt", panelclass: "panel", autostep: {enable:true, moveby:1, pause:6000; }, panelbehavior: {     speed: 500, wraparound:true, persist:true; }, defaultbuttons: {     enable: true, moveby: 2,  leftnav: ["http://i48.tinypic.com/rmu550.png", -40, 36],  rightnav: ["http://i50.tinypic.com/161l1n9.png", 2, 36]; }, contenttype: ["external"]; })//]]> </script>  You're not yet finished ! Here is the last step to add your widget in your blog.  Now again search for <b:section class='main' id='main' showaddelement='yes'> Or <b:section class='main' id='main' showaddelement='no'>  Once you finished searching it then copy and paste the code given bellow right below the <b:section class='main' id='main' showaddelement='yes'> Or <b:section class='main' id='main' showaddelement='no'> .  <b:widget id='PopularPosts2' locked='false' title='Popular Posts' type='PopularPosts'> <b:includable id='main'> <b:if cond='data:blog.url == data:blog.homepageUrl'> <div style='margin-top:20px;margin-bottom:70px;margin-left:-20px;'> <div id='gallery'> <ul class='belt'> <b:loop values='data:posts' var='post'> <li class='panel'> <b:if cond='data:showThumbnails == &quot;false&quot;'> <b:if cond='data:showSnippets == &quot;false&quot;'> <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a> <b:else/> <div class='item-title'> <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a> </div> <div class='item-snippet'> <data:post.snippet/> </div> </b:if> <b:else/> <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'> <b:if cond='data:post.thumbnail'> <img expr:alt='data:post.title' expr:src='data:post.thumbnail'/> <b:else/> <img alt='no image' src='https://s24.postimg.org/hhzch1t7l/blank_image.png'/> </b:if> </a> </b:if> </li> </b:loop> </ul> </div></div> </b:if> </b:includable> </b:widget> Now save your template. That's it !  If you have still any doubt about installing this widget in your blog then feel free to share it in comments. I'll surely help you. Happy Blogging !

Note: Backup your Blogger Template before making any changes

How to Simple Sliding Popular Posts Widget for Blogger

  • Go to Blogger “Dashboard” 
  • Then click the “Template” found at the sidebar
  • And now hit “Edit HTML”
  • Now search for this code ]]></b:skin>
  • For searching use Ctrl+F to find the code.
  • After finding it copy & paste the below code just above/before ]]></b:skin>. 

#gallery {    position: relative;
    margin: 0 35px 20px;
    width: 590px;
    height: 126px;
    background: #ffffff;
}
#gallery .belt {
    position: absolute;
    top: 0;
    left: 0;
    list-style-type: none;
}
#gallery .panel {
    float: left;
    margin: 20px;
    width: 84px;
    height: 86px;
    background: url(https://s23.postimg.org/cgryfolqv/PP_Galllery_Slider_Lab_Strike.png)
    bottom center no-repeat;
    overflow: hidden;
}
#gallery .panel img {
    float: left;
    border: 1px solid #DDD;
    margin: 5px;
    width: 72px;
    height: 72px;
    background: #FFF;
    padding: 0px;
}
#gallery .panel img:hover {
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
}

  • Then again search for </head> tag.
  • Once you searched it copy & paste the below code just above/before  </head>  tag.

<script src=” type=’text/javascript’/>
<script src=’http://helplogger.googlecode.com/svn/trunk/auto-slider.js’
type=’text/javascript’/>
<script type=’text/javascript’>
//<![CDATA[
stepcarousel.setup( {
    galleryid: “gallery”,
beltclass: “belt”,
panelclass: “panel”,
autostep: {enable:true, moveby:1, pause:6000;
},
panelbehavior: {
    speed: 500, wraparound:true, persist:true;
},
defaultbuttons: {
    enable: true, moveby: 2,
leftnav: [“http://i48.tinypic.com/rmu550.png”, -40, 36],
rightnav: [“http://i50.tinypic.com/161l1n9.png”, 2, 36];
},
contenttype: [“external”];
})//]]>
</script>

  • You’re not yet finished ! Here is the last step to add your widget in your blog. 
  • Now again search for <b:section class=’main’ id=’main’ showaddelement=’yes’> Or <b:section class=’main’ id=’main’ showaddelement=’no’> 
  • Once you finished searching it then copy and paste the code given bellow right below the <b:section class=’main’ id=’main’ showaddelement=’yes’> Or <b:section class=’main’ id=’main’ showaddelement=’no’> .

<b:widget id=’PopularPosts2′ locked=’false’ title=’Popular Posts’ type=’PopularPosts’><b:includable id=’main’>
<b:if cond=’data:blog.url == data:blog.homepageUrl’>
<div style=’margin-top:20px;margin-bottom:70px;margin-left:-20px;’>
<div id=’gallery’>
<ul class=’belt’>
<b:loop values=’data:posts’ var=’post’>
<li class=’panel’>
<b:if cond=’data:showThumbnails == &quot;false&quot;’>
<b:if cond=’data:showSnippets == &quot;false&quot;’>
<a expr:href=’data:post.href’ expr:title=’data:post.title’ rel=’bookmark’><data:post.title/></a>
<b:else/>
<div class=’item-title’>
<a expr:href=’data:post.href’ expr:title=’data:post.title’ rel=’bookmark’><data:post.title/></a>
</div>
<div class=’item-snippet’>
<data:post.snippet/>
</div>
</b:if>
<b:else/>
<a expr:href=’data:post.href’ expr:title=’data:post.title’ rel=’bookmark’>
<b:if cond=’data:post.thumbnail’>
<img expr:alt=’data:post.title’ expr:src=’data:post.thumbnail’/>
<b:else/>
<img alt=’no image’ src=’http://s24.postimg.org/hhzch1t7l/blank_image.png’/>
</b:if>
</a>
</b:if>
</li>
</b:loop>
</ul>
</div></div>
</b:if>
</b:includable>
</b:widget>

If you have still any doubt about installing this widget in your blog then feel free to share it in comments. I’ll surely help you. Happy Blogging !

About Harshit Jain

Harshit Jain is a tech-savvy blogger. He is graduated from Mumbai University. He likes to share his knowledge through his own blog at TripoSoft, Best Beard Trimmer, Best Electric Toothbrush & TechHug as well as by writing guest articles on other blogging sites. Follow him on Facebook, Google+, Twitter.

Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge

This site uses Akismet to reduce spam. Learn how your comment data is processed.