Cara Membuat Widget Popular Post Seperti Arlina Design di Blogger
Popular Post adalah widget yang memperlihatkan artikel paling populer yang banyak dan sering dibaca oleh pengunjung. Ada berbagai macam jenis desain popular post, namun pasti kalian sudah bosan dengan tampilan yang begitu aja. Oleh karena itu kita akan membuat tampilannya lebih menarik pada pembahasan kita kali ini.
Dengan menampilkan Popular Post yang menarik, maka setidaknya mampu memberikan daya tarik pengunjung blog untuk melihat Popular Post kita sehingga bisa jadi pengunjung tersebut mengklik artikel kita yang sering dibaca oleh orang lain.
Nah, pada kesempatan kali ini kita akan Membuat Widget Popular Post Seperti Arlina Design. Saya merekomendasikan tampilan yang satu ini karena desainnya yang sangat menarik dan enak untuk dilihat dimata. Walaupun tampilannya simpel tapi menurut saya ini sudah cukup keren karena dekorasi pada bagian judulnya yang menarik dengan tambahan icon di sebelahnya.
1. Pergi ke Blogger > Tema > Edit HTML.
2. Silakan kalian cari kode ]]></b:skin> dan letakkan kode di bawah ini tepat di atasnya.
/* POPULAR POST */.popular-posts {background: linear-gradient(127deg, #de0985, #f18241);}.PopularPosts ul li:hover{background: #3333330f;}.popular-posts ul li a {color:#fff;}.popular-posts ul li a:hover {color:#fff;}.PopularPosts h2 {text-indent: 20px;border-top: 2px solid #df0d83;margin-bottom: 0px;border-bottom: none;width: 100%;padding-bottom: 15px;background: #fff;padding-top: 15px;}.PopularPosts h2 span {margin-left:20px}.PopularPosts .widget-content ul, .PopularPosts .widget-content ul li {margin: 0 0;padding: 0 0;list-style:none;border:none;outline:none;}.PopularPosts .widget-content ul {margin: 0;list-style:none;counter-reset:num;}.PopularPosts .widget-content ul li img {display: block;width: 70px;height: 70px;float: left;}.PopularPosts .widget-content ul li {margin: 0;counter-increment: num;position: relative;border-bottom: 1px solid rgba(0,0,0,0.08);border-top: 1px solid rgba(255,255,255,0.12);}.PopularPosts ul li:last-child {margin-bottom: 0px;}.PopularPosts ul li .item-thumbnail-only::after, .PopularPosts ul li .item-content::after, .PopularPosts ul li > a::after {background: #efefef;}.PopularPosts .item-title {line-height: 1.6;margin-right: 8px;min-height: 40px;font-weight: bold;}.PopularPosts .item-thumbnail {float: left;margin-right: 8px;}.PopularPosts .item-snippet {line-height: 1.6em;margin-top: 8px;opacity: 0.925;}.PopularPosts ul li > a {font-weight: bold; font-size: 14px;}.PopularPosts .item-title, .PopularPosts .item-thumbnail, .PopularPosts .item-snippet {margin-left: 28px;}.PopularPosts ul li > a {display: block;padding: 8px 20px;font-size: 15px;font-weight: 400;min-height: 45px;}.PopularPosts h2 svg {margin-right: 15px;float: right;display: inline-block;width: 20px;height: 20px;vertical-align: -5px;background-repeat: no-repeat!important;content: '';}Jika kamu pengguna template viomagz, dan ingin menghapus Number Count widget popular post. Silakan kalian cari code. Numberedpopularposts silakan kamu hapus semua CSS style yang terdapat di dalammnya.
Jika kalian pengguna template lain, dan ingin menghapus Number Count widget popular post, silakan kalian cari lewat inspect element paskan cursor di salah satu Nomor count widget popular post, lalu cari code CSS countnya (biasanya terletak di ::before atau ::after). Jika sudah silakan cari code tersebut di dalam template kalian, jika sudah ketemu silakan kalian hapus CSS tersebut, atau hapus keterkaitan code CSS tersebut.
3. Jika template kalian tidak ada Number Count di widget popular post, kalian hanya pasang kode CSS yang di Atas (no.2).
4. Selanjutnya kalian Lompat ke Widget Popular Post.
5. Kemudian kalian cari kode <data:title/> dan letakkan kode di bawah ini tepat setelah kode tersebut.
<svg style="width:24px;height:24px" viewBox="0 0 24 24"> <path fill="#FFD15C" d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z" /></svg>Ubah kode warna pada bagian yang saya tandai untuk mengubah warna icon tagnya
6. Setelah itu tekan Simpan. Pastikan Thumbnail Gambar dan Cuplikan telah dinonaktifkan agar Widgetnya bekerja dengan baik.
Penutup
Demikianlah pembahasan kita tentang Cara Membuat Widget Label Seperti Arlina Design di Blogger dan semoga bermanfaat buat kalian semua. Jika ada hal yang ingin ditanyakan silakan berkomentar saja dibawah.