Sliding Gallery Style Popular Posts Widget for Blogger


Best Movies Sites: TOP 10 MOVIE WEBSITES


Popular Posts Widget for Blogger
Many Bloggers provide many ways to customize your default Bloggers Popular post widget with CSS. In my opinion, Popular posts widget has helped LabStrikes readers to choose articles thatre most trending on my blog. Moreover, a customized Popular posts widget is more attention-grabbing than default Blogger Popular posts widget. So, here I welcome you rely with CSS Code snippet to add a Popular Posts widget with beautiful automatic sliding effect.

As always, you can see a demo screenshot provided below and your Popular posts widget will seem exactly as below image screenshot. I hope youll be able to understand it within below screenshot itself. Moreover, if you wanna see this widget in action, checkout LabStrike’s homepage.


Popular posts gallery live demo

Please note: Before we fiddle with the CSS Style sheets, you should make some changes via Template Customize in Blogger, but not necessary. So, you should keep at least 1200px width for your Entire blog. And you can easily customize your Entire blog width if its 960px (default Entire blog width) via Customize. Access path: Blogger Dashboard » Template » Customize » Adjust widths » Entire blog.

   Creating Popular Posts Gallery with CSS Style Sheets

Due to Bloggers tweak in Blogger template HTML editor, become more advanced for developers. So if youre a novice Blogger, itll be a little bit complicated, because youve to deal with not only CSS and HTML but with jQuery too. In advance, backup your template before you dive into template HTML editor.

Also make sure to steer clear untrue click on invalid clicks on Format template, Revert changes and Revert widget templates to default buttons, if youre using high customized Blogger template.

  • Go to Blogger Dashboard » Template
  • Backup your Blogger Template before making any changes
  • Click on Edit HTML
  • Expand your Blogger template skin | See how it's - screenshot
  • Press Ctrl + F and search the code shown below 

]]></b:skin>

Now copy & paste the below code right above/before ]]></b:skin> [use Ctrl+F to find the code].

#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(http://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;
}

Important: If you customized your Entire blog width from default Blogger width (960px) to 1200px, change the dimension of the popular post gallery by replacing the values [590px & 126px] to width: 640px & height:126px.

Press Ctrl+F again and search for </head> tag, then copy & paste the below code just above/before the searched code (head tag) snippet. Be aware of placing the code snippet as a plain text in your Blogger template if youre using Google Chrome browser for blogging.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' 
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>

Therere 2 images [left & right navigation] hosted in above jQuery code [line no: 18 & 19]. So, ensure to upload these images in your own server. If we could somehow delete these images in future, you mayve a backup. Also you can change these images with your own desired images.

Well, now its time to add the Popular posts gallary widget just above your Blogger blog posts. Search for <b:section class='main' id='main' showaddelement='yes'> OR <b:section class='main' id='main' showaddelement='no'> and paste the following code snippet just below/after the searched code.

<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>

Customization: You can remove the fragments of code [highlighted in line no: 3 & 33] if you need this Popular posts gallery widget to be displayed in your blog post pages too. But its better to display this widget in your blogs home page itself if you already owned Google AdSense account.

Recommended reading: Remove Default Sidebar Widget's Titles from Blogger

Preview your Blogger template and unless any error happened click on Save template and youre successfully added the CSS Styled Popular posts widget to your blog. Please do share and comment, and also contact me if youre facing any trouble while dealing with code snippets, thanks...!!!
Resource: HelpLogger