14 Cara Membuat Scroll Pada Daftar Komentar

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

imageBeberapa waktu lalu, beberapa postingan anaa mendapatkan banyak komentar hingga puluhan (belum sampai ratusan nie?) Alhamdulillah apresiasi yang indah dari rekan-rekan sahabat blogger. Tapi rasanya kurang nyaman juga melihat sebuah halaman dibuka dan daftar komentarnya panjang sekali, beberapa kali blogwalking dan melihat disebagian blog sahabat lainnya ada yang daftar komentarnya memakai scroll, anaapun tertarik untuk membuat hal serupa itung itung hemat halaman.

Ternyata mudah saja untuk membuat scroll pada daftar komentar, kode yang ditambahkan jg sangat sedikit, nah berikut selengkapnya:

1. Dalam keadaan loggin, klik tata letak (layout)=> Edit HTML=> Cari kode berikut:

/* Comments
-------------------------- */
#comments h4 {
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: $sidebarcolor;
}
#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block .comment-author {
margin:.5em 0;
}
#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.deleted-comment {
font-style:italic;
color:gray;
}


Tambahkan kode berikut di atas kode #comments h4


#comments {
height:280px;
overflow:auto;
}

Save template!

 

 


ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Tips Trik Blogging

14 komentar :

  1. Menarik. Kapan2 boleh juga dicoba untuk format tampilan komentar yang berbeda :)

    BalasHapus
  2. langsung pake ah....
    makasih ya......

    BalasHapus
  3. biar kolom komentarnya (kotak untuk menulis komentar ini) di luar (biar tidak masuk dalam scroll) gimana caranya ya?
    jadi yang masuk scroll hanya komentarnya saja...

    BalasHapus
  4. @ khery: format tampilan komentar yg brbeda mksdx?
    @ nova: silahkan, sama2, thanks jg nov
    @ narti: hem? iya jg ya, bs jd newbi yg mau comment g' prhatiin scroll tak lihat pl kolom nulis komentarx? ntr coba otak atik dl or search digoogle

    BalasHapus
  5. ternyata mudah juga yach buat scrol
    thx yaxh udah berkunjung dan dukung prafangga :))

    BalasHapus
  6. iya, mksh jg kunjungan dan komentarx

    BalasHapus
  7. wes mantab nih.... nanti d coba deh

    BalasHapus
  8. Silahkn, palg blog antum komentarx dah capai ratusan kali ya?

    BalasHapus
  9. he..he... aku juga ikut tutorial ini.. muantaavvv ... !

    BalasHapus
  10. manteb infonya bro... thx banget

    BalasHapus
  11. Tengqyu infonya... Jangan lupa mampir..

    BalasHapus
  12. boleh di coba nih
    http://zaid-info.blogspot.com/

    BalasHapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB:Sebelum menyisipkan kode silahkan gunakan tool konversi kode terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar
Konversi Kode di Sini!