Cara Membuat dan Rombak Widget Popular Post seperti Arlina - Mediaachmad

Membuat widget Popular Post seperti Arlina Desain | arlinadzgn.com simple dan mudah. Popular Post atau biasanya dikenal dengan Postingan yang sering dibaca pengunjung merupakan sebuah widget yang sangat amat populer di Blog atau website sekarang. Ada banyak berbagai macam desain dari widget popular post namun pasti kalian sudah bosan dengan desain yang itu – itu saja. Pasti kalian ingin membuat widget seperti template premium tapi bingung untuk mendesainnya dan bagaimana pengcodingannya.

Pada kesempatan kali ini admin mendapat request dari seorang pengunjung website mediaachmad :D untuk membuat desain popular post seperti mediaachmad sendiri, dan membuat desain navigasi show hide onclick seperti mediaachmad.

Sebenarnya admin membuat desain widget popular post terinspirasi dari website Arlina Design, karena desainnya yang menarik elegan dan simple, enak dilihat. Kemudian untuk navigasi show hide onclick, Terinspirasi dari desain website Igniplex yang di buat oleh mbak Igniel | igniel.com.

Untuk Kali ini yang akan admin buat 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.

Membuat Widget Popular Post Seperti arlinadzgn.com

1. Silakan kalian login dahulu ke blogger.
2. Masuk ke TEMA, Kemudian Pilih EDIT HTML.
3. Cari code ]]></b:skin> atau </style>. Copy Pastekan Kode CSS dibawah ini diatas kode tersebut.

/*POPULAR POST By Mediaachmad.com*/
.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;}

4. Jika kalian pengguna template viomagz, dan ingin menghapus Number Count widget popular post. Silakan kalian cari code. Numberedpopularposts silakan kalian hapus semua CSS style yang terdapat di dalammnya, untuk lebih jelasnya simak gambar berikut.
5. 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.
6. Jika template kalian tidak ada Number Count di widget popular post, kalian hanya pasang kode CSS yang di Atas (no.3).
7. Silakan sesuaikan yang kurang pas dengan edit lewat inspect element.
8. Selesai.

untuk setelan widgetnya seperti ini

Jika terlalu sulit di pahami, silakan kalian baca pelan – pelan atau silakan komentar. Mungkin itu yang dapat admin sampaikan, walaupun desainnya belum terlalu sama persis, karena hilangnya hover icon bintang Namun admin akan berusaha memberikan updatenya nanti. Silakan kalian comment dibawah jika terjadi sesuatu, admin akan memberikan solusi sebisanya. Kurang lebihnya admin minta maaf.

---

Menambah icon popular post

(update 9 Oktober 2019)

untuk menambah iconnya silakan simak baik - baik cara berikut.

1. Masuk ke EDIT HTML
2. Kemudian tambahkan Code CSS berikut ini SEBELUM ]]></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. Lalu jika sudah,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/>, simak berikut.

<svg id="Layer_1" version="1.1" viewBox="0 0 511.269 511.269" x="0px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" y="0px">
<path d="M140.367,465.067C116.9,438.4,93.434,410.667,78.5,377.6c-14.933-35.2-19.2-75.733-11.733-114.133  s24.533-74.667,49.067-105.6c-2.133,26.667,7.467,54.4,25.6,74.667c-10.667-51.2,6.4-106.667,40.533-147.2S263.034,18.133,312.1,0  c-24.533,25.6-27.733,66.133-18.133,100.267c9.6,34.133,29.867,64,48,94.933c18.133,30.933,35.2,62.933,36.267,98.133  c9.6-18.133,20.267-36.267,26.667-56.533c6.4-20.267,9.6-41.6,4.267-61.867c19.2,23.467,29.867,46.933,35.2,76.8  c5.333,29.867,4.267,60.8,1.067,90.667c-4.267,33.067-12.8,67.2-30.933,94.933c-21.333,33.067-55.467,56.533-92.8,69.333  C255.567,518.4,190.5,508.8,140.367,465.067z" fill="#F3705A"></path>
<path d="M221.434,504.533C308.9,538.667,395.3,435.2,347.3,355.2c0-1.067-1.067-1.067-1.067-2.133  c4.267,43.733-6.4,75.733-26.667,93.867c10.667-25.6,3.2-55.467-9.6-81.067c-12.8-24.533-30.933-46.933-44.8-70.4  c-13.867-24.533-24.533-52.267-18.133-80c-25.6,19.2-43.733,48-51.2,78.933c-7.467,30.933-3.2,65.067,10.667,93.867  c-16-11.733-27.733-30.933-28.8-51.2c-17.067,20.267-27.733,46.933-26.667,73.6C151.034,452.267,184.1,489.6,221.434,504.533z" fill="#FFD15C"></path><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g>
</svg>




Code - Code Icon

Jika teman teman bosan dengan icon yang itu - itu saja, teman - teman bisa menggantinya dengan yang lain seperti bawah ini.

1. | Api

   • <svg id="Layer_1" version="1.1" viewBox="0 0 511.269 511.269" x="0px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" y="0px">
     <path d="M140.367,465.067C116.9,438.4,93.434,410.667,78.5,377.6c-14.933-35.2-19.2-75.733-11.733-114.133  s24.533-74.667,49.067-105.6c-2.133,26.667,7.467,54.4,25.6,74.667c-10.667-51.2,6.4-106.667,40.533-147.2S263.034,18.133,312.1,0  c-24.533,25.6-27.733,66.133-18.133,100.267c9.6,34.133,29.867,64,48,94.933c18.133,30.933,35.2,62.933,36.267,98.133  c9.6-18.133,20.267-36.267,26.667-56.533c6.4-20.267,9.6-41.6,4.267-61.867c19.2,23.467,29.867,46.933,35.2,76.8  c5.333,29.867,4.267,60.8,1.067,90.667c-4.267,33.067-12.8,67.2-30.933,94.933c-21.333,33.067-55.467,56.533-92.8,69.333  C255.567,518.4,190.5,508.8,140.367,465.067z" fill="#F3705A"></path>
     <path d="M221.434,504.533C308.9,538.667,395.3,435.2,347.3,355.2c0-1.067-1.067-1.067-1.067-2.133  c4.267,43.733-6.4,75.733-26.667,93.867c10.667-25.6,3.2-55.467-9.6-81.067c-12.8-24.533-30.933-46.933-44.8-70.4  c-13.867-24.533-24.533-52.267-18.133-80c-25.6,19.2-43.733,48-51.2,78.933c-7.467,30.933-3.2,65.067,10.667,93.867  c-16-11.733-27.733-30.933-28.8-51.2c-17.067,20.267-27.733,46.933-26.667,73.6C151.034,452.267,184.1,489.6,221.434,504.533z" fill="#FFD15C"></path><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g>
     </svg>

2. | Bintang

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

Untuk selebihnya teman-teman bisa mencari icon yang lain disini. ambil code icon yang SVG.

3. Selesai dan lihat hasilnya.
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

Jika kalian ingin membuat desain widget seperti template - template premium, Namun tidak bisa mendesainnya, silakan REQUEST ke admin, melalui Menu Contact. Admin akan membantu sebisa mungkin. Sekian dan Terima Kasih.