Kangen rasanya setelah beberapa hari tidak membuka dashboard blog saya
:) Apalagi saat membuka, banyak komentar yang belum bisa saya tanggapi.
Nah, pada kesempatan yang cukup melelahkan ini saya mencoba berbagi
tutorial blogspot tentang bagaimana cara memodifikasi tampilan Popular Post atau lazimnya dalam bahasa Indonesia disebut sebagai artikel Populer.
Maksud disini memodifikasi tampilan popular post adalah merubah dari
yang sebelumnya standar dan dirasa kurang menarik karena kurang
pernak-pernik, kali ini Mas Adhie mencoba berbagai solusi masalah tersebut dengan menambahkan kode CSS untuk memperindah tampilan popular post blog sobat semua.
Untuk namanya karena pelangi (warna-warni) maka disebut sebagai Rainbow
Popular Post. Kurang lebih Screenshot nya seperti gambar dibawah ini.
Panduan pembuatan Rainbow Popular Post dengan CSS.
1. Pertama, mari tambahkan widget popular post, atur sedemikian rupa.
Lebih baik diberikan thumbnail dan tidak diberikan tulisan (Bisa diatur
menurut selera Anda)
2. Kemudian catat widgetid nya, disini widget ID saya adalah
PopularPosts1. Jika sudah masuk ke menu template > Edit HTML >
cari kode ]]></b:skin>
3. Letakkan kode dibawah ini, tepat diatas kode ]]></b:skin>
/* Rainbow Popular Post Style Start */4. Klik Pratinjau terlebih dahulu, jika sudah tidak terjadi error pada widget maupun template, silahkan klik simpan untuk menyimpan perubahannya.
#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:90%}
#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;line-height:1em;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:12px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}
#PopularPosts3 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;
background: #F2F2F2;}#PopularPosts1 img:hover {
-moz-transform: scale(1.2) rotate(-560deg) ;
-webkit-transform: scale(1.2) rotate(-560deg) ;
-o-transform: scale(1.2) rotate(-560deg) ;
-ms-transform: scale(1.2) rotate(-560deg) ;
transform: scale(1.2) rotate(-560deg) ;
}
/* Rainbow Popular Post Style End */
Semoga widget popular posts ini bisa menambah warna di blog Anda,
sehingga tidak terlalu monoton yang pada akhirnya lebih cepat membuat
para pembaca merasa bosan. Selamat mencoba dan Happy blogging ^_^
Post a Comment
Post a Comment
This Blog is DOFOLLOW, Well Please Comment and are not included in spam Thank You..
Cheers,
Admin