Penambahan fungsi scrolling pada kotak komentar, ini merupakan salah satu bagian dari modifikasi kotak komentar.
Materi di artikel kali ini dikarenakan ada sobat blogger yang menanyakannya, 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."
1. Login ke Blogger > Rancangan > Edit HTML > Edit Template, centang expand template widget.
2. Backup. Copas dahulu seluruh kode HTML template ke dalam Notepad dan simpan.
3. Lalu cari dengan Ctrl F "<dl expr:class='data:post.avatarIndentClass' id='comments-block'>".
4. Copy kode html fungsi scrolling dibawah ini, tepat di atasnya.
<div style='overflow:auto; width:ancho; height:400px;'>
dan..
dan..
</div>
5. Kemudian cari " <b:if cond='data:post.commentPagingRequired'>", lalu copy </div> dibawah ini.
</div>
overflow, ini yang membuat fungsi efek scrolling secara otomatis jika sudah melebihi tinggi yang sudah kita tentukan.
height, sesuaikan nilainya.
widht, sesuaikan nilainya.
6. Perhatikan langkah 4 & 5, paste 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='"comment-author " + 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='"https://www.blogger.com/comment.g?blogID=8387318707126436251&postID=" + data:post.id + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E%3A%20#form"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=450,height=450"); 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='"comment-body " + 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'>
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='"comment-author " + 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='"https://www.blogger.com/comment.g?blogID=8387318707126436251&postID=" + data:post.id + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E%3A%20#form"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=450,height=450"); 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='"comment-body " + 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 template dan reload blog untuk melihat perubahan dibagian komentarnya.
Selamat Mencoba.
oke sobat aku save :)
ReplyDeletefour dreams > jika diperlukan.. silahkan di save... ;)
ReplyDeleteuntuk yang komennya banyak tentu sangat bermanfaat, ijin disimpan ya bang ...
ReplyDeleteWah keren nih, jadi komentar nggak perlu sampe panjang ke bawah. Coba bikin ah... thx for sharing dan salam kenal !
ReplyDeleteBRI Jakarta Veteran > kalo johnson sih udah bisa buat trik yg kayak gini.. :D
ReplyDeleteRisty > silahkan saja dicoba ris.. :)
nunggu ilmu baru lho aku sobat....wong kito galo.....
ReplyDeleteBelantara Indonesia > :D ... yg bener "wong blogger galo".. hehe ;)
ReplyDeleteaahh pusiiing... >.<
ReplyDeletebapak aku ni yg sering ngutak-ngatik script kayak ginii. anaknya mah boro2 ngertii. hihi.
sudah di follow balik! :D
oya, tadi sempet nyasar ke blog experimen. hihi. sumpah ngerjain orang banget! ;p
ReplyDeletekunjungan malam sob,, triknya sangat berguna untuk blog yang ramai komen,
ReplyDeleteWulan > wkwkwkwk... wulan...wulan... di save aj dulu ..sapa tw entar kamu perlu tutor ini.. :)
ReplyDeleteDwi > thx gan... tapi repost ini.. :'>
lha ini boz yang tak butuhkan.cz kemarin utak-atik malah rusak(dies)
ReplyDeleteoia gimana caranya buat biar menu di navbar bisa ada dua atau tiga menu.maksudnya dropdown menu
plis ya bung
sigit > naaah...makanya coba tutor ini ya... :D ..menu navbar dropdown ya ?.. wah dpt PR lagi.. oke deh.. ntar gw posting entar...
ReplyDeletedpet ilmu baru yg berguna lgi. thanks gan! hehe :)
ReplyDeleteyes...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
ReplyDeleteIkhsan@funztoo > kalo begitu..silahkan dicoba gan.. :)
ReplyDeleteBelantara Indonesia > wkwkwk... gw kirain lo lahir & besar2nya di prabu gan...emg ongkos PP dari kota ke kota ini yang bikin mumet... :D
hmm, kl u bikin blogroll postingan dftar teman gmn y caranya?....maaf nih msh br, tnx....salam.
ReplyDeletetiwi > 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
ReplyDeletelebih ngirit tempat ni
ReplyDeletehai, hadir disni menyapamu, pa kabar sob?
ReplyDeletetrik yg menarik ini, emg perlu bget fungsi scroll pda kotak komen.. biar loading ny gak lama..
catet dlu ah.. mw di coba in..
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.
ReplyDeletemator tengkyu semoga u ngabulin request q :)
heheheheheh
heloha, tenks infonya.
ReplyDeletesalam kenal juga. :)
mixedfresh > irit yg dibagian mananya gan.. :)
ReplyDeleteNaruto 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
bole ne dicoba....
ReplyDeletebiar klo da yg comment g trll memakan space blog..
tp syg yg comment blog q msih sdikt..hiii...
SALAM BERKAWAND
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 :)
ReplyDeletesaya sudah berkali2 coba, tp kenapa yh master, kok tetep g muncul scrooonya
ReplyDeletetetep saja brooo, setiap buka halaman lain pasti keluar kata penutup, mau ku hanya keluar kata penutup jika hanya ditutup
ReplyDeletesaya sudah coba, semoga aja berhasil
ReplyDeleteRizky2009 > sy pun waktu itu berkali2 juga mencoba fungsi scrolling ini.. gk langsung berhasil jg..
ReplyDelete.. 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
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
ReplyDeletelagi... lagi blog ini membantu saya,,, terima kasih,,, bank andi...
ReplyDeletemas seting dah bner...n ukuran heightx dah q kcilin kq g bsa y
ReplyDeleteWah 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.
ReplyDeleteMas Andi nanti kalo ada pertanyaan pas lagi pasang kode nya boleh tanya-tanya kan? Terimakasih sebelumnya yah.
@:::Aa yuda:::
ReplyDelete:) ..membuat kita tidak susah utk melihat komentar terakhir sekaligus menghemat ruang kotak komentar..
..boleh..tanyakan saja..mudah2an pas kita lgi sama OnLine..
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@ajurNA:
ReplyDeleteoke gan.. kalo begitu silahkan di save dulu & dipelajari... :D
Allo KK. makasi tutornya ya.
ReplyDeletevisit blog ku ya..
www.bassbizz.blogspot.com
wahh boleh dipraktekan nihh :D
ReplyDeleteRiyan Permana
@CrazyPolar:
ReplyDeleteiya sob.. woke ke TKP :)
@Riyan:
ReplyDeletesilahkan dipraktekan sob.. ;)
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...
ReplyDeleteom andi .. saya mu coba ..
ReplyDeletetapii,kok di template saya gk ada code dl expr:class='data:post.avatarIndentClass' id='comments-block'
jadi bingung mau taruh dmna ..
mohon pencerahannya thx..
wah akhir nyaa bisa juga ..
ReplyDeleteternyata dari kode tersebut walaupun tidak ada ..
cari yg mirip" ..
terus di utek" lancar deh bisa ...
thank's for information.
@Ramdan Sucipta:
ReplyDeletebaguslah kalo sdh berhasil.. :)
@Republican Wasp:
ReplyDeletedisimpan aj dulu gan cendolnya eh tutor-nya..sapa tw nanti akan berguna bwt blognya.. ;)
terimakasih atas ilmunya...
ReplyDeleteThx Sob For Informasinya Sangat bermanfaat...
ReplyDeletegan,,,kok sript.na g jalan ea??:)
ReplyDeletegive solusi pliessss
mkasih mas...
ReplyDeletesangat bermanfaat sekali..
bagus tutorialnya, baru nemu yang kayak gini
ReplyDeletetrims gan..
DeleteTerima kasih infonya..lumayan buat mempercantik blog...
ReplyDelete