How to add Multi-Colored Popular Posts Widget (V1) Blogger?

This tutorial I will show you how to add different / multi colored Popular Post widget blogger. You have seen this widget WordPress Blog now, I have turned the blogger. It has three display modes: Show only the title, show title or thumbnail to display the title in one post snippets. . The majority of this hack is that you do not need to add any heavy JavaScript or other scripts to use this hack with only CSS. In addition, you can customize the widget with the Blogger Template Designer.

Let's go to tutorial.

Multi-Colored Popular Posts Widget Preview

How to Add Multi-Colored Popular Posts Widget (V1) Blogger?

*Go to Blogger Dashboard -> Design -> Edit HTML

*Back up your template before making any changes on your blog

*Now Expand Widget Templates

*Find the code below using the [Ctrl + F]

/ * Variable Definitions
====================
Note - If you do not find the above code in your model, please contact me answer back as soon as time permits.

Now paste the code below just under / after

<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"/>
<variable Name="PopularPosts.background.color6" description="background color6" type="color" default="#ff0" value="#7ee3c7"/>
<variable Name="PopularPosts.background.color7" description="background color7" type="color" default="#ff0" value="#f6993d"/>
</ Group>

Now Find the code below using the [Ctrl + F]

]]> </ B: skin>

Now paste the code below just before / above it

# 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 + Li + Li + Li + Li + li {background: $ (PopularPosts.background.color6), width: 65%}
# PopularPosts1 ul li: first-child + Li + Li + Li + Li + Li: after {content: "6"}
# PopularPosts1 ul li: first-child + Li + Li + Li + Li + Li + li {background: $ (PopularPosts.background.color7), width: 60%}
# PopularPosts1 ul li: first-child + Li + Li + Li + Li + Li + Li: after {content: "7"}
# 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
# PopularPosts1 ul li: first-child + li + li + li + li + li: after
# PopularPosts1 ul li: first-child + li + li + li + li + li +
# PopularPosts1 ul li
# PopularPosts1 ul li {font-size: 12px; color: # 444; text-decoration: none}
# PopularPosts1 ul li: hover {color: # 222; text-decoration: none}

Now Find the code below using the [Ctrl + F]

<b:section class='sidebar' id='sidebar' preferred='yes'>

Now paste the code below just under / after

<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 picture" class = "item-thumbnail"
</ 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 picture" class = "item-thumbnail"
</ 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>
</ Style>
</ B: includable>
</ B: widget>

Now save the template

Widget settings

*Go to Blogger Dashboard -> Design -> Page Elements
*Click the Edit link in the Popular Posts widget
*Select "display up to 7 posts."
*Now Save the widget

Color customization populer Post

*Go to Design >> Template Designer >> Advanced >> PopularPostsBackground
*Choose any color you want

Enjoy!

By Unknown
I am a professional Graphic designer and web site designer.I always try to make my byers Happy with my work and my activities. See My portfolio.....

Stay Connected With Us

Share and Spread

Related Articles