Tuesday, August 03, 2010

CARA MENAMBAHKAN FUNGSI SCROLLING PADA KOTAK KOMENTAR...



Penambahan fungsi scrolling pada kotak komentar, ini merupakan salah satu bagian dari modifikasi kotak komentar, bisa juga dimodifikasi mengubah warna kotak komentar admin blog biar berbeda dengan kotak komentar pengunjung blog, ini nanti  akan saya bahas pada artikel berikutnya, sebenarnya ada beberapa sobat  blogger yang sudah memposting hal ini... tapi setidaknya menambah tutorial di blog ini.



Yang saya bahas di artikel kali ini dikarenakan ada sahabat yang menyinggungnya, sahabat marfin.. " mas saya suka dengan blog mas, saya mau tau cara bikin kolom komentar seperti yangf mas punya, saya pengen belajar mas.. " dan.. "kolom komintarnya ga memakan banyak area gan.. betul gan, saa mau belajar kaya gitu gan."

Langkah-langkahnya adalah berikut ini :
1. Login ke Blogger > Rancangan > Edit HTML > Edit Template ( centang saja expand template widget )...
2. Seperti biasa Copy-Paste dahulu seluruh kode HTML template widget blog kamu ke dalam Notepad dan simpan... untuk jaga-jaga..kan tinggal copy-paste lagi trus simpan & kembali seperti semula..
3. Lalu cari " <dl expr:class='data:post.avatarIndentClass' id='comments-block'>  "  ... ( tekan CTRL + F ..untuk pencarian)...
4. Jika sudah ketemu dan yakin sudah benar tempatnya... lalu Copy kode html Fungsi Scrolling dibawah ini.. tepat di atasnya...

<div style='overflow:auto; width:ancho; height:400px;'>

dan..

</div>
 5. Kemudian cari ( tekan CTRL + F ..untuk pencarian).. "  <b:if cond='data:post.commentPagingRequired'>   ".. lalu copy /div dibawah ini

</div>

Ket : 
overflow =  ini yang membuat fungsi efek scrolling secara otomatis jika sudah melebihi kuota widht & hieght yang kita tentukan...
height =  bisa kamu ubah-ubah nilainya...
widht = ini juga bisa kamu ganti dengan angka ..dan bisa kamu ubah-ubah juga.. misalnya 500px

Kamu juga bisa memodifikasi lagi kode html Fungsi Scrolling diatas... semakin cerdik akan semakin bagus tampilannya.. tambahkan background ..atau border juga bisa ...tapi hati-hati ya..nanti bisa error template blog-nya..  :)

6. Perhatikan.. langkah 4 & 5 kamu Paste-kan seperti Contoh dibawah ini....
<div style='overflow:auto; width:ancho; height:400px;'>

        <dl expr:class='data:post.avatarIndentClass' id='comments-block'>
          <b:loop values='data:post.comments' var='comment'>
            <dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
              <b:if cond='data:comment.favicon'>
                <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
              </b:if>
              <a expr:name='data:comment.anchorName'/>
              <b:if cond='data:blog.enabledCommentProfileImages'>
                <data:comment.authorAvatarImage/>
              </b:if>
              <b:if cond='data:comment.authorUrl'>
                <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
              <b:else/>
                <data:comment.author/>
              </b:if>
              <data:commentPostedByMsg/>

<span><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=8387318707126436251&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E%3A%20#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=450,height=450&quot;); return false;' style='padding:0px 5px; border:1px solid #999;'>Reply</a></span>

            </dt>

<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<i><a href='http://ecaknyo.blogspot.com/2010/08/cara-membuat-warna-kotak-komentar-admin.html' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow003.gif'/> Buat kotak komentar admin seperti ini..</a></i>
<p><data:comment.body/></p>
</dd>
<b:else/>

            <dd expr:class='&quot;comment-body &quot; + data:comment.commentAuthorClass' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
              <b:if cond='data:comment.isDeleted'>
                <span class='deleted-comment'><data:comment.body/></span>
              <b:else/>
                <p>
                  <data:comment.body/>
                  <span class='interaction-iframe-guide'/>
                </p>
              </b:if>
            </dd>

</b:if>

            <dd class='comment-footer'>
              <span class='comment-timestamp'>
                <a expr:href='data:comment.url' title='comment permalink'>
                  <data:comment.timestamp/>
                </a>
                <b:include data='comment' name='commentDeleteIcon'/>
              </span>
            </dd>
          </b:loop>
        </dl>
      </div>
</div>
      <b:if cond='data:post.commentPagingRequired'>
7. Simpan perubahan template nya dan refresh blog kamu lihatlah dibagian komentarnya...

Selamat Mencoba!

