Kamis, 16 Juni 2011

Cara membuat scroll di area Komentar


Tutorial ini hanya yang suka tampilan simple..hhe. Padahal saya juga tidak tertarik menggunakan tutorial ini , tetapi bagi yang menginginkan blognya terlihat simpel dan ingin tampilan blognya tidak terlihat makan banyak tempat munngkin tutorial ini bermanfaat bagi anda .


Fungsi scroll ini ialah memper pendek tampilan area komentar yang ada di blog sobat , kan biasanya klau komentar yang ada di blog kita sangat buanyak maka kita harus memutar gerigi mouse sampai kebawah sekali.
Nah gimana ..? Tertarik untuk mencobanya ..? Ikutilah langkah-langkah berikut ini .

Cara membuat scroll di area Komentar.
1.Login ke blogger .
2.Ketika di halaman dasbor klik rancangan.
3.Terus menuju lagi ke Edit Html.
4.Jangan lupa mencentang kota kecil Expand Template Widget.
5.Cari kode <dl id='comments-block'>. Bisa menggunakan Control F.
6.Kalau sudah ketemu , letakkan kode dibawah ini di atas kode yang anda temukan tadi.

<div style='overflow:auto; width:ancho; height:400px;'>
7.Cari kode </dl> kemudian letakkan kode </div> dibwah kode yang anda temukan tadi.
8.Maka kodenya akan menjadi seperti 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>

Sebelum di save , baca dulu keterangan berikut ini .
Kode yang berwarna orange itu adalah kode tambahan yang ditambahkan .
Kode yang berwarna biru , Adalah tinggi kotak komentarnya .

9.Kalau sudah save.
10.Lihat hasilnya :D

0 komentar:

Poskan Komentar

Jangan lupa komentarnya.....

Baca Juga Artikel Ini