Anggap Remeh - Widget Popular Post ini sangat mudah dipasang pada blog anda, berikut ini saya akan memandu langkah - langkah beserta lampiran kode script Popular Post Lebih Keren buat dipasang pada blog Anda, namun sebelumnya ikuti dua langkah dibawah ini
Baca juga : untuk mengetahui lebih jauh tentang Popular Post dan berbagai jenis style keren lainnya, silakan kunjungi
Cara Membuat Popular Post Pada Blogspot Lebih Menarik Dan Keren.
LANGKAH #1
Tambahkan Kode Script CSS
Cara #1, (Tidak perlu mengedit Template)
Tambahkan
Kode Script ke
Perancang Template Blogger - Tambahkan CSS khusus
Caranya ? Login Ke Blog, saat masuk ke Dashboard maka pilih >>
Template >>
Sesuaikan
Kemudian, pada
Perancang Template Blogger Pilih Menu
Tingkat lanjut >>
Tambahkan CSS
Setelah itu tambahkan kode CSS yang ada dibawah pada kotak berwarna putih diatas, kemudian
SIMPAN dengan cara menekan tombol
TERAPKAN KE BLOG.
Cara #2, (Edit Template)
Tambahkan
Kode Script ke
Perancang Template Blogger - Tambahkan CSS khusus
Caranya ? Login Ke Blog, saat masuk ke Dashboard maka pilih >>
Template >>
Edit HTML
Setelah itu temukan kode
</style> dengan cara menekan tombol
CTRL+F, jika sudah ketemu, tambahkan kode script dibawah tepat berada diatas </style>.
LANGKAH #2
Tambahkan Dan atur Widget Popular Post
Setelah Anda masuk ke Dashboard Blog, maka pilih >>
Tata Letak >>
Tambahkan Gadget >>
Entri Populer.
Setelah itu, pada tampilan checkbox , klik atau buat lambang centang pada
thumbnail gambar, setelah itu klik tombol
SIMPAN.
Selesai, silakan
refresh / segarkan kembali halaman blog Anda, dan lihat perubahannya.
Nah ini dia Style List
Cara Membuat Gambar dan Judul Artikel Popular Post Lebih Keren
Style 1
Demo gambarnya :
Kode Scriptnya :
/* POPULAR POST */
/* Gambar dan Title Style 1 */
.PopularPosts ul li a {font: 14px verdana; color: black;}
.PopularPosts .item-thumbnail {margin: 0 15px 0 0;}
.PopularPosts .item-title {padding-top:20px;}
.PopularPosts .item-thumbnail img
{background:#fff;
height:55px; width:55px;
border:1px solid #fff;
padding:3px;
-moz-border-radius: 20px 0px 20px 0px;
-webkit-border-radius: 20px 0px 20px 0px;
border-radius: 20px 0px 20px 0px;
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);}
Style 2
Demo gambarnya :
Kode Scriptnya :
/* POPULAR POST */
/* Gambar dan Title Style 2 */
.PopularPosts ul li a {font: 14px verdana; color: black;}
.PopularPosts .item-thumbnail {margin: 0 15px 0 0;}
.PopularPosts .item-title {padding-top:20px;}
.PopularPosts .item-thumbnail img
{background:#fff;
height:55px; width:55px;
border:1px solid #fff;
padding:3px;
-moz-border-radius: 20px 0px 20px 0px;
-webkit-border-radius: 20px 0px 20px 0px;
border-radius: 20px 0px 20px 0px;
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);}
Style 3
Demo gambarnya :
Kode Scriptnya :
/* POPULAR POST */
/* Gambar dan Title Style 3 */
.PopularPosts ul li a {font: 14px verdana; color: black;}
.PopularPosts .item-thumbnail {margin: 0 15px 0 0;}
.PopularPosts .item-title {padding-top:20px;}
.PopularPosts .item-thumbnail img
{background:#fff;
height:55px; width:55px;
border:1px solid #fff;
padding:3px;
-moz-border-radius: 30px/10px;
-webkit-border-radius: 30px/10px;
border-radius: 30px/10px;
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);}
Style 4
Demo gambarnya :
Kode Scriptnya :
/* POPULAR POST */
/* Gambar dan Title Style 4 */
.PopularPosts ul li a {font: 14px verdana; color: black;}
.PopularPosts .item-thumbnail {margin: 0 15px 0 0;}
.PopularPosts .item-title {padding-top:20px;}
.PopularPosts .item-thumbnail img
{background:#fff;
height:55px; width:55px;
border:1px solid #fff;
padding:3px;
-moz-border-radius: 100px 0px;
-webkit-border-radius: 100px 0px;
border-radius: 100px 0px;
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);}
Style 5
Demo gambarnya :
Kode Scriptnya :
/* POPULAR POST */
/* Gambar dan Title Style 5 */
.PopularPosts ul li a {font: 14px verdana; color: black;}
.PopularPosts .item-thumbnail {margin: 0 15px 0 0;}
.PopularPosts .item-title {padding-top:20px;}
.PopularPosts .item-thumbnail img
{background:#fff;
height:55px; width:55px;
border:1px solid #fff;
padding:3px;
-moz-border-radius: 20px 20px 0px 0px;
-webkit-border-radius: 20px 20px 0px 0px;
border-radius: 20px 20px 0px 0px;
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);}