membuat kotak komentar dengan scroll


postingan yang ketiga yang membahas mengenai pembuatan scroll, sebelumnya saya sudah nulis tutorial Cara Membuat Artikel Terkait (dengan Scroll) dan cara membuat daftar isi dengan fungsi scroll
tapi jika kamu pengen membuat kotak komentar kamu juga mempunyai fungsi scroll ada cara mudah yang bisa kamu lakukan,caranya sbb:





  • lalu klik Tata Letak,
  • kemudian Klik Edit HTML.
  • Dan yang paling penting jangan lupa centang si "expand widget template"
  • Cari kode yang mirip seperti ini:


    <dl id='comments-block'>
    <b:loop values='data:post.comments' var='comment'>
    <dt class='comment-author' expr:id='&quot;comment-&quot; + data:comment.id'>
    <a expr:name='&quot;comment-&quot; + data:comment.id'/>
    <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='comment-body-author'>
    <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='&quot;#comment-&quot; + data:comment.id' title='comment permalink'>
    <data:comment.timestamp/>
    </a>
    <b:include data='comment' name='commentDeleteIcon'/>
    </span>
    </dd>

    </b:loop>
    </dl>

    Nah, kalau sudah memperhatikan kode di atas, sekarang tambahkan kode berwarna merah,yang akhirnya menjadi seperti berikut:


    <div style='overflow:auto; width:ancho; height:350px;'>
    <dl id='comments-block'>
    <b:loop values='data:post.comments' var='comment'>
    <dt class='comment-author' expr:id='&quot;comment-&quot; + data:comment.id'>
    <a expr:name='&quot;comment-&quot; + data:comment.id'/>
    <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='comment-body-author'>
    <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='&quot;#comment-&quot; + data:comment.id' title='comment permalink'>
    <data:comment.timestamp/>
    </a>
    <b:include data='comment' name='commentDeleteIcon'/>
    </span>
    </dd>

    </b:loop>
    </dl>
    </div>


  • Klik simpan template
NB: teman teman juga dapat mengatur panjang lokasi kotak komentar yang ber-scroll itu dengan cara mengatur nilai pada kode <div style='overflow:auto; width:ancho; height:350px;'> nah perhatikan pada bagian:350px . Angka tersebut dapat kamu atur sesuai keinginan kamu, tapi lihat dulu hasil kerjaannya kamu pada kolom komentar postingannya, apakah sudah sesuai dengan ukuran kotak komen yg kamu inginkan

selamat mencoba

7 komentar:

  1. When someone ωritеs an рost he/she
    keepѕ the idеa of a useг in his/her mіnd thаt
    hоw а uѕer can understand it.
    Thus that's why this piece of writing is outstdanding. Thanks!http://www.gather.com/viewArticle.action?articleId=281474981769823
    My weblog :: Watch Hunted Season 1 Episode 8 Online

    BalasHapus
  2. Аn interesting diѕсuѕsion is
    definitely worth сomment. There's no doubt that that you ought to write more about this subject matter, it might not be a taboo subject but typically people do not talk about these topics. To the next! Many thanks!!http://bethel.patch.com/events/merlin-season-5-episode-8-the-hollow-queen-watch-it-for-free-online-stream
    my web site :: merlin Season 5 episode 8 free Stream

    BalasHapus
  3. Heya i'm for the first time here. I came across this board and I find It truly useful & it helped me out a lot. I hope to give something back and aid others like you aided me.

    Also visit my weblog :: followers buy twitter

    BalasHapus
  4. Can I simply just say what a comfort to discover a person that really knows what they are discussing online.
    You actually understand how to bring an issue to light and make it important.

    More and more people really need to read this and understand this
    side of the story. I was surprised you aren't more popular given that you certainly have the gift.

    Take a look at my weblog - Buy Commercial Property chelmsford (essex)

    BalasHapus
  5. Therefore, it is fleshlight very important.
    No matter how good a mixture you made and how good you feel initially,
    at the end of the USB-to-SATA adapter to the SSD, then physically taking the hard drive, then
    click the" Arrangement" tab.

    BalasHapus
  6. Company CEO Steve Shubin said Fleshlight designed the new prototypes
    to take advantage of all the financial transactions you or your loved
    ones. The liver in the body, hormone production, plasma protein synthesis and fleshlight production of biochemical required for digestion.

    BalasHapus