Bisnis Online I Affiliasi I Tutorial Blog I Tips & Trick I Motivation I SEO

Cara Membuat Popular Post Warna-Warni Bertingkat

cara bikin popular post keren berwarna
Popular Post adalah menu wajib yang harus ada dalam sebuah website atau blog. Dengan memasang widget tersebut, jumlah pageview yang akan kita dapatkan juga meningkat tajam. Terlebih jika tampilan popular post memiliki warna cerah yang memikat perhatian. Teknik ini telah banyak digunakan oleh para pembuat template responsive.

Untuk membuat tampilan Popular Post Keren seperti itu, kita hanya perlu menambahkan kode css yang mengatur widget tersebut. Jangan khawatir, kode css ini tidak akan memberatkan loading blog sobat. Yang ada justru tampilan situs sahabat akan tampak lebih profesional dari sebelumnya. Cara memasangnya juga sangat mudah. Kita hanya perlu menyalin seluruh kode yang ada ke dalam sebuah template yang kita pakai.

Berikut tutorial lengkap membuat popular post keren berwarna:
1. Login ke www.blogger.com
2. Klik template kemudian edit html
3. Cari kode ]]></b:skin> dengan bantuan CTRL + F
4. Salin seluruh kode dibawah ini tepat diatas kode tersebut

/*Popular Post*/
.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:.4em 0; list-style:none; font:normal normal 13px/1.4 &quot;Arial Narrow&quot;,Arial,Sans-Serif; color:black; counter-reset:num;}
.PopularPosts ul li img {display:block; margin:0 .4em 0 0; width:50px; height:50px; float:left; padding-left: 6px;}
.PopularPosts ul li {background-color:#eee; margin:0 10% .3em 0; padding:.4em 1.4em .4em .4em; 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:25px; height:25px; line-height:25px; text-align:center; top:60%; right:-10px; margin-top:-15px; -webkit-border-radius:25px; -moz-border-radius:25px; border-radius:25px;}

/* Design Warna */
.PopularPosts ul li:nth-child(1) {background-color:#E11E28;margin-right:1%}
.PopularPosts ul li:nth-child(2) {background-color:#FD3C03;margin-right:2%}
.PopularPosts ul li:nth-child(3) {background-color:#FECB09;margin-right:3%}
.PopularPosts ul li:nth-child(4) {background-color:#6EBE27;margin-right:4%}
.PopularPosts ul li:nth-child(5) {background-color:#149A48;margin-right:5%}
.PopularPosts ul li:nth-child(6) {background-color:#5BBFF1;margin-right:6%}
.PopularPosts ul li:nth-child(7) {background-color:#61469C;margin-right:7%}
.PopularPosts ul li:nth-child(8) {background-color:#863E86;margin-right:8%}
.PopularPosts ul li:nth-child(9) {background-color:#863E62;margin-right:9%}
.PopularPosts ul li:nth-child(10) {background-color:#815540;margin-right:10%}


5. Simpan template dan lihatlah hasilnya.

Demikianlah tutorial sederhana membuat popular post bertingkat yang keren banget. Gunakan trik ini jika template yang anda unduh secara gratis kurang memuaskan. Dengan memodifikasi sedikit, template yang kita gunakan akan jauh lebih bagus daripada versi original.
SHARE :

Cara Unik Masak Mie Instan

HEBOH..!!! - Kata itulah yang mungkin akan sahabat katakan tatkala melihat VIDEO UNIK masak mie instan berikut https://youtu.be/1MEs9a-973U.
2 Komentar untuk "Cara Membuat Popular Post Warna-Warni Bertingkat"

Trik sederhana ini ternyata mampu meningkatkan pageview.

jadi kaya ada pelangi di blog ya :) terima kasih tutorialnya

1. Silakan buka Daftar Isi untuk melihat artikel menarik lainnya
2. Komentar sobat adalah investasi besar untuk meningkatkan jumlah pengunjung ke Blog Sobat

Back To Top