Skip to main content

Cara Membuat Popular Post Seperti Arlina Design

Cara Membuat Popular Post Seperti Arlina Design

Pada kesempatan kali ini saya angan membeberkan script CSS Popular Post seperti yang dipakai pada template Arlina Design. Popular Post buatan Arlina memiliki desain yang cantik sehingga akan membuat tampilan blog kamu semakin menarik.

Arlina adalah salah satu blogger yang bergelut pada dunia tutorial seputar blog dan template yang terkenal di Indonesia. Banyak hasil karyanya yang bahkan sudah mendunia seperti template simply, viral Go, dan lain sebagainya. Semua template buatannya juga sudah responsive dan SEO Friendly.

Salah satu hal menarik pada template buatan Arlina adalah desain posting terpopuler (popular post) yang sangat berbeda dengan template umumnya. Jika pada template biasa hanya berupa deskripsi dan thumbnail, pada template ini berupa tabel yang memiliki warna menarik dan memiliki daya tarik pengunjung untuk melihatnya.

desain widget popular post terbaru

Lantas apa hubungannya popular post yang menarik dengan pembaca blog? Untuk menjawab pertanyaan ini, perlu kita ketahui bahwa fungsi dari popular post dalam sebuah blog adalah menampilkan postingan yang sering dibaca oleh pengunjung blog kita.

Dengan menampilkan popular post yang menarik, maka setidaknya mampu memberikan daya tarik pembaca atau pengunjung blog untuk melihat popular post kita sehingga bisa jadi pengunjung tersebut mengklik artikel kita yang sering dibaca orang lain. Dengan demikian, visitor kita akan meningkat karena bisa jadi pengunjung akan betah dan berlama-lama pada blog kita.

Jadi kita sebagai seorang blogger harus juga mengedepankan tampilan blog kita selain membuat artikel yang menarik, bagus, SEO, dan tema artikel yang sering dibaca pengunjung. Buat kamu yang ingin mempraktekkan langsung cara membuat popular post seperti Arlina Design bisa langsung menuju tutorialnya dibawah ini.

Baca juga: Cara Membuat Daftar Isi Sederhana di Blog

Cara Mudah Membuat Widget Popular Post Seperti Arlina Design


Untuk membuat tampilan widget Popular Post yang keren seperti Arlina, silahkan ikuti tutorial Blogger di bawah ini dengan seksama.
  1. Pertama, masuk ke Dashboard Blogger lalu pilih menu Theme - Edit HTML.

  2. Carilah baris script /* Popular Posts */ pada template yang kamu pakai. Jika tidak ketemu, kamu juga bisa mencari .PopularPosts.

  3. Hapus semua kode tersebut agar nantinya kode CSS tidak saling bertumpuk dan membuat rusak tampilannya.

  4. Ganti kode yang sudah dihapus tadi dengan script berikut, letakkan sebelum </style> :

    .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}

  5. Kamu bisa mengubah warna-warna yang ada sesuai keinginan. Lalu tambahkan Javascript berikut tepat sebelum </body> :

    <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>

  6. Klik tombol Save untuk menyimpan perubahan.

Demikian Cara Membuat Popular Post Seperti Arlina Design. Kelemahan popular post model ini adalah tidak responsive jika menggunakan thumbnail gambar. Oleh sebab itu kamu bisa menonaktifkan thumbnail pada widget popular postnya. Tapi jika kamu tetap ingin meenggunakan thumbnail, kamu bisa mengutak-atik kode CSS di atas agar bisa tampil dengan thumbnail. Semoga artikel ini bermanfaat.

Silahkan tulis pesan sesuai topik artikel. Dilarang pasang komentar SPAM dan SARA!
Buka Komentar
Tutup Komentar