CARA MEMBUAT "POPULAR POST" PADA BLOG SIMPLE TAPI KEREN

Selamat datang di blog R3N_DESIGN Digital.net

salam sejahtera buat sobat blogger semua,

Sobat blogger, terkhususnya sobat blogger pemula. Anda sudah lihat kaaan contoh gambar diatas?!. Yaaaa, itu adalah contoh gambar POPULAR POST (kalau di blog saya, saya beri judul ARTIKEL YANG PALING BANYAK DIBACA) yang ada di setiap blog dan pada blog saya sendiri sudah saya desain seperti gambar diatas. 

Jika diantara sobat blogger semua ada yang suka dengan contoh gambar tersebut silahkan pasang pada blog anda, dan ini tutorialnya.

1. Buka akun blogger anda Disini
2. Pilih menu template > klik Edit HTML.
3. Lalu cari kode seperti ini ]]></b:skin> dengan cara taruh sembarang kursor pada tabel Edit HTML terus tekan ctrl+f pada keyboard.
4. Setelah ketemu kode ]]></b:skin> anda copy pastekan kode dibawah ini tepat diatas kode ]]></b:skin>

.popular-posts ul{padding-left:0px;}
.popular-posts ul li {
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 5px 20px !important;
border: 1px solid #8B0000;
-moz-box-shadow:1px 1px 2px #dcdcdc;
-web-kit-box-shadow: 1px 1px 2px #dcdcdc;
-goog-ms-box-shadow:1px 1px 2px #dcdcdc;
box-shadow: 5px 5px 5px #008000;
border-radius:5px;
background: rgb(44,83,158); /* Old browsers */
background: -moz-linear-gradient(top, rgba(44,83,158,1) 0%, rgba(44,83,158,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(44,83,158,1)), color-stop(100%,rgba(44,83,158,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(44,83,158,1) 0%,rgba(44,83,158,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(44,83,158,1) 0%,rgba(44,83,158,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(44,83,158,1) 0%,rgba(44,83,158,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(44,83,158,1) 0%,rgba(44,83,158,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2c539e', endColorstr='#2c539e',GradientType=0 ); /* IE6-9 */
}
.popular-posts ul li:hover {
-moz-box-shadow:1px 1px 2px #dcdcdc;
-web-kit-box-shadow: 1px 1px 2px #dcdcdc;
-goog-ms-box-shadow:1px 1px 2px #dcdcdc;
box-shadow:2px 2px 4px #FF00FF;
border:1px solid #FFFF00;
color:#7FFF00;
}
.popular-posts ul li a
{
text-decoration:none;
font:16px Georgia, verdana;
color:#00FFFF;
}
.popular-posts ul li a:hover {
text-decoration:none;
} 

5. Save template dan lihat hasilnya.

Simple kaaan sob. Heee... 

TERIMA KASIH atas kunjungannya,

Salam... :')