6 February 2016

How To Add Popular Post Multi-Colored Widget To Blogspot Blogs

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.




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 To Add Popular Post Multi-Colored Widget To Blogspot Blogs

How Add Multi-Color Awesome Popular Post Widget To Blogger


Step 1 - First of all go to www.blogger.com .

image : blogger official website image

Step 2 - Log in to your blogger dashboard and select your blog.

Step 3 - Click on Template and go to Edit HTML.

image : edit blogger html template for adding widget

Step 4 - Before it , firstly backup to your existing template.




Step 5 - Press CTRL + F for finding some tags.

image : Pressing CTRL + F to find something in blogger template

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 == &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/> <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 == &quot;false&quot;’> <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.

Setting of your Popular Post Widget :

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.



Previous Post
Next Post

I'm Aamir Saleem, a professional blogger and SEO Consultant. I loves to write on blogging, SEO, Internet Marketing, Business, Social Media and Make Money Online. Connect Me Via !!!