Membuat Widged Postingan Populer Seperti Arlina Design

Cara Membuat Widged Postingan Populer Seperti Arlina Design - Hallo Sahabat Blogger Dikesempatan kali ini saya ingin berbagi cara membuat Widged Postingan Populer seperti arlina design

Postingan Populer atau yang dikenal dengan postingan yang sering dibaca oleh pengunjung blog itu sendiri, dijaman sekarang tampilan blog lebih diutamakan daripada artikel, ya memang benar seperti saya sendiri.

Menurut saya mempercantik tampilan blog/website anda akan membuat pengunjung akan lebih betah membaca dan berlama - lama didalam blog/website tersebut

Ada banyak cara membuat Widged postingan populer namun disisi saya akan membagikan cara membuat Widged Postingan Populer seperti Arlina Design.

Langkah - langkah Cara Membuat Widged Postingan Populer Seperti Arlina Design

1. Silahkan sahabat blogger login ke dashboard blogger.
2. Kemudian klik TEMA > Edit HTML
3. Selanjutnya silahkan cari kode seperti ini ]]></b:skin> 
4. Lalu copy kode CSS dibawah ini lalu letakkan tepat diatas nya.

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

         5. Klik Save TEMA
Untuk Settingan Populer Posts seperti berikut :

Kesimpulan 

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