Gadget Most Viewed Multicolored Messages With Numbers
Need to have a gadget "most viewed messages" stylish? I think I have something for you. The gadget for "most viewed messages" that I will offer here has the particularity of displaying a different color for the items listed, with in addition to that a number next to each of them.
Here is the procedure to follow to have a gadget "messages most viewed" multicolored and numbered.
Before you start the operation that we will detail here, I advise you to start by adding a gadget "most viewed messages" in your blog, if it is not done yet.
1. Go to your Blogger Dashboard >> Change the HTML code >> Copy the entire code displayed and keep a copy in a txt file (to use just in case there is a problem).
2. Find the next part (do CTRL + F and paste the text below to find it)
/ * Variable definitions
====================
3. Copy the following code and paste it just after the end you just found.
<Variable name = "PopularPosts.background.color1" description = "background color1" type = "color" default = "# fa4242" value = "# ff4c54" />
<Variable name = "PopularPosts.background.color2" description = "color2 background" type = "color" default = "# ee6107" value = "# ff764c" />
<Variable name = "PopularPosts.background.color3" description = "color3 background" type = "color" default = "# f0f" value = "# ffde4c" />
<Variable name = "PopularPosts.background.color4" description = "color4 background" type = "color" default = "# ff0" value = "# c7f25f" />
<Variable name = "PopularPosts.background.color5" description = "color5 background" type = "color" default = "# 0ff" value = "# 33c9f7" />
<Variable name = "PopularPosts.background.color6" description = "color6 background" type = "color" default = "# ff0" value = "# 7ee3c7" />
<Variable name = "PopularPosts.background.color7" description = "color7 background" type = "color" default = "# ff0" value = "# f6993d" />
4. Find the following code:
]]> </ B: skin>
5. Paste these css lines just before the code above:
# 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: hover {color: # 222; text-decoration: none}
6. Find the following code, and then delete it.
<b: widget id = 'PopularPosts1' locked = 'false' title = 'Most viewed messages' type = 'PopularPosts' />
7. Paste the code below where the "most viewed messages" gadget you just erased in the previous step was.
<b: widget id = 'PopularPosts1' locked = 'false' title = 'Most viewed messages' 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>
8. Save your model.
There you go! You have a new multicolored "most viewed messages" gadget with numbers displayed for each item listed.
Setting the gadget
- Go to Layout >> Click "edit" for the gadget "most viewed messages" and choose the display of 5 articles then save the changes.
- You can easily change the colors of the gadget by going to Model, >> Presentation >> Advanced and there, change the colors for background1, background2, background3 so on until background7.
