How to Customize Popular Posts in Blog with Colorful Background

               Want to Customize or change the look of simple Popular Posts in Blogger Blog? Then here is an article for you. You can change the Popular Posts with colorful background to make them attractive. There are many advantages of having Popular Posts in the sidebar of the blog.
               
               The widget of Popular Posts keeps very advantages and importance. It helps to the new visitors to attract them to pick the top trending articles on the blog.

               Blogger's official Popular Posts widget is very simple in viewing. You can customize or change its look from simple to attractive. This is the magic of CSS (Cascading Style Sheet). This CSS Code make the Popular Posts widget attractive with colorful backgrounds with gradients.

Customize Popular Posts :

• First open Blogger in your favorite web browser and Log In to your account and open your blog in which you want to customize Popular Posts.
• Now click on Layout option to open it. Now select Popular Posts widget in it.
• Now uncheck the Image and Snippet option and select 9 or 10 post to show.

• Now open Template option and click on Edit HTML.
• Now find ]]></b:skin> and paste the CSS code above it and Save the template. Copy below CSS code.

/*--- KBTRICKS.COM POPULAR WIDGET STYLE STARTS HERE---*/ #PopularPosts1 ul li a:hover{color:#fff;text-decoration:none} #PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;} #PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px} #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, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {width:90%;background-image: -webkit-linear-gradient(top,rgba(182, 56, 56, 0),rgba(151, 58, 155, 0.79));background: -moz-linear-gradient(top,rgba(182, 56, 56, 0),rgba(151, 58, 155, 0.79));background-color:#DF01D7;} #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{width:90%;background-image: -webkit-linear-gradient(top,rgba(182, 56, 56, 0),rgba(143, 58, 155, 0.79));background: -moz-linear-gradient(top,rgba(182, 56, 56, 0),rgba(143, 58, 155, 0.79));background-color:#B041FF;} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{width:90%;background-image: -webkit-linear-gradient(top,rgba(182, 56, 56, 0),rgba(175, 55, 79, 0.79));background: -moz-linear-gradient(top,rgba(182, 56, 56, 0),rgba(175, 55, 79, 0.79));background-color:#F52887;} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"} #PopularPosts1 ul li:first-child + li + li + li + li +li{width:90%;background-image: -webkit-linear-gradient(top,rgba(182, 56, 56, 0),rgba(58, 155, 147, 0.53));background: -moz-linear-gradient(top,rgba(182, 56, 56, 0),rgba(58, 155, 147, 0.53));background-color:#7ee3c7;} #PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"} #PopularPosts1 ul li:first-child + li + li + li + li + li +li{width:90%;background-image: -webkit-linear-gradient(top,rgba(182, 56, 56, 0),rgba(155, 128, 58, 0.53));background: -moz-linear-gradient(top,rgba(182, 56, 56, 0),rgba(155, 128, 58, 0.53));background-color:#f6993d;} #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"} #PopularPosts1 ul li:first-child + li + li + li + li{width:90%;background-image: -webkit-linear-gradient(top,rgba(182, 56, 56, 0),rgba(58, 136, 155, 0.72));background: -moz-linear-gradient(top,rgba(182, 56, 56, 0),rgba(58, 136, 155, 0.72));background-color:#33c9f7;} #PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"} #PopularPosts1 ul li:first-child + li + li + li{width:90%;background-image: -webkit-linear-gradient(top,rgba(182, 56, 56, 0),rgba(69, 155, 58, 0.77));background: -moz-linear-gradient(top,rgba(182, 56, 56, 0),rgba(69, 155, 58, 0.77));background-color:#c7f25f;} #PopularPosts1 ul li:first-child + li + li + li:after{content:"4"} #PopularPosts1 ul li:first-child + li + li{width:90%;background-image: -webkit-linear-gradient(top,rgba(182, 56, 56, 0),rgba(116, 116, 48, 0.45));background: -moz-linear-gradient(top,rgba(182, 56, 56, 0),rgba(116, 116, 48, 0.45));background-color:#ffde4c;} #PopularPosts1 ul li:first-child + li + li:after{content:"3"} #PopularPosts1 ul li:first-child + li{width:90%;background-image: -webkit-linear-gradient(top,rgba(182, 56, 56, 0),rgba(146, 96, 43, 0.73));background: -moz-linear-gradient(top,rgba(182, 56, 56, 0),rgba(146, 96, 43, 0.73));background-color:#ff764c; } #PopularPosts1 ul li:first-child + li:after{content:"2"} #PopularPosts1 ul li:first-child{width:90%;background-image: -webkit-linear-gradient(top,rgba(182, 56, 56, 0),rgba(126, 18, 18, 0.45));background: -moz-linear-gradient(top,rgba(182, 56, 56, 0),rgba(126, 18, 18, 0.45));background-color:#FF4C54;} #PopularPosts1 ul li:first-child:after{content:"1"} #PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none} #PopularPosts1 ul li{position: relative; margin: 6px 0; border-radius: 25px 0px 25px 0px; border: 2px solid #F7F7F7; box-shadow: 3px 3px 3px black;} /*--- KBTRICKS.COM POPULAR WIDGET STYLE ENDS HERE---*/

         If you have any kind of problem about this article or CSS code, tell us by comments. Also Share it with your friends. Also Subscribe to our Updates.

How to Customize Popular Posts in Blog with Colorful Background 2013-05-20T07:41:00-07:00 Rating: 4.5 Diposkan Oleh: Iwa Crot