Setelah kemarin,dapat saran dari sahabat baik Mas Rizky pemilik RIZKY2009 HOME (Asli Cah Tulungagung) yang juga sebagai motivator saya buat terus ngeblog..ehehe(kasih saran dan kritiknya yach)biar blog persahabatan makin maju,hari ini mau kasih tips tentang membuat scroll pada element komentar,jadi gini nich sob,jika blog sahabat banyak yang mengomentari tentu halaman postingya jadi tambah panjang kan???selain membuat loading blog lama,pengunjung yang mau kasih komentar juga sedikit repot karena harus scroll halaman kebawah.
Langsung aja yuk ke cara membuat scrolling kotak komentar
Pertama sign in blogger.com
Kedua klik tata letak >>> edit HTML
Silahkan simpan template sahabat dulu,ini buat backup jika nanti terjadi kesalahan
Jika sudah 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;
}
Lihat kode #comments h4.
Dan tambahkan kode dibawah ini diatasnya kode #comments h4.
#comments {
height:280px;
overflow:auto;
}
Ketiga Klik simpan template .
Silahkan ganti anka yang berwarna merah sesuai keinginan sahabat ini menentukan tinggu element scroll.Mudah bukan??jangan lupa juga buat kasih komentarnya.
Langsung aja yuk ke cara membuat scrolling kotak komentar
Pertama sign in blogger.com
Kedua klik tata letak >>> edit HTML
Silahkan simpan template sahabat dulu,ini buat backup jika nanti terjadi kesalahan
Jika sudah 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;
}
Lihat kode #comments h4.
Dan tambahkan kode dibawah ini diatasnya kode #comments h4.
#comments {
height:280px;
overflow:auto;
}
Ketiga Klik simpan template .
Silahkan ganti anka yang berwarna merah sesuai keinginan sahabat ini menentukan tinggu element scroll.Mudah bukan??jangan lupa juga buat kasih komentarnya.
caRA ini kurang efektif, kalo dibuka pake Operamini, template jadi berantakan..!
BalasHapusLiat tuh tutor dari saya, hasilnya lebih sempurna.
Sumpah templatmu kacau..!!
BalasHapusform komentarnya ada di dalam footer, qiqiqi...
Tips yang sangat bermanfaat sob...
BalasHapus@ kang sugeng, berarti tidak semua browser bisa membuka dgn tampilan baik, begitu ya...
BalasHapusmakasih tutorialnya
BalasHapusok deh sob,mantab nih aq juga dah pasang, mang sip kalau d kasih kkomentar d kasih scrol jd hemat space
BalasHapusTutorialnya mantap! blog saya juga pakai seperti ini, memang ada kelemahannya ketika saya buka pakai hp dengan opera mini, comment yang lainnya gak bisa dilihat, yang bisa dilihat hanya sebatas kotak comment.
BalasHapusTapi saya tetap pakai, sasaran saya yang pakai pc!
wah mantab gan tipsnya punya aq jg dh aq pasang koq... semangat trus yach
BalasHapuswah itu games saya manget brow,,,masa gak tahu sich brow,,,ceritanya mudah kok!!!tinggal ikutin ja he,,he,,he,,
BalasHapusbisa diberlakukan utk wordpress ga??
BalasHapussalam kenal......wah ini tutorial juga lihat di tempat kang sugeng......hm boleh juga!!!
BalasHapustapi blog saya gak banyak komentnya si!!!! wkwkwkwk
iya sig sob kalau oakai cara ini sulit d buka d hape, aq juga pernah mencoba aq buka d hape wlaupun bisa tp ribet
BalasHapusNah... ini lbh rapi skrg, bagus banget, detail form komentarnya jadi keliatan. Templat juga gak amburadul lagi, mantab...
BalasHapusSemoga kita tetap bisa saling berbagi.
Setuju bgt tu ma kang sugeng,jgn pke operamini dweh..bikin streess,
BalasHapusmenggenapi angka 14 menjadi 15... seklaian cari back link kawanm gppkan... nunggu update kamu
BalasHapusGreat article! I have checked all contents of your blog, they all are so attractive and gorgeous, but that one you posted is pretty well.
BalasHapusEngagement Rings
info bermanfaat, thanks friend
BalasHapusThanks bro infonya, ane dah masang lalu pengen ngehapus...
BalasHapusuntung nemu tutorial ini. Good work!
thx infonya,,,
BalasHapus@diamons rings,thank's
BalasHapus@halocor lifestyle:sama-sama sob
@Qori:makasih sob
@muhammad rizal:sama-sama sob
mantab Ang..sekali praktek langsung jadi punyaku..nice..
BalasHapuswah punya ku malah g jd....
BalasHapusmakasih Neh, Sip!
BalasHapussip sip sip gan
BalasHapuscukup membantu :D
Langsung di coba ^_^
BalasHapusTerima kasih berbagi ilmunya.Tipsnya menarik sahabat
BalasHapusKomentar ini telah dihapus oleh administrator blog.
BalasHapusMakasih banyak infonya sob,tipsnya sukses ane terapkan di blogku.Happy weekend and happy blogging.
BalasHapusNah, ini dia tutorial yg saya cari2.
BalasHapusMakasi udah share.