Cara Membuat Widget Popular Post Seperti Arlina Design Pada Blog

Cara Membuat Widget Popular Post Seperti Arlina Design Pada Blog


Pelajar Design - Popular Post pada sebuah blog sangatlah penting, karena dari widget tersebut pengunjung website bisa tau artikel yang paling populer atau paling banyak dikunjungi. Ada beberapa macam jenis desain Popular Post, namun kalian pasti bosan melihat tampilan Widget Popular Post yang begitu-begitu saja.

Nah pada kesempatan kali ini saya akan membagikan tutorial Cara Membuat Widget Popular Post Seperti Arlina Design Pada Blog. Widget ini terinspirasi dari sebuah blog / website bernama Arlina Design, karena desainnya yang sangat keren, simple dan elegan.

Cara Membuat Widget Popular Post Seperti Arlina Design Pada Blog

1. Silahkan login ke blogger.com dengan menggunakan akun Gmail kalian.
2. Masuk ke menu TEMA > Edit HTML.
3. Cari kode ]]></b:skin> atau </style> ( Gunakan CTRL + F ) dan pastekan kode dibawah ini tepat 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;}

Jika kalian pengguna template Viomagz, dan ingin menghapus Number Count pada Widget Popular Post. Silakan kalian cari kode. Numberedpopularposts silakan kamu hapus semua CSS style yang terdapat di dalammnya.

- ATAU - 

Jika kalian pengguna template lain, dan ingin menghapus Number Count pada Widget Popular Post. silakan kalian cari lewat inspect element paskan cursor di salah satu Number Count widget Popular Post, lalu cari kode CSS countnya ( biasanya terletak di ::before atau ::after ). Jika sudah silakan cari kode tersebut di dalam template kalian, jika sudah ketemu silakan kalian hapus CSS tersebut, atau hapus keterkaitan kode CSS tersebut.

4. Jika template kalian tidak memiliki Number Count pada Widget Popular Post, maka kalian hanya memasang kode CSS yang diatas (No. 3).
5. Jika sudah silahkan Simpan.

Bagaimana artikel tentang Cara Membuat Widget Popular Post Seperti Arlina Design Pada Blog. Silahkan download dibawah dan jangan lupa berikan komentar template apalagi yang kalian inginkan untuk saya bahas.

You may like these posts