Rainbow Popular Post Widget For Blogger

How to add and an colorful rainbow style popular post widget in your blogspot blog- The importance of the popular post widget is not disparagement because it helps our visitors to see the popular articles on our blog. This is the main reason that I have already published some cool popular posts widgets on my blog, you can read those articles here (New popular post widget for blogger ! Add colored popular post widget in blogger). But today with the help of this article I'm going to give you a rainbow style popular post widget for your blog. This popular post widget is different comparing to others, the reason I'm telling you because it's looking more attractive and dynamic.

So before you install this widget in your own blog make sure to take a look of this widget by clicking on the below demo button for better decision.

Demo

Okay, if you like this widget and want to add it on your own blog, then follow the below instructions and install this widget without having any problem.

How To Install Rainbow Popular Post Widget In Blogger?

First go to your blogger dashboard - login

Now go to the "Template" section and then click on the "Edit html" button.

In template editor find ]]></b:skin> or </Style> code with the help of search box (The search box will appear by pressing the "Ctrl + F" key together from your keyboard).

After that copy the below css code and paste it just before ]]></b:skin> or </style> code.

/* Popular Post keren warna-warni */
.PopularPosts ul,.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{list-style:none;border:none;background:none;outline:none;margin:0;padding:0}.PopularPosts ul{list-style:none;font-size:15px;color:#fff;margin:0 !important;width:100% !important;font-weight:bold}.PopularPosts ul li img{display:block;transition:all 400ms ease-in-out;width:60px;height:60px;float:left;margin:0 15px 0 0;border:4px solid rgba(0,0,0,0.2)}.PopularPosts ul li img:hover{border:4px solid rgba(0,0,0,0.5);transition:all 400ms ease-in-out}.PopularPosts ul li{background-color:#eee;counter-increment:num;position:relative;margin:0 10% 0 0;padding:10px;height:70px;}.PopularPosts .item-title{text-overflow: ellipsis;overflow:hidden;height:64px}.PopularPosts ul li:before,.PopularPosts ul li .item-title a{font-size:15px !important;color:inherit;text-decoration:none}.PopularPosts ul li:before{content:counter(num);display:block;position:absolute;font-size:35px !important;font-weight:700;color:rgba(0,0,0,0.2);top:40%;left:9px;}
.PopularPosts ul li{margin:0 !important;padding:10px 5px 10px 40px}
.PopularPosts ul li:nth-child(1){background-color:#5d93b2}.PopularPosts ul li:nth-child(2){background-color:#67b8b3}.PopularPosts ul li:nth-child(3){background-color:#67c27a}.PopularPosts ul li:nth-child(4){background-color:#ee9f7e}.PopularPosts ul li:nth-child(5){background-color:#ea6868}.PopularPosts ul li:nth-child(6){background-color:#b65757}.PopularPosts ul li:nth-child(7){background-color:#e9c462}.PopularPosts ul li:nth-child(8){background-color:#84d558}.PopularPosts ul li:nth-child(9){background-color:#4dd38c}.PopularPosts ul li:nth-child(10){background-color:#b44d7a}

And then do not forget to save your template by clicking on the orange save template button.

Now reload your blog and see the magic.

That's it! I hope you like this popular post widget! Stay tuned for more cool widgets! Thanks for reading @Prince

Share this

Tweet

Share

Share

Share

Share

RELATED ARTICLES