Skip to main content

How to add Multi Color Popular Posts Widget to Blog

How to add Multi Color Popular Posts Widget to Blog
Multi Color Popular Posts Widget 

Popular posts Widget tells your users about the famous posts on your blogs. It helps you to internal linking all your posts and helps you to decrease your bounce rate. In this article, I provide Multi color popular post widget for bloggers. It displays the posts on monthly, weekly basis or as you desire. It is a very lightweight widget that design in CSS3 and does not effect on the speed of your blog.

How to add Post in Blogger

  • Login to your blogger dashboard and select the your desire bolg.
  • Go to the blogger layout, add a gadget, and select the popular post gadget. 
  • Now go to the Template >>Edit HTML 
  • Find the]]  ></b:skin> 
  • Now just above it paste the below code.

<!-- Popular posts multi colored UI theme -->
#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:#ff4c54;width:97%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul li:first-child + li{background:#ff764c;width:87%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:84%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:81%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:78%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:75%}
#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:#f6993d;width:72%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li +li{background:#f59095;width:69%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#c7f25f;width:66%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#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 + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;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:70px;height:70px;}
#PopularPosts1 ul li a{font-size:13px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}
#PopularPosts1 img{-moz-border-radius: 130px;
-webkit-border-radius: 130px;
border-radius: 130px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
padding:4px;
border:1px solid #fff !important;
}
#PopularPosts1 img:hover {
border-radius: 0 0 0 0;
-moz-transform: scale(1.2) rotate(-711deg) ;
-webkit-transform: scale(1.2) rotate(-711deg) ;
-o-transform: scale(1.2) rotate(-711deg) ;
-ms-transform: scale(1.2) rotate(-711deg) ;
transform: scale(1.2) rotate(-711deg) ;
}
<!-- popular posts multicolored UI theme -->

Now save your blog and look your popular post wedgit as shown above. I hope you like this simple tutorial, if you like please share it social media with your friends.
Labels:

Comments

Post a Comment

Popular posts from this blog

How to increase backlinks in 2015? Free backlink builder

A backlink is one type of algorithm that refers to incoming links to your site or pages. Backlinks play significant role to improve your search engine ranking and get more audience. They help to earn good money from the internet. Today’s post I am introducing top 10 backlinks building sites in 2015. Many online websites allow you to build some backlinks for your site. Let us view the sites to create free backlinks Imtalk . Org Imtalk basically a forum and offers many tools. It submits your sites more than 2500 pages. It offers many worthy tools like site directory submitter, bookmarks page etc. Imtalk create pages on different sites with a backlink to your site. Freebacklinkcreator . Com It submits your site thousands of do follow backlink websites. It offers speedy backlinks to your blog or website. A2z-Seo-Backlinks.Com It is a powerful tool to submit your link on different sites. The great feature of this backlink generator is that it also ping your link to search eng...
13 comments
Read more

Best web hosting sites for WordPress in 2015

It is important for us to have the best website or blog for the business promotion. A good blog or website depends upon the good hosting company. Only a right web hosting company fulfills our dreams. Thousands of web hosting companies are available in their global market and their number raising day by day. Among those who many companies available in the market, in this article I introduce you top 10 hosting companies. 1. BlueHost It is always recognized as the leader in the industry. Its rates very cheap and low-cost. It is approximately 20,000 website or blog hosts every month in the market. They are in business since 1996 and become the one of the best hosting company. It has excellent servers, customer support center and good hosting packages. It offers unlimited disk space, unlimited domain hosting, unlimited email accounts and many more. Another beneficial feature is that it offers a good referral program for earning money. 2. Hostgator It is one of the greatest webs...
Post a Comment
Read more

How to Add Responsive Social Sharing Buttons for Mobile in Blog

Mobile phones and tablets become the great source of traffic for blogs and websites. Google also announced that mobile friendly sites are the key factor in search ranking. Google implies new mobile friendly search ranking policy to April 2015. Therefore, it becomes more important for every blogger or webmaster to make his/her sites mobile friendly for better ranking in search engines. After search engines, social media is the great source of traffic for blogs. Unfortunately, in blogger mobile views, social sharing buttons do not appear properly. Today I am showing a way How to Add Responsive Social Sharing Buttons for Mobile in Your Blog. How to add Social Sharing Buttons Go to AddThis and create a free account  Now login your account and go to the tool.  Scroll down, select mobile toolbar, and click on setup button  Now you can customize your mobile buttons according to your wishes like their color, positions follow, share buttons etc. (If you select follow ...
2 comments
Read more