Add Multi-Colored Popular Posts to Blogger alphause

Po ... Add Multi-Colored Popular Posts to Blogger 29 comments Popular Posts is a widget provided by Blogger that displays the most viewed posts on the blog in the last 7 days, last month and of all time. It has three displaying modes: display title only, display title with image thumbnail or display title along with the posts snippets. To customize this popular posts widget, we have to add a new variable and some CSS codes to our blogger template. So let's begin: How to add multi-colored popular posts to Blogger Step 1.Login to your Blogger Dashboard, go toDesign>>Edit HTML Step 2.Select "Expand Widget Templates" (make a backup first) Step 3.Search for the following tag: /* Variable definitions ==================== Note: If you can't find it, paste it below the autor information that is usually below this tag (CTRL + F): Step 5.Search for the following piece of code: ]]> Step 6.Just above/before it, add this code: #PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none} #PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px} #PopularPosts1 ul li:first-child{background:$(PopularPosts.background.color1);width:90%} #PopularPosts1 ul li:first-child:after{content:"1"} #PopularPosts1 ul li:first-child + li{background:$(PopularPosts.background.color2);width:85%} #PopularPosts1 ul li:first-child + li:after{content:"2"} #PopularPosts1 ul li:first-child + li + li{background:$(PopularPosts.background.color3);width:80%} #PopularPosts1 ul li:first-child + li + li:after{content:"3"} #PopularPosts1 ul li:first-child + li + li + li{background:$(PopularPosts.background.color4);width:75%} #PopularPosts1 ul li:first-child + li + li + li:after{content:"4"} #PopularPosts1 ul li:first-child + li + li + li + li{background:$(PopularPosts.background.color5);width:70%} #PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"} #PopularPosts1 ul li:first-child:after,#PopularPosts1 ul li:first-child + li:after,#PopularPosts1 ul li:first-child + li + li:after,#PopularPosts1 ul li:first-child + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff} #PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:40px;height:40px} #PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none} #PopularPosts1 ul li a:hover{color:#222;text-decoration:none} Step 7.Now find the following code: Step 8.Delete it until you reach at this tag (delete the also): Note:Be very careful when removing it. The entire fragment of code should look like this:

Step 9. After you have deleted the above code, paste the following in its place:

• 
  

Step 10. Save template. Settings - Go back toLayoutand click on theeditlink of Popular Posts widget. Select to "display up to 5 posts", then Save the widget. -You can easily change the background color of the popular posts widget, going toTemplate>>Customize>>Advanced>>PopularPostsBackgroundand there you can select any color you want. You're done! If you are enjoying reading this blog, please like & subscribe for more tutorials. For any questions or suggestions, leave a comment below. Like 4 Random Posts Filter out your visits to your blog from Google Analytics traffic statistics19/12/2013 - 0 Comments How to customize or edit the linkwithin related post widget10/02/2014 - 13 Comments How to Increase Thumbnail Resolution on Blogger02/02/2014 - 5 Comments Related Posts: How to Add Numbered Page Navigation... Share blog posts in social medias u... Add floating social media sharing b... Add A CSS Animated Share Button on ... Orbit - jQuery Image Slider Plugin ... 29 comments: Dreamer 3/11/2012 Nice blog, def my favourite. Thanks for help! Reply Harshana 5/20/2012 Yeah 100% Great Blog... I've learned something too..... Reply ahmed Onawale 7/16/2012 doesn't display very well on my home pages but it display well in post pages why? Reply Таня Воробйова 8/16/2012 Thank you, very nice-looking widget Reply Laurie Gina 8/25/2012 Help me, i can't find this code .. why ? Reply Replies Admin 8/26/2012 Hi Laurie, please tell me what code you can't find and i'll try to help you. Thanks for visiting! anon 9/05/2012 hi i cannot find the /* Variable definitions i have already checked the "expand widget templates" please help. tq Reply Replies Admin 9/27/2012 Then you have to paste it under blogger template description which is usually after