Recents in Beach

How To Add Awesome Popular Posts Widget with Counter


 Hi blogger, today we are going to look into "How To Add Awesome Popular Posts with Stylish Counter" on your Blogger's blog. You all know that Popular Posts helps in keeping your visitors which allows them to have smooth navigation throughout you blog. It help also to reduce the bounce rate (we are going to look into this in the next lesson) and increase earnings.

Features of this widget:

  • It can shows thumbnails with post titles.
  • When mouse hover, an amazing image zooming effect shows.
  • Post titles are shown on the images with transparent dark color.
  • Show Counter box.
  • No any blurry images.
  • Customize as you want. ( colors, width, height )
  • And it's free of cost. ( See below image )

Now Lets get Started:

  1. Login to your blogger dashboard and select your blog
  2. Then Go Template > Click on Edit HTML
  3. First Save your template backup and then edit HTML code.
  4. Find this tag.
 </body>

  •  Just before this tag, paste the below code .

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/> <script type='text/javascript'>//<![CDATA[ $(document).ready(function() { var tbn = 150; $('#PopularPosts1').find('img').each(function(n, image){ var image = $(image); image.attr({src : image.attr('src').replace(/s\B\d{2,4}/,'s' + tbn)}); image.attr('width',tbn); image.attr('height',tbn); }); }); //]]></script>

  • After adding this, find using "CNTRL + F " this piece of code.
]]></b:skin>

  • Copy below CSS Code and paste it just before it.

/***** Sidebar Popular Posts - www.allbloggingmag.blogspot.com *****/ .sidebar .popular-posts ul { counter-reset: popcount; margin: 0; padding: 0; } .sidebar .popular-posts ul li:first-child {} .sidebar .popular-posts ul li { font-family:'Oswald','Open Sans','Helvetica Neue',Arial,Tahoma,sans-serif; height: 130px; list-style: none !important; overflow: hidden; padding: 0 !important; position: relative; margin: 2px; border: 0; width: 48%; float: left; } .sidebar .PopularPosts .item-thumbnail {margin: 0; width: 100%;} .sidebar .PopularPosts ul li img { display: block; float: left; padding: 0; width: 100%; height: 130px; -webkit-transition-duration: 1.0s; /*Webkit: Animation duration*/ -moz-transition-duration: 1.0s; /*Mozilla Animation duration*/ -o-transition-duration: 1.0s; /*Opera Animation duration*/ transition:1.0s; } .sidebar .PopularPosts ul li img:hover { -webkit-transform:scale(1.06); /*Webkit: 0.5 times the original Image size*/ -moz-transform:scale(1.06); /*Mozilla 0.5 times the original Image size*/ -o-transform:scale(1.06); /*Opera 0.5 times the original Image size*/ transform:scale(1.06); overflow: hidden; } .sidebar .PopularPosts .item-title { bottom:0; left: 0; right: 0; padding-bottom: 0; position: absolute; z-index: 999; } .sidebar .PopularPosts .item-title a { background: rgba(32, 32, 32, 0.77); color: #FFFFFF; display: block; font-size: 12px; line-height: normal; padding: 5px 0px 2px 5px; text-transform: capitalize; transition: all .4s ease-in-out; } .sidebar .popular-posts ul li:hover .item-title a { color: rgba(255, 255, 255, 1); background: rgba(231, 76, 60, 0.88); text-decoration: none; } .sidebar .popular-posts ul li:before { background: rgba(255, 252, 8, 1); color: #000; content: counter(popcount, decimal); counter-increment: popcount; float: left; font-size: 14px; line-height: 20px; list-style-type: none; padding: 0px 8px 1px 1px; border-radius: 0px 0px 10px 0px; position: absolute; top: 0; z-index: 4; border: solid #FFF; border-width: 0px 2px 2px 0px; }

  • Now save you template and see out the result.

Now everything is done, only one main step is behind, go to your Layout Area and click on popular posts widget and change its setting. Only change the setting as i display in the image below. Check the Image Thumbnail and un-check snippet option and then save your widget.



Congratulations. All works Done.


Have any questions? Feel free to ask me via the comments section! Remember to share this tutorial with others on Facebook, Twitter & Google Plus.

Post a comment

0 Comments