1 Cara Membuat Scroll Pada Area Komentar Postingan Blog

 

Scroll ini berguna banget buat kita yg menginginkan komentar2 postingan agar tidak terlihat panjang dan memakan tempat..
maka kita cukum menggeser scroll'y saja kebawah untuk melihat beberapa komentar2nya.. bagaimana ? berguna bgt kan :) 

Cara Membuat Scroll di 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.
Untuk lebih lengkapnya seperti di bawah ini 

<div style='overflow:auto; width:ancho; height:400px;'>

      <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. kalau sudah, Simpan Template.

Tambahan:Apabila cara di atas tidak bisa, mungkin karna bawaan template'y.

untuk itu ikuti cara berikut:

1. Masuk ke Acount blogger anda atau ke Dashboard
 

2. Pilih Layout, kemudian klik Edit HTML
 

3. Cari kode seperti di bawah ini biasanya di atas kode ]]></b:skin> cari2 aja diatas kode ]]></b:skin> :

/* 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;
}

4. Tambahkan kode berikut di atas kode : #comments h4

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

5. Angka 400px : adalah tinggi kotak scroll itu, tinggal diganti sesuai selera kita.
 
6. Jika sudah jangan lupa Save template.

Selamat mencoba, apabila berhasil.. jgn lupa klik button Google+1-Nya yaa.. :) terima kasih..