How To Add Colorful Popular Post Widget With Hover Effect

0
How To Add Colorful Popular Post Widget With Hover Effect
Hello Folks,Today we are going to explore another popular post widget which definitely suits your blog or website niche.In previous post we have talked about How to Add Five Star  Rating Popular Post Widget and today we are here with awesome colorful gadget.However it took some time to made but finally we are here with this beautiful popular post widget.You can Look below for example and demo how this popular post tool looks:
demo of colorful popular post widget in blogger template
After watching the above example i'm damn sure you guys are really curious to know ;).Colorful Popular widget comes with 2 features.First features is that you can see color with post when you hover on the post color change and it change to white.And Second feature is without the hover colors that means without the color effect ,if will look simple if there is no color effect.i'm sure you will definitely add color with this gadget.Adding popular post widget in blogger template is a best way to keep engage your visitors with your website or blogs other content.and you can see in this widget there we have provided a number system means the post is most popular get ranked 1st next so on.We have used CSS and Java script for this widget.below i will show you how to add this colorful popular post widget in blogspot template.To grab this gadget follow the steps mentioned below.

How To Add Colorful Popular post gadget with number system and hover effect

installation steps:

Step .1 Go to https://www.blogger.com and Sign in to your account.
Step .2 Now From Blogger Dashboard click on ->Template ->Edit HTML.
Step .3 Now Search For ]]></b:skin> or </style> tag In Your Template By Using CTRL+F or CMD+F Keys.
Step .4 Now Copy the below CSS code and paste it just above of ]]></b:skin> or </style> tag.
/* Colorful Popular Posts Widget By www.BloggersStanD.com */
.PopularPosts .item-thumbnail{float:none;margin:0 0 10px}
.PopularPosts .item-title{background:rgba(0,0,0,0.5);position:absolute;display:block;clear:both;z-index:50;top:0;left:0;right:0;bottom:0;padding:15px;transition:all .4s;}
.PopularPosts .item-title:hover{background:rgba(0,0,0,.2)}
.PopularPosts .item-title a{color:rgba(255,255,255,0);font-weight:700;font-size:120%;text-shadow:0 0 5px rgba(0,0,0,0)}
.PopularPosts .item-title:hover a,.PopularPosts .item-title a:hover{color:rgba(255,255,255,1);text-shadow:0 0 5px rgba(0,0,0,.3)}
.PopularPosts .widget-content ul li img{translate(0,0) scale(1.0);transition:all .8s linear}
.PopularPosts .widget-content ul li:hover img{transform:translate(0,-20px) scale(1.05);transition:all 3.6s linear;}
.PopularPosts img{display:block;height:auto;width:100%;padding:0;backface-visibility:hidden;}
.PopularPosts .item-snippet{display:none;}
.PopularPosts ul li .item-content{position:relative;overflow:hidden;}
.PopularPosts ul{padding:0;line-height:normal;counter-reset:count;}
.PopularPosts .widget-content ul li{position:relative;padding:10px 0;overflow:hidden;max-height:100px;transition:all .4s;}
.PopularPosts .widget-content ul li:before{color:#fff;counter-increment:count;content:counter(count);position:absolute;right:-15px;top:-5px;font:bold 80px/1 Sans-Serif;z-index:51;transition:all .4s;}
.PopularPosts .widget-content ul li:hover:before{right:-55px;}
.PopularPosts ul li:nth-child(1) .item-title {background:rgba(221,25,29,0.5);}.PopularPosts ul li:nth-child(2) .item-title {background:rgba(141,187,144,0.5);}.PopularPosts ul li:nth-child(3) .item-title {background:rgba(39,169,255,0.5);}.PopularPosts ul li:nth-child(4) .item-title {background:rgba(192,202,51,0.5);}.PopularPosts ul li:nth-child(5) .item-title {background:rgba(26,35,126,0.5);}.PopularPosts ul li:nth-child(6) .item-title {background:rgba(0,188,212,0.5);}.PopularPosts ul li:nth-child(1) .item-title:hover,.PopularPosts ul li:nth-child(2) .item-title:hover,.PopularPosts ul li:nth-child(3) .item-title:hover,.PopularPosts ul li:nth-child(4) .item-title:hover,.PopularPosts ul li:nth-child(5) .item-title:hover,.PopularPosts ul li:nth-child(6) .item-title:hover{background:rgba(0,0,0,0.2);}
Step .5 Now Search For Closing </body> tag and paste the below Java Script code just above the </body> tag.
<script type='text/javascript'>
// Popular Post Thumb
$(document).ready(function() {$(&#39;.PopularPosts img&#39;).attr(&#39;src&#39;, function(i, src) {return src.replace( &#39;s72-c&#39;, &#39;s400&#39; );});});
//<![CDATA[
// Custom Popular Post
$(".popular-posts ul li .item-snippet").each(function(){var t=$(this).text().substr(0,120),s=t.lastIndexOf(" ");s>10&&$(this).text(t.substr(0,s).replace(/[?,!\.-:;]*$/,"..."))});
//]]>
</script>

Customization: 

  • To Remove the Background color effect delete the highlighted code from the above CSS.
Step .6  Now Save Your Template..Done !

How To Add Popular Post Widget Inside The Template

Go to your Dashboard and click on -> Layout and Now click on Add a Gadget and Select Popular Post Widget. Now Click on last 7 days post and image thumbnail , post snippet and after that click on save button.look below for example.
how to add popular post widget from blogger layout
Learn trick to add background colorful popular post widget with hover effect and auto number system to most viewed post.display unique stylish beautiful hover effect popular post gadget.
Hello Folks,Today we are going to explore another popular post widget which definitely suits you...
SUMMARY

Learn trick to add background colorful popular post widget with hover effect and auto number system to most viewed post.display unique stylish beautiful hover effect popular post gadget.

You Might Also Like:

We hope this article helped you to learn How To Add Colorful Popular Post Widget With Hover Effect. If you have any question or any complication please don't hesitate to ask us.You can drop your message below in the comment box or you can Contact Us!. If you liked this article please join us on : Facebook | Twitter | Google+

SUBSCRIBE ARTICLES BY EMAIL

Post a Comment Blogger Disqus

0 Comments on "How To Add Colorful Popular Post Widget With Hover Effect" So Far
Out Of Topic Show Conversion CodeHide Conversion Code Featured Post

MARKUP FOR WRITING COMMENTS:
1. To Insert Code Length Use<i rel="pre">Code Here</i>
2. To Insert Short Codes Use<i rel="code">Code Here</i>
3. To Insert Quote Use<b rel="quote">Quote</b>
4. To Insert Image Use<i rel="image">Image URL</i>
5. To Insert Video Use<i rel="youtube">You Tube Url</i>

Note: You Can Also Convert Your Code Directly From The Conversion Box.
--------------------------------------------------------------------------------------------------------------------------------------------------------
Please drop your comment according with the topic and feedback with hyperlinks may be removed.Thank you.
Regards:
Team Bloggersstand