Cara Membuat Popular Posts Warna warni

Cara Membuat Widget Popular Post Warna Warni - Widget Berwarna warni ini sebenarnya saya dapatkan ketika saya melihat Popular post templatenya Evo Magz, Kemudian saya membuat Popular posts yang hampir Mirip namun dengan Versi saya sendiri dan membuatnya lebih menarik dari aslinya .
Widget Popular posts pada dasarnya adalah untuk mengetahu artikel yang favorite yang sering dibaca oleh pengunjung dan tentunya agar menarik pengunjung untuk membuatnya betah dan terus membaca dan mencari di blog sobat, sobat seharusnya membuatnya terlihat menarik seperti Popular Post yang akan saya bahas ini, selain menarik Popular Posts Warna Warni ini tidak memberikan pengaruh terhadap kecepatan blog sobat karena tidak menggunakan tambahan eksternal Script seperti Javascript atau kode HTML.
Widget ini sebenarnya merupakan widget bawaan dari blogger sendiri yang saya modifikasi menggunakan kode CSS yang harus dimasukkan kedalam Dokumen HTML pada template sobat.
Langsung saja kita simak tutorialnya berikut ini :

Cara Membuat Popular Post Warna Warni :

1. Login ke Blogger.com
2. Pada Dashbord blog anda, klik menu Template
3. Pada menu Template, klik Edit HTML, Cari kode ]]><b:skin> atau </style>
4. Tambahkan kode berikut ini 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
• Jika anda sudah menambahkan Widget Popupar Posts bawaan blogger, silahkan lihat Homepage Blog anda, dan pastikan Popular post widget anda sudah berubah
• Jika belum, silahkan tambahkan terlebih dahulu pada menu Tata Letak > Tambah Gadget > Entri Popular

Sampai disini sekarang Popular Post blog sobat susah berubah menjadi Warna warni, dan itu akan membuat pengunjung semakin menarik untuk membacanya, jika ada yang ingin sobat tanyakan silahkan berkomentar pada kolom komentar di bawah ini, Semoga Cara Membuat Popular Posts Warna warni ini bisa beranfaat bagi sobat, Terimakasih !