Cara Membuat Popular Post/Entry Popular Warna Warni Keren. Apa sich sebenarnya fungsi dari widget ini.?? Fungsi dari widget Popular Post adalah Untuk Menampilkan Artikel/Posting Di Blog kita Yang Paling Banyak di baca oleh Visitor/ pengunjung Blog kita, sebenarnya sudah ada widget bawaan Popular Post di Blogspot, namun menurut saya tampilanya kurang menarik atau terlalu monoton.
Ada beberapa Model Widget Popular Post yang bisa sobat Aplikasikan ke Blog sobat. Kali ini saya akan berbagi bagaimana cara membuat Widget Popular Post atau istilah lainya adalah Entri Popular.
Contoh widget yang akan saya share ini bisa anda lihat pada gambar di samping posting ini, di mana style atau tampilanya adalah kolom vertikal, Nanti sobat bisa memodifikasi tampilanya, Mau yang bergambar/Thumnail ataupun tidak bergambar. Oke sobat Langsung saja di simak Tutorial lengkapnya di bawah ini:
Cara Membuat Widget Popular Post/Entry Popular Warna Warni Keren Model 1
LANGKAH PERTAMA
Pastikan Sobat Blogger Sudah Menambahkan Widget Popular Post di blog sobat. Kalau belum silahkan ikuti Tips ini:
1. Masuk ke Account Blogger sobat.
2. Pilih LayOut/Tata Letak.
3. Pilih Add Gadget/Tambahkan Gadget.
4. Klik "ENTRY POPULER".
5. Pastikan setting pengaturan sesuai selera anda. (lihat gambar di bawah)
Centang Thumnail Gambar jika Popular Post nanti di sertai gambar atau
Centang Cuplikan jika popular Post nanti disertai Deskripsi/keterangan artikelnya.
6. Selesai Simpan/Save.
LANGKAH KE DUA
1. Silahkan Sobat Masuk ke Template Kemudian Klik Edit HTML.
2. Silahkan Sobat Cari Kode seperti ini ]]></b:skin> atau </style>
(gunakan Ctrl+F untuk mempermudah pencarian).
3. Copy Kode Html Di bawah ini dan Pastekan tepat di atas Kode ]]></b:skin> atau </style>
Kode Html
/* Custom CSS for Blogger Popular Post Widget */
.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;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!important;padding:.5em 1.5em .5em .5em!important;counter-increment:num;position:relative}
.PopularPosts ul li:before,.PopularPosts ul li .item-title a,.PopularPosts ul li a{font-weight:bold;color:#000!important;text-decoration:none}
.PopularPosts ul li:before{content:counter(num)!important;display:block;position:absolute;background-color:#333;color:#fff!important;width:22px;height:22px;line-height:22px;text-align:center;top:0;right:0;padding-right:0!important}
/* Set color and level */
.PopularPosts ul li:nth-child(1){background-color:#A51A5D;margin-right:1%!important}
.PopularPosts ul li:nth-child(2){background-color:#F53477;margin-right:2%!important}
.PopularPosts ul li:nth-child(3){background-color:#FD7FAA;margin-right:3%!important}
.PopularPosts ul li:nth-child(4){background-color:#FF9201;margin-right:4%!important}
.PopularPosts ul li:nth-child(5){background-color:#FDCB01;margin-right:5%!important}
.PopularPosts ul li:nth-child(6){background-color:#DEDB00;margin-right:6%!important}
.PopularPosts ul li:nth-child(7){background-color:#89C237;margin-right:7%!important}
.PopularPosts ul li:nth-child(8){background-color:#44CCF2;margin-right:8%!important}
.PopularPosts ul li:nth-child(9){background-color:#01ACE2;margin-right:9%!important}
.PopularPosts ul li:nth-child(10){background-color:#94368E;margin-right:10%!important}
.PopularPosts .item-thumbnail{margin:0 0 0 0}
.PopularPosts .item-snippet{font-size:11px}
.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;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!important;padding:.5em 1.5em .5em .5em!important;counter-increment:num;position:relative}
.PopularPosts ul li:before,.PopularPosts ul li .item-title a,.PopularPosts ul li a{font-weight:bold;color:#000!important;text-decoration:none}
.PopularPosts ul li:before{content:counter(num)!important;display:block;position:absolute;background-color:#333;color:#fff!important;width:22px;height:22px;line-height:22px;text-align:center;top:0;right:0;padding-right:0!important}
/* Set color and level */
.PopularPosts ul li:nth-child(1){background-color:#A51A5D;margin-right:1%!important}
.PopularPosts ul li:nth-child(2){background-color:#F53477;margin-right:2%!important}
.PopularPosts ul li:nth-child(3){background-color:#FD7FAA;margin-right:3%!important}
.PopularPosts ul li:nth-child(4){background-color:#FF9201;margin-right:4%!important}
.PopularPosts ul li:nth-child(5){background-color:#FDCB01;margin-right:5%!important}
.PopularPosts ul li:nth-child(6){background-color:#DEDB00;margin-right:6%!important}
.PopularPosts ul li:nth-child(7){background-color:#89C237;margin-right:7%!important}
.PopularPosts ul li:nth-child(8){background-color:#44CCF2;margin-right:8%!important}
.PopularPosts ul li:nth-child(9){background-color:#01ACE2;margin-right:9%!important}
.PopularPosts ul li:nth-child(10){background-color:#94368E;margin-right:10%!important}
.PopularPosts .item-thumbnail{margin:0 0 0 0}
.PopularPosts .item-snippet{font-size:11px}
4. Selesai Save/Simpan.
Baca Juga :
Cara Membuat Widget Popular Post Keren Warna Warni Model 3
Cara Membuat Widget Popular Post Keren Warna Warni Model 2
Demikian Tutorial tentang Cara Mudah membuat Widget Keren Popular Post/ Entry Popular Warna warni Model 1. semoga bermanfaat bagi sobat blogger semua.
SELAMAT BERKARYA.. HAPPY BLOGGING..
Artikel Terkait
Tidak ada komentar:
Posting Komentar