Membuat Scroll Pada Kotak Komentar Blog

Written By Hanif Aghar on Selasa, 24 Juli 2012 | 6:27 AM

Pagi ini saya akan memberikan Sedikit Tutorial Cara Membuat Scroll Pada Kotak Komentar Blog. Sebelum memulai Tutorial kali ini, saya ucapkan banyak Terima Kasih kepada Kang ibnu_rahmadi (http://kakve-santi.blogspot.com/) yang sudah mau berkomentar dan Bertanya Bagaimana Cara Membuat Kotak Komentar Threaded dengan Scroll seperti di Blog ini. Nah karena itu saya jadi termotivasi Membuat Postingan ini. hehehe

Kotak komentar merupakan Kelengkapan Blog yang sangat Penting. Yang fungsinya adalah untuk saling tukar pendapat, saling review dan sarana untuk saling mengenal antara sesama blogger dll. Tanpa adanya Kotak Komentar dan Komentator, Suatu Blog akan terasa Sepi dan merupakan Blog yang hidupnya Sendirian.

Lain halnya dengan Blog yang ramai dengan Komentator,  sehingga kotak komentarnya akan dipenuhi dengan komentar-komentar dan membuat kotak komentar akan semakin memanjang ke bawah, jadi yang ingin memberi komentar baru, harus menggerakkan scroll terus hingga kebawah. Selain itu, tutorial ini juga berfungsi untuk optimasi loading blog yang lambat karena banyaknya komentar. Jika Sobat Belum Membuat Kotak Komentar Thread Silahkan Klik Disini. Jika Sudah Ok Langsung saja Ikuti Langkah" di Bawah ini :

Untuk Kotak Komentar Threaded :

1. Masuk Blogger.com
2. Pilih Template "Sebelumnya Backup dulu Template Blog Sobat".
3. Klik Edit HTML->>Jangan lupa Ceklis "Expand Widget Templates".
4. Untuk mempermudah pencarian Tekan Ctrl+F, dan Cari Kode .comments .comments-content .comment-thread ol { Atau kurang Lebih seperti dibawah ini.

.comments .comments-content .comment-thread ol {
  list-style-type: none;
  padding: 0;
  text-align: none;}

5. Jika sudah ketemu, Silahkan Sobat Copas Kode dibawah dan Pastekan Setelah(dibawah) Kode .comments .comments-content .comment-thread ol { Tadi.


max-height:350px;border:0px solid #eee;overflow:auto;


6. Sehingga akan Menjadi Seperti dibawah ini:


.comments .comments-content .comment-thread ol {
  max-height:350px;border:0px solid #eee;overflow:auto;
  list-style-type: none;
  padding: 0;
  text-align: none;}

7. Simpan/Save dan lihat Hasilnya.

Keterangan : Untuk Kode yang berwarna Merah adalah ukuran maksimal Scroll, Silahka Sobat rubah sesuai keinginan Sobat.


Untuk Kotak Komentar Biasa :

1. Masuk Blogger.com
2. Pilih Template "Sebelumnya Backup dulu Template Blog Sobat".
3. Klik Edit HTML->>Jangan lupa Ceklis "Expand Widget Templates".
4. Untuk mempermudah pencarian Tekan Ctrl+F, dan Cari Kode #comments-block {
5. Jika sudah Ketemu Seperti biasa silahkan Copas kode di bawah  ini dan Pastekan setelah(dibawah) kode #comments-block { yang tadi.

max-height:350px;border:1px solid #eee;overflow:auto;

Keterangan : Untuk Kode yang berwarna Merah adalah ukuran maksimal Scroll, Silahka Sobat rubah sesuai keinginan Sobat. Dan apabila template Sobat ada kode border:0px dotted #ccc; silahkan hapus kode tersebut.

6. Simpan/Save dan lihat Hasilnya.

Bagaimana apakah Sobat Berhasil menerapkannya di Blog Sobat...??? Silahkan Tinggalkan Komentar, Kritik serta Saran Sobat di Kotak Komentar saya. Ok mungkin Hanya itu yang bisa saya Sampaikan kali ini, lebih dan kurangnya Mohon dimaafkan. Selamat Mencoba dan Semoga Bermanfaat. :)

Baca Juga yang ini Sob...:

24 komentar:

  1. Aduh sob, ane coba koq gak bsa yah, d template ane gak ada kode
    .comments .comments-content .comment-thread ol {

    jd ane bingung mau ane taruh mna....????
    mohon pncerahanya ya sob...... :D

    thanks sob,,...

    BalasHapus
    Balasan
    1. Nah Sobat Coba cari #comments-block { Setelah Ketemu Coba Copas kode berikut ini dan Pastekan di Bawah Kode #comments-block { yang Tadi...

      .comments .comments-content .comment-thread ol {
      max-height:350px;border:0px solid #eee;overflow:auto;
      list-style-type: none;
      padding: 0;
      text-align: none;}

      Semoga Berhasil Sobat... :)

      Hapus
    2. wah sob....
      template ane juga gag ada kode #comments-block { ,...

      gmna nih....?????

      Hapus
    3. Haduh Susah Juga Yah.., Okeh dah Coba Sobat Cari Kode ]]>< /b:skin> "tanpa Spasi", lalu Copas Kode yang diatas tadi dan Pastekan Tepat Diatas Kode (]]>< /b:skin>).

      Monggo di Coba lagi Sobat... Semoga Berhasil yah... :)

      Hapus
    4. good sob......
      sekarang ane berhasil sob..... :D
      coba sobat lihat di http://zlems-creative.blogspot.com/p/buat-banner-flash.html bagian komentar.....

      thanks banget ya sob....... :D

      Hapus
  2. mantap nih..
    trimksih tutorianya bang..:)

    BalasHapus
  3. Berpengaruh ya dengan template yg dipake? Kok saya gak bisa. :(

    BalasHapus
    Balasan
    1. Mungkin yang Mass rasakan Sama dengan yang Teman saya Zlems Creative Rasakan. Jadi Silahkan Di Coba Cara yang Diatas saya Kasih.

      Silahkan dicoba, & Semoga Berhasil.. :)

      Hapus
  4. mantab sob infonya..
    jadi lebih menimalis nih....
    Nice shared.....

    BalasHapus
  5. @Zlems Creative : Wah Akhirnya Berhasil Juga, Senang rasanya bisa Membantu.. Thanks ya Sob sudah Mau Mencoba Tutor Blogger saya.. hehehe :)

    @Aspar69 : Siip, Makasih juga atas Komentarnya Sobat.. :)

    @All : Thanks Banget Atas Komentar Kalian.. :)

    BalasHapus
  6. Nice to be here.

    http://netdotph.blogspot.com

    BalasHapus
  7. punya saya koq ndak bisa jd ya mas..??

    BalasHapus
    Balasan
    1. Mungkin Gejalanya sama Mirip yang Teman saya Zelms Creative Rasakan.., Coba deh Mass Baca Komentar diatas.., Mungkin ada Cara Untuk Mengatasinya... hehehe :)

      Selamat Mencoba dan Semoga Berhasil...

      Hapus
  8. Saya sangat suka Cara Sobat Dark Optimus dalam memberikan panduan khususnya pada panduan "membuat Scroll Pada kotak Komentar" ini, pertahankan Sob...semoga sukses selalu

    BalasHapus
    Balasan
    1. Wahh Terima kasih banyak komentarnya Sob... Sukses selalu juga buat Sobat.. :)

      Hapus
  9. nah ini yg gw cari...makasih sob tutorialnya

    BalasHapus
  10. Salam Kenal gAN.,? Terima Kasih, langsung Jadi nich.,,.,. dan Sudih kiranya aGAN kunjungi balik Ntuk cEK di Link BLog ane kesini= http://sukarim.blogspot.com/p/tukaran-link.html

    .......................................................Salam bY SUkarim

    BalasHapus
  11. gan ane cb kok tombol balasnya gak ada kenapa y gan,ane pake yg dg cr nyari kode #comments-block

    BalasHapus
  12. thank gan, infonya sangat bermanfaat n sdh terpasang dengan sempurna diblog ane. ditunggu kunjungan baliknya di http://tutorial-tipdantrik.blogspot.com/

    BalasHapus
  13. Thanks buat tutorial nya sobat! Saya sudah terapkan di blog saya. THANKS :)

    BalasHapus

Silahkan Tulis Komentar, Kritik dan Saran Anda di Sini. Namun saya Mohon untuk tidak menggunakan komentar spam dan berkomentarlah yang sopan. Link aktif dari sumber lain yang ditulis pada kotak komentar akan saya Hapus. Terima kasih..

 
berita unik