Kemarin ada yang bertanya tentang
cara membuat popular post warna warni, sehingga akhirnya saya putuskan untuk menuliskan
tutorial cara pasang widget popular post warna warni di blogger pada postingan kali ini.
Sebenarnya
cara membuat popular post warna warni di blogger tidak sulit kok, dan kita tidak perlu menambahkan script apapun, kita cukup
pasang widget popular post yang sudah disediakan oleh blogger dan setting sedikit kemudian tambahkan kode css pada template kita.
Untuk lebih jelasnya silakan ikuti tutorial berikut.
Cara Pasang Popular Post Warna Warni Di Blogger
Pastikan kamu sudah login ke blogger, jika sudah login maka langkah selanjutnya adalah:
- Klik menu Tata Letak / Layout
- Klik Tambahkan Gadget / Add a Gdget
- Pilih Widget Popular Post / Entri Populer
Cara Setting Widget Popular Post :
- Pada bagian Most viewed, silakan tentukan sendiri apakah ingin
menampilkan artikel populer sepanjang waktu, dalam 1 bulan atau dalam
satu minggu.
- Pada bagian Show ada bagian image thumbnail dan snippet serta
Display up to, nah pada bagian Display up to silakan tentukan berapa
artikel populer yang mau ditampilkan, sedangkan pada image thumbnail dan
snippet JANGAN DIBERI CENTANG.
- Setelah itu silakan Simpan
Sampai tahap ini widget artikel populer sudah bisa dilihat pada blog
kita, namun artikel populer nya belum warna warni, agar popular post
menjadi warna warni silakan lanjutkan baca tutorial ini , he heeee.
Ada 2 cara, silakan pilih yang menurut kamu lebih mudah.
Cara Pertama
Karena kamu sudah berada pada bagian Tata Letak / Layout, maka kamu
cukup klik tambah gadget lagi, dan pilih gadget HTML/JavaScript, setelah
itu masukkan kode css berikut di dalamnya
<style type='text/css'>
/*----- POPULAR POST WARNA WARNI -----*/
#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}
</style>
Selanjutnya simpan.
Cara Kedua
Klik menu Template (letak menunya di sebelah kiri)
Di sana kamu akan bisa melihat tampilan blog kamu sekarang, nah di
bawahnya ada tulisan Edit HTML, silakan klik tulisan Edit HTML tersebut,
kemudian klik Lanjutkan.
Cari kode ]]></b:skin> setelah itu pasang kode berikut di
atasnya. Agar lebih mudah menemukan kode tersebut silakan tekan Ctrl+f atau f3 untuk mempermudah pencarian kode.
/*----- POPULAR POST WARNA WARNI -----*/
#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}
Simpan pengaturan template kamu.
Nah itulah tutorial cara membuat / pasang widget popular post warna warni di blogger, semoga bermanfaat.