Elegant Popular Posts Widget for Blogger Tweak

SHARE:

Ever wanted a really elegant and beautiful popular posts widget for your blogger blog? If yes, then you have landed on the right place. T...

Popular Posts Blogger
Ever wanted a really elegant and beautiful popular posts widget for your blogger blog? If yes, then you have landed on the right place. Today I am back with yet another unique and amazingly looking popular posts widget customization.
I had my exams which ended just a couple of days before so I was thinking of something substantial to post. A image of this came to my mind and its here for all of you to use.

I have already posted quite a few Popular Posts customization posts. They are -

 So the widget I am going to add today looks quite different from the rest of the collection. You can see the demo of the customized Popular posts widget by clicking the button below.

Live Demo

Once you have seen the demo, to add the Popular posts customized widget follow the given steps.

Adding the Popular Posts Widget


Firstly go to  Blog Title → Layout → Add Widget → Popular Posts. Add the widget in the desired location and save the template.
Remember to check the Item Snippet and Image Thumbnail option.

Adding the CSS


Now we have to add the CSS of the Popular Posts customized widget, for this go to Blog Title → Template → Edit HTML. Press Ctrl + F and search for ]]></b:skin> in search box. After getting the code add the below given code just above ]]></b:skin>
/* Popular Posts Widget customized by AllBloggerTricks.com */
.PopularPosts .item-thumbnail { display: block; height: 190px; margin: 0; overflow: hidden; position: relative; width: 100%; }
.PopularPosts .item-title { position: relative; }
.PopularPosts img { display: block; height: auto; position: absolute; width:auto; transition: all 1s ease 0s; }
.item-title a { background:rgba(0, 0, 0, 0.35); color: #FFFFFF; font-family: Impact; font-size: 17px; font-weight: 100; padding: 10px 0; position: absolute; right: 0; text-align: center; top: 30px; width: 100%; }
.item-snippet { background:rgba(0, 0, 0, 0.35); color: #FFFFFF; font-weight: 900; left: 12%; padding: 10px; position: absolute; text-align: center; top: 95px; width: 70%; }
.item-content { position: relative; }

Also note that you have removed all the previous Popular Posts CSS codes (if any) before adding this one or the result will be the combination of the two.

Adding the JS


Usually Popular posts widget do not require any JavaScript, but this one needs in order to resize the popular posts image and cut short the snippet.
To add the JS, search for </body> and paste the below given code just above it.

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>
<script type='text/javascript'>
 $(document).ready(function() {$(&#39;.PopularPosts img&#39;).attr(&#39;src&#39;, function(i, src) {return src.replace( &#39;s72-c&#39;, &#39;s400&#39; );});});
</script>
    <script type='text/javascript'>
    //<![CDATA[
    // Popular Posts customization by AllBloggerTricks.com
    // Trim Code by MS-potilas 2012
    $('.popular-posts ul li .item-snippet').each(function(){
     var txt=$(this).text().substr(0,120);
      var j=txt.lastIndexOf(' ');
      if(j>10)
         $(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,'...'));
    });
    //]]>
    </script>

After adding the code save the template. PS. Remove the code in red if you already have it in your template.

You are done now. Now you and your visitors can see this elegant Popular posts widget on your blogger blog. Also it is my earnest request to you that please do not remove the comments added in the codes. They will not be displayed in your blog. Only the person viewing the code can see this.

BY : ALL BLOGGER TRICKS

COMMENTS

Name

Blogger,2,Blogging,10,Computer Hardware,1,Facebook,1,Google Adsense,1,Hacking,2,Search Engine Optimization,1,Social Widgets,2,Templates,6,Widgets,5,Wordpress,2,
ltr
item
Mr TEch Tips: Elegant Popular Posts Widget for Blogger Tweak
Elegant Popular Posts Widget for Blogger Tweak
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikj9FoFdLcYUcPg4ItDqHsSyk5q06Zkzn8U8BP6TUrDaUugx9eOZ3HJs2GL5se0MMvzDq4dZVcpGg_Uz-HxBW-ZWSshPgiBTHm2TMzfcAuxrYv7zTSiYyaDV6y4bVzCYhVyqAx1saq_L_3/s1600/Popular+Posts+blogger.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikj9FoFdLcYUcPg4ItDqHsSyk5q06Zkzn8U8BP6TUrDaUugx9eOZ3HJs2GL5se0MMvzDq4dZVcpGg_Uz-HxBW-ZWSshPgiBTHm2TMzfcAuxrYv7zTSiYyaDV6y4bVzCYhVyqAx1saq_L_3/s72-c/Popular+Posts+blogger.png
Mr TEch Tips
https://mr-techtips.blogspot.com/2016/02/elegant-popular-posts-widget-for.html
https://mr-techtips.blogspot.com/
https://mr-techtips.blogspot.com/
https://mr-techtips.blogspot.com/2016/02/elegant-popular-posts-widget-for.html
true
7661483911095204621
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED ARTICLES LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy