Cara Membuat Widget Popular Posts Keren Seperti Arlina Design - Pada kesempatan kali ini admin warg4net akan membahas Cara Membuat / Mempercantik Widget Popular Post/Artikel Populer Seperti Arlina Design.
Popular Post atau Artikel Populer biasanya artikel yang sering banyak dibaca oleh pengunjung blog. Untuk mempercantik tampilan blog ada baiknya kita memodifikasi artikel blog kita, agar para pengunjung blog betah berlama - lama di blog kita.
Ada banyak cara dalam mempercantik widget popular post yang bisa kita gunakan di blog kita. Namun kali ini admin akan membuat artikel populer itu seperti pada template Arlina Design. Contohnya seperti pada gambar diatas.
- Silahkan anda masuk pada dashboard blog anda
- Kemudian klik Tema > Edit HTML
- Selanjutnya silahkan cari kode ]]></b:skin>
- Silahkan anda Copy Kode CSS dibawah ini dan Pastekan di atasnya
/*POPULAR POST WARG4NET*/
.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. Selanjutnya Klik Simpan Template
Baca Juga: Free Download Template Blogger Techwise Responsive 2019
Untuk setingan popular posts nya seperti gambar dibawah ini
Jika anda menggunakan template Viomagz kemudian ingin menghapus number count widget popular post. Silakan kalian cari Kode berikut ini: <b:include name='numberedpopularposts'/>" silakan anda hapus semua CSS style diatas.
Demikian artikel kali ini tentang Membuat Popular Post Seperti Arlina Design Semoga bermanfaat.
Dapatkan Tips Menarik Setiap Harinya!
- Dapatkan tips dan trik yang belum pernah kamu tau sebelumnya
- Jadilah orang pertama yang mengetahui hal-hal baru di dunia teknologi
- Dapatkan Ebook Gratis: Cara Dapat 200 Juta / bulan dari AdSense
0 Response to "Membuat Popular Post Seperti Arlina Design"
Post a Comment
Catatan Untuk Para Pengunjung