16 Membuat Scroll Pada Daftar Komentar (New)

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

image 

Postingan ini untuk menjawab pertanyaan ukhty narti pada trik membuat scroll pada daftar komentar pertama seperti terlihat pada image diatas. jadi perbedaannya dengan trik sebelumnya kolom untuk menuliskan komentar berada diluar daftar komentar. Untuk hasil atau contohnya seperti daftar komentar pada blog ini

  • Log in ke blogger=> pada dasbor=> klik tata letak=> edit HTML=> Expand Template Widget

Cari kode berikut: 

<dl id='comments-block'> 

Untuk memudahkan gunakan tab CTRL+f

membuat scroll pada daftar komentar

image

  • Sisipkan kode berikut di atas kode tadi:

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

  • Scroll kebawah sampai anda temukan kode </dl> atau gunakan lagi   tombol  ctrl+f untuk mencari

membuat scroll pada daftar komentar

  • Setelah dapat letakkan kode berikut setelahnya

</div>

  • Simpan template.

Kalau masih bingung, lihat kode berikut, yang warna merah adalah kode yang harus anda sisipkan. Untuk ukuran height bisa anda ganti sesuai selera

<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>

Jangan lupa simpan template!


ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Tips Trik Blogging

16 komentar :

  1. Salam Ukhti...
    Wah, bagus banget nih tipsnya, biar gak ribet kalo baca komen yang cukup banyak.
    Trims ya, Trik tipsnya selalu mudah diikuti terlebih oleh saya yg newbie, hehe
    Jazakumullohu

    BalasHapus
  2. dulu.... ina pernah nyoba... tapi gagal...
    skarang ina pengen nyoba lagi ah,,,,
    bismillah... semoga bisa...

    BalasHapus
  3. yah gagal nih kag... ~x(

    BalasHapus
  4. @ ina: yg benar ja de' kurang teliti kali, khn kode yg disisipkn sedikit skali? anaa coba trik dulu dan sekarang alhamdulillah berhasil terus tu de?

    BalasHapus
  5. makasih kerna berkongsi tipnya ya. Semoga dengan tip yang sob berikan dapat membantu saya untuk terus maju dalam blog. Maju terus sob.

    BalasHapus
  6. wah sip dah tutorialnya blog q juga dah tak pasang

    BalasHapus
  7. makasih kang atas tutorialnya...saya mau coba juga

    BalasHapus
  8. wah kok gak bisa ya sob...
    dah gw coba tp kotak komentarnya jg ngikut kescroll nih...

    BalasHapus
  9. @ van: Pasti lupa nutup dengan kode terakhir. Cek deh!

    BalasHapus
  10. thsnks sob caranya bisa di save walau mengalami sedikit kesalahan heee saya senang kalao cara2 bisa di save heeeee..maklum bar blajar,,,,,mampir ya sob

    BalasHapus
  11. @ Mulyana: G' bisa kunjung balik tu? Blogx g' trbuka tuk umum apa ya?

    BalasHapus
  12. ok. thanks gan tutorialnya, bermanfaat sekali. met berkarya. ane coba dulu ya... ^_^

    BalasHapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB:Sebelum menyisipkan kode silahkan gunakan tool konversi kode terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar
Konversi Kode di Sini!