How To Add a Multi Coloured Popular Post Widget

0
142

In this article, we are going to see how to add a multicolor popular post widget. Popular Posts is one of the widget option provided by Blogger that displays the most popular posts i.e., most visited posts on the web blog by All-time, by  by  .

To optimize the multi-colored popular posts widget in blogger, we have to add some CSS codes or new HTML Codes to Our Current Blogger web template. Let’s do it by adding it.

To add the multi-colored popular posts widget to your Blogger site do the following steps one by carefully

Step 1.

First to do that go to the Blogger website, after login to your Blogger Dashboard, then click the “Template” section refers to The image below and then hit the “Edit HTML” button.

Step 2.

Click Back Up and restore button to back up your current blogger template before the changes you make. if is only for safety purpose it is most recommended.

Step 3.

After loading the HTML section of the blogger Click anywhere on the HTML code area and the, press the CTRL + F keyboard keys to Open the search box. Inside the HTML code.

Step 4.

Following text Copy the following text and past it in the search box and hit enter to find the text

Variable definitions

If you can’t Find the above text, then find the below text and paste the above text below the author information that is usually below
this tag:

<b:skin><![CDATA[/*

and it should end up with the similar line:

----------------------------------------------- */
Step 5.

Copy the following code and paste just below/after the above tag the next code:

<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 6.

Now search for the below tag:

]]></b:skin>
Step 7.

Copy the following code and paste it above/before the above tag:

#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 8.

Next search for the below code:

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
Step 9.

After finding the above code just Delete it until you see the following tag :

</b:widget>
Note:

delete the </b:widget> tag also, Be careful when Deleting it. The code should look like this(various in your blogger but take is reference ):

<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;'>
<!-- (1) No snippet/thumbnail -->
<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>
<!-- (2) Show only snippets -->
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<!-- (3) Show only thumbnails -->
<div class='item-thumbnail-only'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
</div>
<div style='clear: both;'/>
<b:else/>
<!-- (4) Show snippets and thumbnails -->
<div class='item-content'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</div>
<div style='clear: both;'/>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
Step 10.

After deleting the above code, copy and paste the below code in that 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 11.

At end of to save the widget, click on the ‘Save template’ button to save the changes to the template

READ ALSO  How to Write Attracting Post With SEO Content

if you not understanding the above article or error shown means watch the following video for your reference

Note:

Please read the above guide thoroughly to get the good result. If you have any queries feel free to contact us or comment below. We hope the above article is very much helpful to you if you like this article the share with your friends. Please fill out the email subscription to our new articles direct to your email inbox, and follow us on social media to get instant post updates to you.

Facebook    :    https://www.facebook.com/Blogging-Advicer-216289829158090       Twitter        :    https://www.twitter.com/BloggingAdvises                                          Google +     :    https://plus.google.com/115962668034214101144                      YouTube      :    https://www.youtube.com/channel/UCpe-WpyXEdi00iThODDdP0g Pinterest     :     https://in.pinterest.com/bloggingadviser                                          Instagram   :     https://www.instagram.com/bloggingadviser

SHARE
Previous articleHow to Create a free website on WordPress
Next articleHow to Add the Popular Posts Widget for Blogger
Jeevanandham is a B.E., Mechanical Engineer and MBA in Operational Management and founder of BloggingAdviser.com, He is he is not the Professional blogger but he knows some things about blogging. Here he shares what he knows. the blog that aims to help bloggers' journey to reach their goal. Jeevanandham loves to help beginners to build their dream website and turn their blog to make a Profitable Blog.

LEAVE A REPLY

Please enter your comment!
Please enter your name here