52 comments:

  1. four dreams > jika diperlukan.. silahkan di save... ;)

    ReplyDelete
  2. untuk yang komennya banyak tentu sangat bermanfaat, ijin disimpan ya bang ...

    ReplyDelete
  3. Wah keren nih, jadi komentar nggak perlu sampe panjang ke bawah. Coba bikin ah... thx for sharing dan salam kenal !

    ReplyDelete
  4. BRI Jakarta Veteran > kalo johnson sih udah bisa buat trik yg kayak gini.. :D

    Risty > silahkan saja dicoba ris.. :)

    ReplyDelete
  5. nunggu ilmu baru lho aku sobat....wong kito galo.....

    ReplyDelete
  6. Belantara Indonesia > :D ... yg bener "wong blogger galo".. hehe ;)

    ReplyDelete
  7. aahh pusiiing... >.<
    bapak aku ni yg sering ngutak-ngatik script kayak ginii. anaknya mah boro2 ngertii. hihi.
    sudah di follow balik! :D

    ReplyDelete
  8. oya, tadi sempet nyasar ke blog experimen. hihi. sumpah ngerjain orang banget! ;p

    ReplyDelete
  9. kunjungan malam sob,, triknya sangat berguna untuk blog yang ramai komen,

    ReplyDelete
  10. Wulan > wkwkwkwk... wulan...wulan... di save aj dulu ..sapa tw entar kamu perlu tutor ini.. :)

    Dwi > thx gan... tapi repost ini.. :'>

    ReplyDelete
  11. lha ini boz yang tak butuhkan.cz kemarin utak-atik malah rusak(dies)
    oia gimana caranya buat biar menu di navbar bisa ada dua atau tiga menu.maksudnya dropdown menu
    plis ya bung

    ReplyDelete
  12. sigit > naaah...makanya coba tutor ini ya... :D ..menu navbar dropdown ya ?.. wah dpt PR lagi.. oke deh.. ntar gw posting entar...

    ReplyDelete
  13. dpet ilmu baru yg berguna lgi. thanks gan! hehe :)

    ReplyDelete
  14. yes...ni malah ngomongin pribadi: aku dari bayi dah di jogja,bonyok di prabu,gawe sana soalnya..ya kalo balik prabu palong setaun sekali tu aja ga mesti...masalah duit..hohoho

    ReplyDelete
  15. Ikhsan@funztoo > kalo begitu..silahkan dicoba gan.. :)

    Belantara Indonesia > wkwkwk... gw kirain lo lahir & besar2nya di prabu gan...emg ongkos PP dari kota ke kota ini yang bikin mumet... :D

    ReplyDelete
  16. hmm, kl u bikin blogroll postingan dftar teman gmn y caranya?....maaf nih msh br, tnx....salam.

    ReplyDelete
  17. tiwi > oww..blogroll postingan daftar teman ya.. gw dpt PR lagi nih kayaknya... hahaha... :D ..sabar ya nanti gw jawab caranya dipostingan.. tapi antre ya Tiwi... oke

    ReplyDelete
  18. hai, hadir disni menyapamu, pa kabar sob?

    trik yg menarik ini, emg perlu bget fungsi scroll pda kotak komen.. biar loading ny gak lama..

    catet dlu ah.. mw di coba in..

    ReplyDelete
  19. Brooo, aku request pesan penutup. tapi fungsinya yang hanya keluar pesan apabila di close, bukan yang buka setiap halaman keluar pesan penutup, seperti postinganmu yang kemarin.
    mator tengkyu semoga u ngabulin request q :)

    heheheheheh

    ReplyDelete
  20. heloha, tenks infonya.
    salam kenal juga. :)

    ReplyDelete
  21. mixedfresh > irit yg dibagian mananya gan.. :)

    Naruto Original Soundtrack, Naruto Shippuden Movie Original Soundtrack, and Naruto Lyric > biar kalo komennya byk kita gk susah turun ke komen paling bawahnya ..tinggal di scroll sj.. silahkan di save & pelajari..

    UANG GRATIS > oke sob.. tpi sabar ya... antri.. sobat blogger sdh ad yg request jg.. ;)

    orangekusuka > Siip.. thx.. :D

    ReplyDelete
  22. bole ne dicoba....
    biar klo da yg comment g trll memakan space blog..
    tp syg yg comment blog q msih sdikt..hiii...

    SALAM BERKAWAND

    ReplyDelete
  23. anggar berkawand > kalo begitu silahkan di save & dipelajari gan.. gkppa.. kalo kamu rajin bales komen.. trus BW smbil ningalin komen(jejak) ntar jg rame yg komen diblog kamu sob.. Salam Berkawand :)

    ReplyDelete
  24. saya sudah berkali2 coba, tp kenapa yh master, kok tetep g muncul scrooonya

    ReplyDelete
  25. tetep saja brooo, setiap buka halaman lain pasti keluar kata penutup, mau ku hanya keluar kata penutup jika hanya ditutup

    ReplyDelete
  26. saya sudah coba, semoga aja berhasil

    ReplyDelete
  27. Rizky2009 > sy pun waktu itu berkali2 juga mencoba fungsi scrolling ini.. gk langsung berhasil jg..

    .. setelah saya teliti dg cermat.. rupanya ternganggu oleh script tambahan fungsi ReadMore..

    .. jadi kode " <dl id='comments-block'> " ini ada 2.. saya pikir mungkin ini yg bikin error.. krn emg kdg rada suka aneh2 kode script itu loh.. ad2 aj..

    ...setelah sy coba hapus Script Readmore (sy pake yg Readmore Google skrg )..lalu gw instal lagi fungsi scrollingnya dan berhasil... itulah resiko kalo sdh terlalu byk script2 tambahan di widget template kita Riz.. :D

    ReplyDelete
  28. UANG GRATIS > wkwkkwk.... :D ..widget template mu kok bisa begitu sob..aneh.. pdhal kan beda perintah script kata sambutan & kata penutupnya..kan contoh jadinya kayak di blog ini > http://eksperimen284.blogspot.com/ ... bikin binggung sj.. apanya yg salah ya ?.. hihihi

    ReplyDelete
  29. lagi... lagi blog ini membantu saya,,, terima kasih,,, bank andi...

    ReplyDelete
  30. mas seting dah bner...n ukuran heightx dah q kcilin kq g bsa y

    ReplyDelete
  31. Wah sambil lg di perjalanan nih, sambil baca trik dari mas Andi Wong ternyata bagus juga, bermanfaat ni. Saya juga ingin pakai scrolling seperti itu, lumayan supaya tidak menyita banyak ruang kan yah.

    Mas Andi nanti kalo ada pertanyaan pas lagi pasang kode nya boleh tanya-tanya kan? Terimakasih sebelumnya yah.

    ReplyDelete
  32. @:::Aa yuda:::

    :) ..membuat kita tidak susah utk melihat komentar terakhir sekaligus menghemat ruang kotak komentar..

    ..boleh..tanyakan saja..mudah2an pas kita lgi sama OnLine..

    ReplyDelete
  33. wah, keren2 sob tipsnya.... tapi saya belum kuat untuk mikir kode2 rumit kayak gitu jadi kapan kapan aja dicoba. sekarang gue save dulu deh....

    ReplyDelete
  34. @ajurNA:

    oke gan.. kalo begitu silahkan di save dulu & dipelajari... :D

    ReplyDelete
  35. Allo KK. makasi tutornya ya.
    visit blog ku ya..
    www.bassbizz.blogspot.com

    ReplyDelete
  36. Kebetulan. Ini nih yg saya cari-cari. Thx buat ilmunya. Tapi kayaknya saya ga akan pasang scroll pada kotak komentar mengingat yg komen di blog saya juga belum banyak, hehehe...

    ReplyDelete
  37. om andi .. saya mu coba ..
    tapii,kok di template saya gk ada code dl expr:class='data:post.avatarIndentClass' id='comments-block'

    jadi bingung mau taruh dmna ..

    mohon pencerahannya thx..

    ReplyDelete
  38. wah akhir nyaa bisa juga ..

    ternyata dari kode tersebut walaupun tidak ada ..

    cari yg mirip" ..

    terus di utek" lancar deh bisa ...

    thank's for information.

    ReplyDelete
  39. @Republican Wasp:

    disimpan aj dulu gan cendolnya eh tutor-nya..sapa tw nanti akan berguna bwt blognya.. ;)

    ReplyDelete
  40. Thx Sob For Informasinya Sangat bermanfaat...

    ReplyDelete
  41. gan,,,kok sript.na g jalan ea??:)

    give solusi pliessss

    ReplyDelete
  42. mkasih mas...
    sangat bermanfaat sekali..

    ReplyDelete
  43. bagus tutorialnya, baru nemu yang kayak gini

    ReplyDelete
  44. Terima kasih infonya..lumayan buat mempercantik blog...

    ReplyDelete
N.B.
1. Berkomentarlah dengan sopan.
2. Dilarang membuat spam, terutama yang mengandung SARA/ Pornografi/ Judi dan Iklan.

Emoticon : Untuk menyisipkan emoticon dalam komentar, silahkan klik pada emoticons icon yang tersedia dibawah ini untuk melihat kodenya lalu tinggal di copy dan di paste [ sisipkan ] kodenya ke dalam komentar.