Popular Posts Multi Color Flat UI

Widget Popular Posts Multi Color - Selain untuk menampilkan artikel yang paling sering di baca oleh pengunjung, widget popular posts juga dapat di modifikasi sehingga tampilannya akan menjadi lebih menarik. Pada kesempatan ini, saya akan membagikan kepada Anda widget popular posts ala plugin popular posts milik wordpress.

Widget ini tampil multi warna, dengan label angka dari 1 sampai 9 pada sisi kanan, diurut berdasarkan tingkat popularitas artikel. Artinya, artikel yang paling sering dibaca pengunjung akan menempati posisi teratas dengan label angka 1 disusul artikel populer berikutnya dengan label angka 2 dan seterusnya sampai artikel yang paling rendah popularitasnya.

Widget ini sebenarnya adalah widget bawaan blogger yang dimodifikasi menggunakan sedikit tambahan kode CSS yang harus ditanamkan ke dalam dokumen HTML templates. Untuk kecepatan loading widget, tidak banyak perpengaruh karena selain kode CSS, tidak ada penambahan external script seperti javascript ataupun kode HTML.

Show Screen Shot

Kembali ke pokok bahasan, untuk memodifikasi widget popular posts, agar tampil dalam bentuk multi color, ikuti langkah implementasi seperti di bawah ini :

• Login ke Blogger
• Pada halaman dashboard blogger klik menu Template
• Sebelum melakukan perubahan pada dokumen HTML template biasakan untuk melakukan backup template terlebih dahulu.
• Klik menu Template >> Edit HTML kemudian cari kode ]]><b:skin> atau </style>
• Tambahkan kode berikut ini tepat di atasnya

.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 menekan tombol Save Templates
• Jika Anda sudah pernah menambahkan widget popular posts bawaan blogger, silahkan periksa homepage blog Anda dan pastikan widget popular posts telah berubah.
• Jika Anda belum pernah menggunakan widget popular posts bawaan blogger, pergi ke menu Layout/Tata Letak, klik Add a gadget dan ambil widgets popular posts blogger.
• Sekali lagi periksa halaman homepage blog Anda, dan pastikan widget popular posts yang baru saja ditambahkan sudah sesuai dengan keinginan Anda.

Sampai di sini perkerjaan Anda 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, atau jika Anda punya saran dan pendapat lain, saya mengajak Anda untuk bertukar informasi untuk kemajuan kita bersama.