NEWS UPDATE :
Saturday, April 7, 2012

Cara Membuat Scroll Pada Area Komentar Blog

Share to :

Bagi sobat yang menginginkan blog kita tampil dengan lebih hemat tempat. Artinya tidak terlalu panjang blog kita memakan tempat dan waktu loading yang lama. Saat tulisan kita menarik, dan banyak komentar yang masuk, maka yang terjadi adalah kita harus memutar gerigi mouse sampai ke bawah sekali. :o

Nah.. bagi sobat yang menginginkan blog kita tampil dengan simple, tidak terlalu panjang atau lebar. Salah satu cara yang dapat kita lakukan adalah dengan membuat scroll pada area komentar blog kita. Dengan demikian blog kita akan lebih hemat tempat. Sehingga seseorang yang ingin berkomentar di postingan kita yang sudah banyak komentarnya tidak harus mengeser sampai ke bawah. ;)

Cara Membuat Scroll Pada Area Komentar :

1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Tata Letak.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Cari kode berikut ini <dl id='comments-block'>
6.  Setelah ketemu, taruh kode berikut ini di atasnya.
<div style='overflow:auto; width:ancho; height:400px;'>
7. Cari kode berikut ini </dl> dan taruh kode </div> di bawahnya.
Contoh lengkapnya seperti kode di bawah ini :
<div style='overflow:auto; width:ancho; height:300px;'>
      <dl 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'>
            <a expr:name='data:comment.anchorName'/>
            <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/>
          </dt>
          <b:if cond='data:comment.author == data:post.author'>
<dd class='owner-Body'>
<p><data:comment.body/></p>
</dd>
<b:else/>
          <dd class='comment-body'>
            <b:if cond='data:comment.isDeleted'>
              <span class='deleted-comment'><data:comment.body/></span>
            <b:else/>
              <p><data:comment.body/></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>
8. Kode yang berwarna merah adalah kode yang kita tambahkan.
9. Simpan Template jika sudah selesai.

Sekian dulu tentang Cara Membuat Scroll Pada Area Komentar. :)
Jangan lupa untuk berkomentar agar saya dapat mengunjungi sobat kembali untuk mengucapkan terimakasihku atas kunjungan sobat. :k
Selamat mencoba dan semoga sukses...http://4.bp.blogspot.com/-_n9VWeO3SuM/T4AUPqhyQ2I/AAAAAAAAAk4/iz-maYaYYQg/s72-c/blogger.png


Tulisan ini menarik? Copas permalink ini blogmu donk!

22 komentar:

Harrys lala said... Balas Komentar

hanya untuk pertamaxxx! :r

AbduGreen said... Balas Komentar

Selamat menikmati yang pertamax..

Mbah Qopet said... Balas Komentar

hmm dibuat html dulu ya bro :D

btw kmn aja nih baru muncul ?

AbduGreen said... Balas Komentar

@Mbah Qopet: iya sobat..

hehe.. refreshing sob,... aiaiaiai

binkbenk said... Balas Komentar

wehh... keren sob ijin mau coba ya..

AbduGreen said... Balas Komentar

Ok.. silahkan di coba sob..

Fahmi Setiawan said... Balas Komentar

Langsung pake overflow:auto; juga bisa bro. tapi di selipin di css komentar .
misalkan

.comments{
padding:100px;
margin:100px;
overflow:auto;
}

ngga usah rumit2. hahaaa

AbduGreen said... Balas Komentar

Ok.. maukkan yang bagus bro,,, nice koment,, makasih dah mampir..

Fahmi Setiawan said... Balas Komentar

Oke :D masama :D

AbduGreen said... Balas Komentar

@Fahmi Setiawan: sippp.. salam kenal brow..

Fahmi Setiawan said... Balas Komentar

@Admin :Oke salam kenal juga :D
Yang enak panggilnya apa ya? Bang aja deh.
Bang saya mo minta tolong ya, tolong sharein Template saya, dengan cara ngepost di blog abang... kalo abang ga mau yaudah gapapa :D
Saya cuma butuh pertolongannya aja :D thx .

AbduGreen said... Balas Komentar

Berhubung ane juga lagi gak ada ide buat memposting artikel... jadi saya mau,, oke deh,,,, siipp dah,,,

Fahmi Setiawan said... Balas Komentar

facebook saya Fahmi Setiawan ^^

KERAJINAN MARMER said... Balas Komentar

TUTORIALMU SANGAT MEMANJAKAN PENGUNJUNG GAN MANTAB BANGET....

AbduGreen said... Balas Komentar

oh ya,,, makasih gan.. moga bermanfaat buat sobat... semuanya... alhamdulillah

MIKROTIK said... Balas Komentar

thanks tipsnya sob..
mantab sob..

DENNY ABY said... Balas Komentar

thx sob

Makcum Abdu said... Balas Komentar

@DENNY ABY:OK sobat

HENDRO said... Balas Komentar

Ok ma ksh gan...

Makcum Abdu said... Balas Komentar

@HENDRO:sip

ibnoe.info said... Balas Komentar

sepertinya ga support sama template saya gan..... :( , udah coba berkali-kali tapi hasilnya tetap aja ga ada effect...

Farid Wajdi Kardbri said... Balas Komentar

kok gak berhaasil gan :(

Post a Comment

Berkomentarlah di blog ini dengan Etika yang Baik dan Cerdas
- Jangan mencantumkan link apapun, ex: http://xxx
- Komentar yang Nyepam TIDAK AKAN SAYA PUBLISH
- Jangan sampai komentarmu masuk ke dalam SPAM!

 
Support : Creating Website | My Pages | Makcum Abdu
Copyright © 2011. Abdu-Green's Blog - All Rights Reserved
Template Modify by Creating Website
Proudly powered by Blogger