Membuat Popular Post Bernomor Keren Abis juga!

Membuat Popular Post Bernomor Keren Abis juga! - Halo, apa kabar sobat blogger? Senang rasanya pada kesempatan kali ini saya kembali masih bisa menulis dan berbagi tutorial seputar blog untuk sobat semua. Pada kesempatan kali ini, saya akan berbagi tutorial tentang Cara Membuat Popular Post Bernomor Keren yang patut sobat coba.

Sebenarnya saya sudah sering berbagi tutorial tentang konstumisasi widget popular post, untuk tutorial terkait artikel ini bisa disearch diblog ini. Baiklah, kembali lagi ke artikel kita kali ini, dan bagi untuk sobat yang mau mencoba tutorial ini langsung saja simak langkah-langkahnya
dibawah ini.

Membuat Popular Post Bernomor Keren Abis juga!

Step 1: Menambah Widget Popular Post
Masuk ke Dashboard blogger → pilih Tata Letak → Add Gadget → Popular Posts.
Usahakan untuk menempatkan widget popular post dibagian yang cukup lebar, misalnya sidebar blog.

Step 2: Menambah kode CSS untuk Popular Post
Masuk ke Dashboard blogger → pilih Template → Edit HTML.
Kemudian cari kode ]]></b:skin> dan paste kode dibawah ini tepat diatasnya.

.popular-posts ul li a {
    background: none repeat scroll 0 0 #222222;
    color: #FFFFFF;
    display: block;
    margin: 10px 0;
    padding: 25px 15px 30px;
    position: relative;
    text-decoration: none;
    transition: all 0.3s ease-out 0s;
 width: 85%;
}
.popular-posts ul li a:before {
    background: none repeat scroll 0 0 #2DB3E9;
    color: #FFFFFF;
    font-weight: 700;
    height: 2em;
    line-height: 2em;
    margin-left: 88%;
    padding: 4px;
    position: absolute;
    text-align: center;
    width: 2em;
    transition: all 0.2s ease-in-out 0s;
   -moz-transition: all 0.3s ease-in-out 0s;
}
.popular-posts ul li a:hover {
    opacity: 0.8;
}
.popular-posts ul li a:hover:before {
    border-left-color: #CCCCCC;
    left: -1px;
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
}
.popular-posts ul li:first-child + li + li + li + li + li + li + li + li + li a:before {
    content: "10";
}
.popular-posts ul li:first-child + li + li + li + li + li + li + li + li a:before {
    content: "9";
}
.popular-posts ul li:first-child + li + li + li + li + li + li + li a:before {
    content: "8";
}
.popular-posts ul li:first-child + li + li + li + li + li + li a:before {
    content: "7";
}
.popular-posts ul li:first-child + li + li + li + li + li a:before {
    content: "6";
}
.popular-posts ul li:first-child + li + li + li + li a:before {
    content: "5";
}
.popular-posts ul li:first-child + li + li + li a:before {
    content: "4";
}
.popular-posts ul li:first-child + li + li a:before {
    content: "3";
}
.popular-posts ul li:first-child + li a:before {
    content: "2";
}
.popular-posts ul li:first-child a:before {
    content: "1";
}
.item-snippet {
    display: none;
}
.PopularPosts .item-thumbnail {
    display: none;
} 

Selanjutnya, sobat bisa menyimpan pengaturan Template blognya.
Dan pastikan sobat menghapus kode CSS untuk Popular Post sebelumnya jika ada.

Bagaimana, mudah bukan? saya rasa sekian artikel saya kali ini mengenai Membuat Popular Post Bernomor Keren Abis juga!, semoga artikel yang saya bagikan ini dapat bermanfaat untuk sobat semua, sampai jumpa. Selamat mencoba..