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





sajib shahik | 10:30 AM | 0 Comments


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 sajib shahik
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
Feed Icon Twitter Icon Facebook Icon Google+ Icon Youtube Icon


Share and Spread Share On Facebook +1 This Post Digg This Post Stumble This Post Tweet This Post Tweet This Post Tweet This Post Save Tis Post To Delicious Share On Reddit Bookmark On Technorati


Related Articles

JOIN THE DISCUSSION

Any feedback, questions or ideas are always welcome. In case you are posting Code ,then first escape it using Postify and then paste it in the comments

0 comments: