Cara membuat widged popular post warna-warni

Cara membuat popular post warna-warni- Widged popular post sangat diperlukan agar visitor mengetahui artikel apa yang populer selama sehari,seminggu atau sebulan. Setting popular post sebenarnya sudah default dari sebuah template blog. Sobat bisa mengubah dan mengedit widged popular post, seperti popular post yang ada disamping blog ini.

screenshoot

Lalu,bagaimana cara membuat popular post seperti gambar diatas? Caranya cukup mudah,sobat tinggal mengikuti turtorial sederhana ini

Cara membuat widged popular post warna-warni
Pertama ,login akun blogger sobat>Template>Edit HTML (sebaiknya lakukan backup sebelum mengedit template sobat dengan cara klik>Cadangkan/Pulihkan
Lalu,Cari kode ]]><b:skin> atau </style>, Pastekan Kode berikut tepat diatasnya

.PopularPosts .item-thumbnail {
    float: left;
    margin: 0 10px 0 0;
}

.PopularPosts img {
    margin-right: 0.5em;
    transition: all 0.5s;
}

.PopularPosts .item-title {
    padding-bottom: 0.2em;
}

.PopularPosts .item-snippet {
    color: #fff;
}

.item-thumbnail img {
    border-radius: 100px;
    padding: 5px;
    width: 60px;
    height: 60px;
    background: rgba(0, 0, 0, 0.3);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4) inset, 0 1px 0 rgba(255, 255, 255, 0.2);
}

.PopularPosts ul li {
    position: relative;
    margin: 5px 0;
    padding: 5px;
    border: 0;
}

.PopularPosts ul li:first-child {
    background: #ff4c54;
    width: 95%;
}

.PopularPosts ul li:first-child:after {
    content: "1";
}

.PopularPosts ul li:first-child + li {
    background: #ff764c;
    width: 87%;
}

.PopularPosts ul li:first-child + li:after {
    content: "2";
}

.PopularPosts ul li:first-child + li + li {
    background: #ffde4c;
    width: 84%;
}

.PopularPosts ul li:first-child + li + li:after {
    content: "3";
}

.PopularPosts ul li:first-child + li + li + li {
    background: #c7f25f;
    width: 81%;
}

.PopularPosts ul li:first-child + li + li + li:after {
    content: "4";
}

.PopularPosts ul li:first-child + li + li + li + li {
    background: #33c9f7;
    width: 78%;
}

.PopularPosts ul li:first-child + li + li + li + li:after {
    content: "5";
}

.PopularPosts ul li:first-child + li + li + li + li +li {
    background: #7ee3c7;
    width: 75%;
}

.PopularPosts ul li:first-child + li + li + li + li + li:after {
    content: "6";
}

.PopularPosts ul li:first-child + li + li + li + li + li +li {
    background: #f6993d;
    width: 72%;
}

.PopularPosts ul li:first-child + li + li + li + li + li + li:after {
    content: "7";
}

.PopularPosts ul li:first-child + li + li + li + li + li + li +li {
    background: #f59095;
    width: 69%;
}

.PopularPosts ul li:first-child + li + li + li + li + li + li + li:after {
    content: "8";
}

.PopularPosts ul li:first-child + li + li + li + li + li + li + li +li {
    background: #c7f25f;
    width: 66%;
}

.PopularPosts ul li:first-child + li + li + li + li + li + li + li + li:after {
    content: "9";
}

.PopularPosts ul li:first-child:after,
.PopularPosts ul li:first-child + li:after,
.PopularPosts ul li:first-child + li + li:after,
.PopularPosts ul li:first-child + li + li + li:after,
.PopularPosts ul li:first-child + li + li + li + li:after,
.PopularPosts ul li:first-child + li + li + li + li + li:after,
.PopularPosts ul li:first-child + li + li + li + li + li + li:after,
.PopularPosts ul li:first-child + li + li + li + li + li + li + li:after,
.PopularPosts ul li:first-child + li + li + li + li + li + li + li + li:after {
    position: absolute;
    top: 20px;
    right: -15px;
    border-radius: 50%;
    background: #353;
    width: 30px;
    height: 30px;
    line-height: 1em;
    text-align: center;
    font-size: 28px;
    color: #fff;
} 

Simpan template dengan mengklik tombol >Save Template 
Lihat Perubahan di blog sobat dengan mengklik >Lihat Blog

Perkerjaan Sobat untuk menambahkan widget popular post multi color sudah selesai, jika menemui hambatan atau kesulitan saat mempraktekkan tutorial ini, jangan sungkan meninggalkan komentar pada bagian bawah artikel ini ,sampai jumpa.