panduan lengkap tentang blogger - Berbicara widget popular post banyak orang senang akan hal itu dan berusaha untuk mengeditnya agar terlihat lebih keren lagi. Popular post adalah sekumpulan postingan yang banyak dikunjungi atau dibaca oleh pengunjung berdasarkan hari, minggu, bulan, atau selama-lamanya menurut perhitungan google analytic.
Widget popular post sangat berguna bagi blog karena dapat menambah jumlah page views dan mempermudah pengunjung dalam mengexplorasi blog anda.
baca juga : BERBAGAI JENIS WIDGET UNTUK MEMBUAT KOTAK E-MAIL
baca juga : BERBAGAI JENIS WIDGET UNTUK MEMBUAT KOTAK E-MAIL
Yang akan kita masukan hari ini adalah penomoran pada list popular post. Seperti halnya screenshot di samping atau anda dapat melihat langsung contohnya di popular posts blog saya. Sebelum melanjutkan jangan lewatkan untuk membaca post saya sebelumnya :
Anda dapat mengedit nomor tersebut dengan berbagai bentuk bangun, tetapi yang akan saya bahas kali ini dalam bentuk bulat dan kotak. Untuk menambahkan efek ini cukup mudah, hanya dengan memasukan kode CSS3 ke dalam template anda, kodenya murni CSS3 tanpa java script yang memberatkan loading blog anda. Syarat awalnya anda harus memasang terlebih dahulu popular post di blog anda. Ok, mari kita menuju ke topik pembahasannya, langkah - langkah nya dengan teliti agar dapat terpasang dengan baik.
:::* langkah pertama *:::
1. anda masuk dulu ke blog anda.
2. setelah masuk anda akan masuk ke dasboard blog anda dan pilih lambang segitiga kebalik di samping tanda pencil. untuk lebih jelas nya perhatikan gambar di bawah ini :
3. Cari tulisan Tambahkan Gadget dan liat posisi nya. jika anda ingin meletakan nya di samping cari tulisan Tambahkan Gadget nya yang di samping. atau terserah anda di sebelah mana yang penting ada tulisan Tambahkan gadget.
4. cari tulisan Entri Populer lalu hilangkan tanda ceklis pada "image thumbnail" dan juga "snippet". Serta gunakan 7-9 post yang akan tampil pada postingan, karena akan lebih bagus seperti itu. Terlihat nyaman dan clean. Sebenernya anda bisa menampilkan gambar dan snippet pada popular post, hanya saja akan terlihat tidak menyatu, kurang rapi dan anda harus mengedit lagi kode CSS3 ya untuk merapikannya.
5. Klik Simpan.
5. Klik Simpan.
:::* langkah kedua / terahir *:::
1. Anda masuk dulu ke blog anda.
2. Setelah masuk anda akan masuk ke dasboard blog anda dan pilih lambang
segitiga kebalik di samping tanda pencil lagi seperti langkah pertama. pilih tepat di bawah tulisan Tata Letak yaitu Template.
3. Lalu klik Edit HTML seperti gambar di bawah ini :
4. Jika sudah masuk di di dalam kotak pengeditan, lalu cari kode ]]></b:skin> untuk mencari dengan cepat klik satu kali di dalam kotak HTML lalu anda tekan saja CTRL + F nanti akan ada kolom kecil di pojok kanan atas di dalam kotak HTML tersebut. Lalu anda copy kan saja ]]></b:skin> di kolom tersebut lalu tekan ENTER. pasti langsung ketemu.
Jika sudah tingal masukan java script di bawah ini tepat di atas kode yang kita cari tadi yaitu kode ]]></b:skin>,
Kode java script nya:
3. Lalu klik Edit HTML seperti gambar di bawah ini :
4. Jika sudah masuk di di dalam kotak pengeditan, lalu cari kode ]]></b:skin> untuk mencari dengan cepat klik satu kali di dalam kotak HTML lalu anda tekan saja CTRL + F nanti akan ada kolom kecil di pojok kanan atas di dalam kotak HTML tersebut. Lalu anda copy kan saja ]]></b:skin> di kolom tersebut lalu tekan ENTER. pasti langsung ketemu.
Jika sudah tingal masukan java script di bawah ini tepat di atas kode yang kita cari tadi yaitu kode ]]></b:skin>,
Kode java script nya:
/*--- BENY HERMAWAN Popular Posts --- */
.popular-posts ul {
padding-left: 0px;
counter-reset: popcount;
}
.popular-posts ul li:before {
list-style-type: none;
margin-right: 15px;
padding: 0.3em 0.6em;
counter-increment: popcount;
content: counter(popcount);
font-size: 16px;
background: #292D30;
color: #ffffff;
position: relative;
font-weight: bold;
font-family: georgia;
float: left;
border: 2px solid #dddddd;
box-shadow: 1px 2px 9px #666666; }
.popular-posts ul li {
border-bottom: 1px dashed #dddddd;
}
.popular-posts ul li:hover {
border-bottom: 1px dashed #696969;
}
.popular-posts ul li a {
text-decoration:none; color:#5A5F63;
}
.popular-posts ul li a:hover {
text-decoration:none;
}
CATATAN :
- Untuk mengubah background nomor kotak, edit #292D30.
- Kode #ffffff adalah kode warna dari nomor dalam kotak penomoran.
- Secara default, kode diatas akan menghasilkan bentuk Kotak. Untuk mengubahnya kedalam bentuk bulat, anda cukup memasukan kode : border-radius:15px; setelah kode box-shadow: 1px 2px 9px #666666;
Ditulis Oleh : Unknown
Sobat sedang membaca artikel tentang : cara mengubah entri populer post dengan susunan angka| panduan lengkap tentang blogger.. Jangan lupa yah kritik saran nya karna itu sangat berguna. Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya karena blog ini di lindungi OLEH : DCMA kita sesama blogger harus saling mendukung bukan saling menyingkirkan salam blogger.
