Cara membuat widget popular post warna-warni merupakan lanjutan dari tutorial saya sebelumnya yang berjudul
Cara Membuat Label Blog Warna-warni. Sama seperti label, entri populer yang warna warni juga akan memperindah tampilan blog anda. Selain itu, warna yang mencolok pasti tidak mungkin tidak akan dilihat oleh mata pengunjung. Sehingga akan memperbesar peluang pengunjung mengklik artikel yang populer tersebut.
Terus
bagaimanakah cara membuat widget popular post warna-warni? Apakah sulit mebuat widget tersebut? Tentu jawabannya mudah saja, mari kita mulai langkah-langkahnya.
Langkah Pertama :
- Seperti biasa, pasang dulu widget Entri Populer ( Tata Letak => Tambah Gadget => Entri Populer ). Saran saya jangan isi kutipan, karena akan kurang enak dilihat. Kemudian simpan.
Langkah Kedua :
- Pindah ke menu Template => EDIT HTML
- Kemudian cari kode [[></b:skin> (gunakan CTRL+F agar lebih mudah)
- Setelah itu salin kode di bawah tepat sebelum kode [[></b:skin>
/* Modifikasi Widget Popular Post Warna Warni */
.PopularPosts ul,
.PopularPosts li,
.PopularPosts li img,
.PopularPosts li a,
.PopularPosts li a img {
margin:0 0;
padding:0 0;
list-style:none;
border:none;
background:none;
outline:none;
}
.PopularPosts ul {
margin:.5em 0;
list-style:none;
font:normal normal 13px/1.4 "Arial Narrow",Arial,Sans-Serif;
color:black;
counter-reset:num;
}
.PopularPosts ul li img {
display:block;
margin:0 .5em 0 0;
width:50px;
height:50px;
float:left;
}
.PopularPosts ul li {
background-color:#eee;
margin:0 10% .4em 0;
padding:.5em 1.5em .5em .5em;
counter-increment:num;
position:relative;
}
.PopularPosts ul li:before,
.PopularPosts ul li .item-title a {
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;
}
/* Set color and level */
.PopularPosts ul li:nth-child(1) {background-color:#E11E28;margin-right:2%}
.PopularPosts ul li:nth-child(2) {background-color:#FD3C03;margin-right:2%}
.PopularPosts ul li:nth-child(3) {background-color:#FECB09;margin-right:2%}
.PopularPosts ul li:nth-child(4) {background-color:#6EBE27;margin-right:2%}
.PopularPosts ul li:nth-child(5) {background-color:#149A48;margin-right:2%}
.PopularPosts ul li:nth-child(6) {background-color:#5BBFF1;margin-right:2%}
.PopularPosts ul li:nth-child(7) {background-color:#61469C;margin-right:2%}
.PopularPosts ul li:nth-child(8) {background-color:#863E86;margin-right:2%}
.PopularPosts ul li:nth-child(9) {background-color:#863E62;margin-right:2%}
.PopularPosts ul li:nth-child(10) {background-color:#815540;margin-right:2%}
- Langkah terakhir tinggal simpan template
Bagaimana? Mudah kan? Kini widget anda sudah berwarna-warni. Tunggu juga tutorial-tutorial saya selanjutnya. Sekian dan terima kasih.
Title : Cara Membuat Widget Artikel Populer Warna-warni Seperti Evo Magz
Description : Cara membuat widget popular post warna-warni merupakan lanjutan dari tutorial saya sebelumnya yang berjudul Cara Membuat Label Blog Warna...