Changing Their Own Colorful Popular Widget

Tweet

On the blog tutorial this time I will share about Popular Install Widget that will be changed or modified to be colorful. To edit / create blog posts widget popular course you first have to install widgets popular post and if it is already installed, it will be transformed into a colorful with additional CSS code and certainly not for the burden of the blog. Now the appearance of a popular post that has been colored as modified below.How To Install Widget:1. open your blog2. Select Template => Edit HTML3. Find the code]]> </ b: skin> and place the following CSS code above, PopularPosts ul,, Li, PopularPosts, PopularPosts li img,, PopularPosts li a,, PopularPosts li a {imgmargin: 0 0;padding: 0 0;list-style: none;border: none;background: none;elaborates: none;}, Ul {PopularPostsmargin: 5em. 0;list-style: none;Font: normal normal 13px / 1.5 "Arial Narrow", Arial, Sans-Serif;color: black;reset counter: num;}, PopularPosts ul li {imgdisplay: block;margin: 0 5em 00 00;width: 50px;height: 50px;float: left;}, Ul li {PopularPostsbackground-color: # eee;margin: 0 10%. 4em 0;padding: 5em 1.5 em. 5em. 5em;counter-increment: num;position: relative;}, PopularPosts ul li: before,, Ul li PopularPosts. item-title {font-weight: bold;font-size: 120%;Color: inherit;text-decoration: none;}, PopularPosts ul li: before {content: counter (num);display: block;position: absolute;background-color: black;color: white;width: 30px;height: 30px;line-height: 30px;text-align: center;top: 50%;Right: -10px;margin-top: -15px;-webkit-border-radius: 30px;-moz-border-radius: 30px;border-radius: 30px;}, PopularPosts ul li: n-friendly (1) {background-color: # 129 700; margin-right: 1%}, PopularPosts ul li: n-son (2) {background-color: # 0000FF; margin-right: 2%}, PopularPosts ul li: n-son (3) {background-color: # FFA200; margin-right: 3%}, PopularPosts ul li: n-son (4) {background-color: # B300FF; margin-right: 4%}, PopularPosts ul li: n-kids (5) {background-color: # FF00F2; margin-right: 5%}, PopularPosts ul li: n-kids (6) {background-color: # B70000; margin-right: 6%}, PopularPosts ul li: n-kids (7) {background-color: # 00B795; margin-right: 7%}4. Save