How to add a stylish mouse hover popular post widget into blogger blog - As you guys already know that, every blogger loves to show their popular articles with the help of a popular post widget. And at this present time there is so many stylish and dynamic popular post widgets are available on the web. But the actual problem is that every widgets are old and you can see a same widget on too many blogs. So if you are not the same blogger like others (e.g who don't like to display a same widget on his blog) and you want to make your blog unique and stylish by adding some new widgets on your blog, then here is a good news for you. Yes, today with the help of this post I'm going to show you how you can easily setup a colored and mouse hover popular post widget on your blog without having any problems.
Before adding this widget into your blog, make sure to take a look of this widget by clicking on the below demo button.
If you like this widget and you want to install into your own blog then follow the below simple steps.
How Add Mouse Hover Popular Post Widget?
First go to your blogger dashboard - Login
Now go to "Template" section and then click on the "Edit html" button.
After that, find the below code by pressing "Ctrl + F" key together from your keyboard.
]]></b:skin>
Now copy the below CSS code and paste it just before ]]></b:skin>
/* Popular Posts */
.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);}
Once again find the below code.
</body>
After that, copy the below JavaScript code and paste it just before </body>
<script src='https://googledrive.com/host/0BxB51PrIeBaiQ2pvZHJXY2FqVk0' type='text/javascript'></script>
Now click on the orange save template button to apply the changes.
That's it! I hope you like this widget! Stay tuned for more dynamic widgets! Thanks for reading @Prince
0 Comment to "Add Colored Mouse Hover Popular Post Widget"
Post a Comment