Cara Membuat Widget Popular Post Keren Seperti Arlina Design di Blogger

Jagoandzgn.com - Popular post adalah widget artikel atau postingan paling populer atau banyak dibaca pengunjung atau biasa kita kenal dengan postingan yang sering dibaca pengunjung yang merupakan sebuah widget yang sangat amat populer diblog tersebut. Ada berbagai macam jenis desain popular post itu, namun pasti kalian sudah bosan dengan tampilan yang itu aja.

Nah, pada kesempatan kali ini admin bakal membuat artikel bagaimana cara membuat widget popular post seperti template premium. Widget ini terinspirasi dari sebuah blog / website yang bernama arlina design, karena deisainnya yang sangat menarik elegan dan simple untuk dilihat dimata.

Untuk Kali ini saya akan membuat tutorial yaitu untuk desain widget popular post seperti arlina desain Dahulu. Karena, penerapan codingnya lebih simple. Lalu untuk navigasi onclicnya, nanti akan menyusul artikel berikutnya, karena penerapan codingannya terlalu sulit. Oke langsung saja silakan simak Tutorial Berikut ini :

Cara Membuat Widget Popular Post Keren Seperti Arlina Design di Blogger

1. Silahkan kamu login ke blogger.com dengan Gmail terlebih dahulu.

2. Masuk ke menu TEMA > klik Edit HTML.
3. Cari kode berikut ini dengan menggunakan( CTRL + F ) ]]></b:skin> atau </style>. Copy Pastekan Kode CSS dibawah ini diatas kode tersebut.

/* 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;}

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.

- ATAU -

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.

4. Jika template kalian tidak ada Number Count di widget popular post, kalian hanya pasang kode CSS yang di Atas (no.3).
5. Kalau sudah silahkan klick SIMPAN dan Selesai.

Untuk Penerapan widgetnya seperti berikut ini.

Jika kamu belum begitu paham / masih ada yang error dalam penerapan kode nya, silahkan koment dibawah kolom komentar atau contact saay melalui halaman contact.

Cara Menambahkan ICON di  Popular Posts

1. Masih dimenu Edit HTML.
2. Kemudian tambahkan kode CSS dibawah ini SEBELUM kode berikut ]]></b:skin>

.PopularPosts h2 svg {margin-right: 15px;float: right;display: inline-block;width: 20px;height: 20px;vertical-align: -5px;background-repeat: no-repeat!important;content: '';}

3.Kalau sudah silahkan lompat ke Widget Popular Post.
4. Silakan buka seluruh code popular post, caranya dengan mengklik tanda titik 3 (...). Kita akan menambahkan ICON, jika sudah tambahkan code Icon popular post dibawah ini Setelah <data:title/> untuk tutorialnya silahkan simak gambar berikut.

 

5. Pastekan kode dibawah ini tepat di <data:title/>DISINI</h2></b:if> bacaan DISINI ubah dengan kode dibawah ini.

<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>

6. Klik SIMPAN dan Selesai

Jika kalian ingin mengganti warna icon silakan ganti Fill nya, Contoh fill="#FFD15C", silakan ganti #FFD15C sesuai dengan warna keinginan kalian, harus berupa warna HEX