Cara Membuat Gambar dan Judul Artikel Popular Post Lebih Keren

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);}