In all BlogSpot blogs, the popular posts widget is available and can be display on almost every blogs. This widget can be provided by blogger platform.
It can display the posts which can get the most views in the last seven days, last month or any other time.It is very important widget and it can be displayed on three ways, like title only display, display title and image, or display the title , image as well as some description.
- How to add related posts widget with thumbnails in blogger
- Awesome popular posts widget with counter box for blogger
- How to add feedburner recent posts widget in blogger
- How to add random posts widget into blogger blog
(adsbygoogle = window.adsbygoogle || []).push({});
You can also customized this widget in blogger platform, for this purpose we have add some new things like some variables , some coding, some CSS styles to our template in Blogspot. If you ready then go ahead :
How Add Multi-Color Awesome Popular Post Widget To Blogger
Step 1 – First of all go to www.blogger.com .
Step 2 – Log in to your blogger dashboard and select your blog.
Step 3 – Click on Template and go to Edit HTML.
Step 4 – Before it , firstly backup to your existing template.
Step 5 – Press CTRL + F for finding some tags.
Step 6 – Search for the following tag given below ( CNTRL + F ).
/* Variable definitions ====================
Step 7 – Almost all templates have this tag, but if you doesn’t find this tag, then simply paste the given code just below it.
<b:skin><![CDATA[/*———————————————– */
Step 8 – Copy below code, the paste just below this tag.
<Group description=”PopularPosts Backgrounds” selector=”#PopularPosts1″> <Variable name=”PopularPosts.background.color1″ description=”background color1″ type=”color” default=”#fa4242″ value=”#ff4c54″/> <Variable name=”PopularPosts.background.color2″ description=”background color2″ type=”color” default=”#ee6107″ value=”#ff764c”/> <Variable name=”PopularPosts.background.color3″ description=”background color3″ type=”color” default=”#f0f” value=”#ffde4c”/> <Variable name=”PopularPosts.background.color4″ description=”background color4″ type=”color” default=”#ff0″ value=”#c7f25f”/> <Variable name=”PopularPosts.background.color5″ description=”background color5″ type=”color” default=”#0ff” value=”#33c9f7″/> </Group>
Step 9 – Search this tag.
]]></b:skin>
Step 10 – Just above this tag, paste this code given below
#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 11 – Find this piece of code.
<b:widget id=’PopularPosts1′ locked=’false’ title=’Popular Posts’ type=’PopularPosts’>
Step 12 – Delete all this code, until you reach the following tag.
</b:widget>
Step 13 – When you delete this code and reach this tag, paste below code in its place.
<b:widget id=’PopularPosts1′ locked=’false’ title=’Popular Posts’ type=’PopularPosts’> <b:includable id=’main’> <b:if cond=’data:title’> <h2><data:title/></h2> </b:if> <div class=’widget-content popular-posts’> <ul> <b:loop values=’data:posts’ var=’post’> <li> <b:if cond=’data:showThumbnails == "false"’> <b:if cond=’data:showSnippets == "false"’> <a expr:href=’data:post.href’ expr:title=’data:post.title’ rel=’bookmark’><data:post.title/></a> <b:else/> <a expr:href=’data:post.href’ expr:title=’data:post.snippet’ rel=’bookmark’><data:post.title/></a> </b:if> <b:else/> <b:if cond=’data:showSnippets == "false"’> <b:if cond=’data:post.thumbnail’> <img class=’item-thumbnail’ expr:alt=’data:post.title’ expr:src=’data:post.thumbnail’/> <b:else/> <img alt=’no image’ class=’item-thumbnail’ src=’http://2.bp.blogspot.com/-XQt2v4x5dl8/T1zdpFh392I/AAAAAAAABUU/xMJZDedw38k/s1600/default.jpg’/> </b:if> <a expr:href=’data:post.href’ expr:title=’data:post.title’ rel=’bookmark’><data:post.title/></a> <div class=’clear’/> <b:else/> <b:if cond=’data:post.thumbnail’> <img class=’item-thumbnail’ expr:alt=’data:post.title’ expr:src=’data:post.thumbnail’/> <b:else/> <img alt=’no image’ class=’item-thumbnail’ src=’http://2.bp.blogspot.com/-XQt2v4x5dl8/T1zdpFh392I/AAAAAAAABUU/xMJZDedw38k/s1600/default.jpg’/> </b:if> <a expr:href=’data:post.href’ expr:title=’data:post.snippet’ rel=’bookmark’><data:post.title/></a> <div class=’clear’/> </b:if> </b:if> </li> </b:loop> </ul> </div> </b:includable> </b:widget>
Step 14 – Save your template.
After all this, go to your Layout, and click on the link popular post widget, select display only 5 posts and save your template.
You are Done ! ! !
If you like this post, then please like this and share this with your friends and also subscribe us for more tutorials.For any questions or suggestions please comment below this post.
