Cara Merubah Tampilan Populer Blog Terlihat Keren

Cara Merubah Tampilan Populer Blog Terlihat Keren- Pada kesempatan kali ini penulis akan menjelaskan lagi mengenai blog terutama dalam hal design blog yaitu tampilan populer blog. Pada awalnya tampilan popular pos di blog kita itu terlihat sederhana dan tidak begitu rapi atau bahkan bisa di bilang biasa-biasa saja. Nah maka dari itu untuk akan dibahas mengnai hal ini agar tampilan popular post menjadi terlihat menarik dan keren.

Merubah tampilan popular pos sebenarnya tidak terlalu penting bagi sebagian orang tetapi bagi penulis sendiri ini menjadi penting dan menjadi daya tarik sendiri bagi para pembaca di blog. Tampilan yang nyaman akan membuat pembaca atau pengunjung blog menjadi betah untuk berlama-lama di dalam blog kita. Hal ini tentu saja menjadi faktor untuk menjaring banyak traffic ke blog kita bahkan membuat mereka kembali ke blog kita.

Penulis sendiri kadang merasakan nyamannya berlama-lama di blog orang lain karena tampilan yang keren dan nyaman. Semakin lama pengunjung di blog kita semakin menaikkan popularitas kita di pencarian google otomatis juga dong membuat banyak pengunjung ke blog kita. Nah itu lah mengapa merubah tampilan menjadi sesuatu yang bisa di bilang penting juga dan salah satunya yaitu popular pos. Sebelumnya juga telah di jelaskan bagaimana cara merubah tampilan widget label bisa di baca dulu.

Oke mari kita langsung ke materinya dan langsung di praktekkan juga ya agar bisa dan terbiasa dalam mengutak-atik template kita sendiri. Sebelumnya selalu penulis katakan bahwa ikuti ddengan seksama dan teliti agar dalam mempraktekkannya tidak terjadi kesalahan yang membuat hal ini tidak bekerja sama-sekali. Berikut akan penulis paparkan tampilan dari populer pos yang akan kita buat

Tampilan Populer Post

Cara Merubah Tampilan Populer Blog

1. Masuk ke Dashboar blogger dan klik menu Template > Edit HTML
2. Gunakan CTRL+F untuk mencari kode berikut </head>
3. Setelah ketemu copy paste kode di bawah tepat di atasnya
<style>
/* PopularPost */
#PopularPosts1 ul{padding:10px 0;margin-top:-15px;}
.PopularPosts .item-thumbnail{margin:0}
.PopularPosts .widget-content ul{padding:0;margin-top:-7px}
.PopularPosts .item-title a{text-decoration:none;font-weight:500;font-size:14px;color:#000;line-height:1.7em;transition:all ease-in-out .1s;}
.PopularPosts .item-title{padding-bottom:.4em}
.PopularPosts .widget-content ul li:hover a,.PopularPosts .widget-content ul li a:hover{color:#80C8FE;}
.PopularPosts li:first-child .item-snippet{position:absolute;top:0;opacity:0;visibility:hidden;width:85%;left:11px;color:#fff;background-color:rgba(0, 138, 33, 0.3);padding:10px;font-size:100%;line-height:normal;transition:.3s;}
.PopularPosts li:hover:first-child .item-snippet{top:20%;opacity:1;visibility:visible}
.PopularPosts img{width:100%;height:100%}
.PopularPosts .widget-content ul li{list-style:none;margin:10px 0 0!important;padding:0 0 10px!important;line-height:1.5em!important;position:relative;border-bottom:1px solid #ccc}
.PopularPosts li .item-snippet{display:none}
.PopularPosts li .item-thumbnail{width:75px;height:62px;margin:0 10px 0 0;overflow:hidden;float:left; border:4px double #ccc;border-radius:4px;box-shadow:0 2px 2px #999;}
.PopularPosts li:first-child .item-thumbnail{width:100%;height:100%;max-height:170px;overflow:hidden;margin-bottom:10px}
.PopularPosts li:first-child .item-content{position:relative}
.PopularPosts li:first-child .item-thumbnail,.PopularPosts li:first-child .item-snippet{display:block}
.PopularPosts li:first-child .item-title a{font-size:15px;line-height:1.6em;font-weight:600}
</style>
<script type='text/javascript'>
//<![CDATA[
function resizeThumbarlina(e,t){for(var s=document.getElementById(e),r=s.getElementsByTagName("img"),c=0;c<r.length;c++)r[c].src=r[c].src.replace(/\/s72\-c/,"/s"+t),r[c].width=t,r[c].height=t}resizeThumbarlina("PopularPosts1",400);
//]]>
</script>
4. Kemudian Simpan template teman-teman dan lihat hasilnya dengan klik pratinjau template.
5. Sampai di sini sudah selesai, bila tidak terlihat hasilnya pastikan bahwa teman-teman sudah memasukkan widget populer post ke dalam template. Bila belum silahkan tambahkan caranya..
6. Klik menu Tata Letak > Tambahkan Widget > Populer Post.

Sampai di sini selesailah bagaimana cara merubah tampilan populer blog menjadi lebih keren dan nyaman di pandang. Masih banyak lagi tampilan-tampilan populer post dan itu akan di jelaskan di artikel berikutnya. Pastikan selalu update di blog kami dengan subscribe blog ini. Belajar blog lengkap cuma di sini tempatnya. Semoga bermanfaat...

Baca artikel sebelumnya : Cara merubah tampilan label widget jadi keren