Inilah Cara Mudah Membuat Widget Popular Post Warna-Warni di Blog - Memodifikasi widget popular post blogger menjadi warna - wani sangatlah mudah , kita hanya perlu menambahkan beberapa css yang bisa membuat widget tersebut warna-warni , kmaren ada yang tanya " eh sob gimana cara membuat widget artikel populer warna-warni ? kemaren kok blog tetangga populer postnya keren banget ,bisa warna - warni gitu . hehhehe . ok kali ini saya akan menjawab sekaligus membagikan tutorialnya kepada anda
Oh iya bagi yang belum tahu seperti apakah
widget popular post yang warna-warni anda bisa melehat gambar demo dibawah ini :
Berikut Cara Mudah Membuat Widget Popular Post Warna-Warni di Blog
- Pertama pastikan anda sudah pasang widget poular post
- Kemudian pergi ke editor template [ edit html ]
- Pasang kode css ini diatas kode
]]></b:skin>
atau </style>
/*----- TAB POPULER -----*/
#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 {background:#DF01D7;width:90%}
#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:#B041FF;width:90%}
#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{background:#F52887;width:90%}
#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{background:#7ee3c7;width:90%}
#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:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}
#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;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}
- Terkahir simpan template dan lihat hasilnya
Taraa kini widget popular post anda sudah menjadi warna - warni , hembs mudah bukan cara bikin popular post jadi warna-warni , bila ada yang ingin ditanyakan silahkan komen dibawah ya
11 Komen Cara Mudah Membuat Widget Popular Post Warna-Warni di Blog
makasih infonya mas, membantu sekali :D
Terimakasih gan,,, sangat membantu...
Gan apa gunanya sih pasang popular post bewarna gini ?
Apa pengaruh terhadap SEO ?
Kunjungi blog saya ya mas http://typepedia.blogspot.com/2013/10/memasang-widget-popular-post-di-blog.html
mantaps bang, sangat bermanfaat untuk pemula. ijin bookmark untuk belajar membuat template sendiri
sangat membantu,,,,
terima kasih infonya min.
berhasil dipasang, makasih panduannya sob
siip gan, makasih banget
sip kren ya
makasi infonya mas.. sangat bermanfaat. smoga semakin sukses
saya gak berhasil ...
tutorial di blog lain berhasil
= > Silahkan berkomentar sesuai artikel diatas
= > Berkomentar dengan url ( mati / hidup ) tidak akan di publish