Kumpulan popular post keren responsive 2019

Para blogger mungkin sudah paham apa itu popular post, fungsi popular post adalah sekumpulan artikel yang paling sering di baca oleh pengunjung sebiah website. Jadi pada kesampatan kali ini saya akam memberikan cara mengganti popular post bawaan template dengan popular post yang responsive serta tampilan yang unik agar menambah kesan premium pada website anda. 

Pada dasarnya sebuah website dengan trafik yang tinggi dengan kaya akan isi konten yang bermaanfaat harus pula mempunyai identitas salah satunya dengan merubah desain Html pada tampilan dan juga dengan merubah warna. Sebagai cara mudah untuk merubah tampilan popular post ikuti tutorial pemasangannya di bawah ini.

CARA MERUBAH POPULAR POST 

1. Membuat popular post seperti arlina design.

• Buka blogger.com > thema > edit Html, lalu cari kode /*popular post */ dengan mengklik ctrl + f untuk mudah mencarinya, Jika anda sudah menemukan kode tersebut maka hapus. Bertujuan agar tidak mengalami eror berbenturan dengan kode lainnya.

/* Popular Posts */ 
#PopularPosts1 h2{background:#fff;position:relative;overflow:hidden;font-size:16px;margin-top:0;padding:15px 20px;border-bottom:1px solid rgba(0,0,0,0.08);margin:0;border-top:4px solid #f24a4a;} #PopularPosts1{display:block;position:relative;overflow:hidden;font-size:15px;}#PopularPosts1 ul{margin:0;padding:0;list-style-type:none;} #PopularPosts1 ul li{background:#f24a4a;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:'\f105';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:#f24a4a;color:#fff;display:inline-block;padding:15px 50px 15px 15px;width:100%;} #PopularPosts1 ul li a:hover{background:#e24444;color:#fff;} .PopularPosts .item-thumbnail,.PopularPosts .item-snippet{display:none}

• Bila sudah di ganti dengan kode diatas anda bisa save.

Note : kode di atas di setting agar menampilkan judul, Jika anda infin menampilkan gambar hapus kode di bawah ini.

.PopularPosts .item-thumbnail,.PopularPosts .item-snippet{display:none}

2. Membuat popular post mastimon

 Unfuk memasang popular post ini kita tidak perlu untuk mengedit bagian HTML, kita hanya menaruh kode berikut di bagian sidebar sesuai keinginan.

<div class='artikel-terbaru'>

<script>
function artikelterbaru(e){document.write("<ul>");for(var t=0;t<e.feed.entry.length;t++){for(var r=0;r<e.feed.entry[t].link.length&&"alternate"!=e.feed.entry[t].link[r].rel;r++);var n="<li><a href="+("'"+e.feed.entry[t].link[r].href+"'")+'">'+e.feed.entry[t].title.$t+"</a> </li>";document.write(n)}document.write("</ul>")}
</script>
<script src="/feeds/posts/summary/?max-results=10&alt=json-in-script&callback=artikelterbaru"></script>
</div>

Setelah save kode diatas, Masuk ke tata letak  blog anda, buatlah menu baru html /javascript  bagian sidebar lalu pastekan, dan ter akhir save.

Sekian tata cara pembuatan popular post responsive terbaru 2019

Share this post