Cara Membuat Popular Post Simple di Blog - Maru - PC

Monday, August 25, 2014

Cara Membuat Popular Post Simple di Blog


Sebelumnya saya pernah membagikan sebuah tutorual yang bertemakan cara membuat recent post yang merupakan salah satu widget yang sampai saat ini masih saya pakai untuk mendukung blog ini. Widget seperti ini sangat penting dalam mengembangkan pengunjung untuk memasuki atau membaca artikel-artikel yang anda baru saja bagikan ataupun yang tidak begitu ramai dikunjungi para pembaca maupun blogger yang sedang mencari informsi di blog anda.

Pada kesempatan kali ini, saya memutuskan untuk membagikan salah satu tutorual yang juga tidak kalah penting dalam dunia blogger yaitu cara membuat popular posts simple di blog. Widget ini mempunyai peran yang juga penting untuk membantu mengembangkan artikel yang sedahulunya sudah anda tulis.

Widget yang saya bagikan ini tidaklah memberatkan blog dikarenakan designnya yang cukup simle dan enak untuk dipandang mata. Untuk lebih jelasnya anda dapat melihat demonya di blog ini, tepatnya di samping kanan blog ini.

Untuk pemasangan, anda hanya perlu mengikuti tutorual berikut :

1. Login ke Blogger dan masuk ke blog anda, kemudian pilih Tata Letak dan kemudian klik Tambahkan Gadget.
2. Akan muncul menu pop-up, pilih Entri Terpopuler. Atur widget yang akan anda pasang.


3. Cari kode </style> atau ]]></b:skin>, kemudian paste kode berikut diatas kode </style> atau ]]></b:skin> tadi.
#PopularPosts1 li:nth-child(odd) {background: #F9F9F9;}
#PopularPosts1 li:nth-child(even) {background: #FFF;}
#PopularPosts1 li:first-child {border-top: 1px solid #f1f1f1;}
#PopularPosts1 li {padding-right: 1em !important;padding-left: 1em !important;}
#PopularPosts1 ul li:before {content: counters(trackit,&quot;.&quot;);padding: 0 .1em 0 0;font-size: 20px;font-weight: bold;color: #D8D8D8;float: left;}
.PopularPosts .item-thumbnail,.PopularPosts .item-snippet {display: none;}
#PopularPosts1 a:hover {text-decoration: underline;}
#PopularPosts1 a {color: #3F3F3F;font-size: .9rem;}
.PopularPosts .item-title {padding: 0 0 .2em 1.5em;}
4. Terakhir, simpan template dan lihat hasilnya.

Jangan lupa meninggalkan jejak di kolom komentar dibawah, jika anda mempunyai tips buat dibagikan kepada sahabat blogger lain, anda bisa membagikannya di kolom komentar, terima kasih.
Comments