Saturday, December 7, 2013

Browse Manual » Wiring » » » » » » » » Membuat Scroll Pada Related Post Artikel Terkait

Membuat Scroll Pada Related Post Artikel Terkait

Memulai lagi menulis tutorial sungguh terasa sulit, apalagi di tengah kesibukan akhir tahun yang banyak menyita waktu dan pikiran. Terlebih adanya beberapa urusan penting yang harus segera dituntaskan membuat raga lelah dan otak penat. Namun demi sobat semua, saya coba juga menulis tutorial ini meski tulisannya mungkin basi dan kurang bermanfaat.

Pada tulisan kali ini saya akan mencoba membahas cara membuat scroll pada related post. Sebagaimana sobat ketahui bahwa menambahkan related post atau artikel terkait kedalam blog memang akan sangat menguntungkan karena pembaca dapat melihat langsung judul-judul artikel yang berhubungan dengan artikel yang tengah dibacanya. Namun jika jumlah related post itu sangat banyak, apalagi jika satu artikel dibuat dalam dua atau tiga kategori, maka daftar related post ini akan memanjang dan menyita halaman. Akibatnya kotak komentar menjadi tergeser dan berada paling bawah sehingga cukup menyita waktu bagi pembaca jika ingin menuliskan komentar di dalamnya.

Untuk mengatasi hal tersebut kamu bisa membuatkan scroll pada related post ini. Cara membuatnya pun cukup mudah, kamu tinggal menambahkan beberapa perintah kedalam script HTML-nya. Untuk mudahnya kamu bisa mengikuti langkah-langkah berikut:
  • Login ke akun Blogger, pilih Tata Letak, lalu pilih Edit HTML.
  • Beri tanda centrang pada Expand Template Widget.
  • Cari kode berikut (gunakan Control F atau F3):

    <b:if cond=data:blog.pageType == &quot;item&quot;>
    <div class=related-posts>
    jika tidak ada cari kode ini:

    <b:if cond=data:blog.pageType == &quot;item&quot;>
    <div class=similiar>
  • Setelah ketemu, gantikan kode <div class=related-posts atau similiar> dengan kode berikut:

    <div class=related-posts style=border:1px solid #CCC; padding:10px; width:95%; height:250px; overflow:auto;>
    atau dengan kode ini:

    <div class=similiar style=border:1px solid #CCC; padding:10px; width:95%; height:250px; overflow:auto;>
  • Atur lebar (width) dan tinggi (height) sesuai keinginan kamu.
  • Simpan hasil kerjaan kamu dan ucapkan alhamdulillah.....

Nah, sekarang related post pada blog kamu tidak terlihat memanjang lagi sehingga cukup memudahkan bagi para pembaca jika ingin menuliskan komentar. Cukup mudah kan?

Ok brow, selamat mencoba...

No comments:

Post a Comment