earth

Guestbook

/* Iklan google ads */
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...
  • Artikel Terkait Dengan HTML Tutorials

    Terimakasih sudah membaca artikel SC Community's Blog

    16 komentar

    assalamu'alaikum ...
    tah geuning tos aya deui, Kang artikelna. Alhamdulillah.
    Abi pertamax ya hehe ... ka-isme-an yeuh!

    12 Desember 2009 pukul 11.04  

    Mampir siang ke rumahnya kang EnEs. Baca2 dulu ah. Hmm, tutorial mantap lagi nih.

    12 Desember 2009 pukul 11.15  

    Kalau mengganti foto slide show dengan foto kita, gimana Kang? Punten ah ngarerepot

    12 Desember 2009 pukul 11.17  

    kalau blog saya dikasih beginian apa ndak berat yah kang

    12 Desember 2009 pukul 12.19  

    Mantabs... Makasih triknya sob...

    12 Desember 2009 pukul 12.26  

    coba dulu...biar gak penasaran!

    12 Desember 2009 pukul 14.35  

    Aduh, lawas tilawas guru..asa waas uy guru ngasih tutor deuim, hehe...nuhun ah.
    tips menarik...

    12 Desember 2009 pukul 15.18  

    Terima kasih masih menyempatkan memberi tutorial di sela2 kesibukan Kang Enes...

    12 Desember 2009 pukul 22.07  

    salam sobat
    trims ilmu dan sharingnya
    saya pingin juga tuh,,bikin scrol pada related post..biar menghemat tempat .

    14 Desember 2009 pukul 19.27  

    Maksih kang ilmunya, sangat bermanfaat,,
    Kang ada bingkisan lagi semoga berkenan silahkan diambil yach..

    15 Desember 2009 pukul 11.38  

    Di blog saya gak ada tuh div class='similiar' atau berbeda kali. Apa ya?

    26 Desember 2009 pukul 19.16  

    mantab kawan blog q juga dah aq pasang

    1 Januari 2010 pukul 19.47  

    code yang dimaksud gak di blog aQ kang..
    gimana???

    4 Mei 2010 pukul 09.11  

    makasih suhu aye baru newbie nih baru bikin blog 1 minggu

    9 Juni 2010 pukul 21.01  

    pake cara apa aja drtd ga berhasil :( hiks,, related pos sm similarnya ga ketemu om...

    17 Desember 2010 pukul 00.11  

    Tambahkan Komentar

    • Dimohon untuk tidak mencantumkan link aktif pada komentar sobat.
    • Gunakan Ruang Tanya pada TabView Menu, jika ingin menanyakan sesuatu yang tidak ada kaitannya dengan artikel di atas.
    Kang eNeS

    Terimakasih atas semua apresiasi yang sobat berikan.

    10 Artikel Terbaru

    10 Artikel Terpopuler