Cara Mudah Membuat Widget Popular Post Seperti Arlina Design

Cara Membuat Widget Popular Post Seperti Arlina Design - Fungsi dari artikel popular adalah untuk menampilkan postingan yang sering di baca oleh pengunjung blog kamu bentuk dan model nya pun berbeda beda ada yang minimalasi dengan judul saja ada juga dengan judul dengan gambar tergantung selera.

Bagi kamu penggemar berat Arlina Design saya juga pengemar untuk bikin widget Popular Post ala Arlina Design yang terbaru saya punya tutorial nya nanti akan saya jelasakan di baawah.

Sebenarnya untuk widget popular post ini sudah tersedia untuk kamu yang membeli template Viral Go dari Arlina Design yang premium kalo tidak salah yang versi kabar sehat komentar disqus, langsung saja beli kalo tidak ingin repot hehe. oke langsung saja bagi kamu yang ingin memasang di template blog kamu bisa ikuti langkah di bawah ini.

Cara Mudah Membuat Widget Popular Post Seperti Arlina Design

Untuk kamu yang bingun dan ingin membuat widget postingan populer mirip blog arlina desaind yang terbaru kamu bisa ikuti cara nya di bawah ini.

1. Silahkan untuk login ke blogger.com

2. Selanjutnya Pilih tema / template > edit html

3. Cari kode /* Popular Posts */di templat blog kamu gunakan CTRL+F untuk mempercepat pencarian jika sudah.

4.Jika sudah ketemu Hapus kode /* Popular Posts */ sampai kode penutup ini color:#fff}

5. Setelah di hapus ganti kode css tersebut dengan kode di bawah ini.

/* Popular Posts */ .PopularPosts .item-title{font-weight:500;font-size:15px;padding-bottom:0.5em}.PopularPosts .widget-content{font-size:14px;padding:0}.PopularPosts .widget-content ul li{padding:0;background:none}.PopularPosts .item-title a{color:#333}.PopularPosts .item-title a:hover{color:#f39c12}.PopularPosts .item-snippet{height:40px;overflow:hidden;color:#555;line-height:1.4}#PopularPosts1{display:block;position:relative;overflow:hidden;font-size:15px}#PopularPosts1 ul{margin:0;padding:0;list-style-type:none}#PopularPosts1 ul li{background:#f39c12;position:relative;padding:0;color:#fff;border-bottom:1px solid rgba(0,0,0,0.08);border-top:1px solid rgba(255,255,255,0.12)}#PopularPosts1 ul li:after{content:&#39;\f105&#39;;font-family:fontawesome;position:absolute;top:12px;right:15px;line-height:1em;text-align:center;color:#fff;font-size:23px;font-weight:normal;transition:all.3s}#PopularPosts1 ul li:first-child{border-top:0}#PopularPosts1 ul li:last-child{border-bottom:0}#PopularPosts1 ul li:hover:after{color:#fff}#PopularPosts1 ul li a{background:#f39c12;color:#fff;display:inline-block;padding:15px 50px 15px 15px;width:100%}#PopularPosts1 ul li a:hover{background:#af854259;color:#fff}

6. Terakhir tinggal Simpan Templat

Penting !

#f39c12 Ini adalah kode warna widget popular post
background:#f39c1 ini adalah warna backgorud

Agar lebih responsive kamu bisa mengatur sesuai keinginan kamu, oiya untuk widget popular post ini tidak responsive untuk gambar hanya bagus untuk judul saja Untuk yang kerepotan atu bingung bisa di tanyakan di kolom komentar biasanya untuk setiap templat beda beda pengaturan nya.

Demikian untuk Cara Membuat Widget Popular Post Seperti Arlina Design semoga dapat bermanfaat terimakasih.