Trick Buat Blog/Template jadi Threaded Comments

Yang dimaksud membuat template atau blog menjadi blog dengan system threaded comment adalah apabila blog/template yang anda gunakan belum dilengkapi dengan button teks yang berfungsi untuk "membalas komentar". Button teks ini terletak tepat di bawah komentar dalam comment box. Threaded Comment adalah barang yang masih cukup baru bagi blogger/blogspot. Threaded Comment kini membuat comment box blogger menjadi sama seperti yang ada di wordpress.

Threaded comment sudah disertakan pada Blogger Template Designer (New Blogger Template). Untuk Template Tata Letak (Layout Template) dan Template Klasik dan beberapa template diluar template blogger (hasil download free blogger template) masih belum menggunakan system threaded comment. Agar template menjadi threaded comment beberapa kode css dan xHTML harus di tambahkan (modifikasi template).

D E M O

Anda bisa melihat dan sekaligus mencoba threaded comment hasil modifikasi yang dilakukan terhadap blog ini dengan cara memberi tanggapan komentar melalui button text "balas" (Modifikasi dilakukan terhadap Template Tata Letak - Layout Template - Template Lama yang sudah digunakan sejak tahun 2009).

Template non-Threaded Comment :

1. Tidak dilengkapi dengan button teks balas komentar.
2. Teks komentar berada dalam tag "dd" (class="comment-body"). Anda dapat menemukan dd class='comment-body' diantara tag pembuka dan penutup body.

Template Threaded Comment :

1. Boks komentar dilengkapi button teks balas komentar.
2. Teks komentar berada dalam tag "p" dengan (class="comment-content").

Cara merubah blog ke bentuk Threaded Comment :

1. Login ke Blogger.
2. Klik "Rancangan/Design".
3. Klik "Edit HTML".
4. Halaman baru akan dijumpai, dimana di halaman ini terdapat fitur "Backup-Restore Template" dan "Edit Template". Lakukan Backup Template.
   
   • Klik "Download Template Lengkap".
   • Simpan file template di folder PC.
   • Kembali ke "Edit Template".
5. Cari kode ]]></b:skin>
6. Copy dan letakkan kode css di atas ]]></b:skin>
7. Klik "Simpan Template/Save Template".
8. Klik "Expand Widget Template".
9. Cari kode <b:include data='post' name='comments'/> .
   Di sekitar kode ini anda akan melijat kode seperti yang terlihat dalam box xHTML-1.
10. Ganti xHTML-1 dengan xHTML-2
11. Klik "Simpan Template/Save Template".
12. Buka blog dan lihat di halaman posting yang sudah ada komentarnya. Jika blog belum mempunyai komentar, silahkan buat sebuah komentar untuk mengetahui apakah threaded comment sudah dapat berfungsi sempurna.

Kode CSS :

.comments .comments-content .icon.blog-author{
        background-repeat:no-repeat;
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==);
}
.comments .comments-content .loadmore a{
        border-top: 1px solid #999999;
        border-bottom:1px solid #999999;
}
.comments .comment-thread.inline-thread{
        background:rgba(124,124,124,0.1);
}
.comments .continue{
        border-top:2px solid #999999;
}

xHTML-1 :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
         <b:include data='post' name='comments'/>
      </b:if>

xHTML-2 :

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
          <b:if cond='data:post.showThreadedComments'>
            <b:include data='post' name='threaded_comments'/>
          <b:else/>
            <b:include data='post' name='comments'/>
          </b:if>
        </b:if>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
          <b:if cond='data:post.showThreadedComments'>
            <b:include data='post' name='threaded_comments'/>
          <b:else/>
            <b:include data='post' name='comments'/>
          </b:if>
        </b:if>

Catatan/Keterangan :

1. Jangan lupa untuk melakukan "Backup Template" sebelum modifikasi dilakukan agar jika terjadi hal yang tak diharapkan template bisa dikembalikan seperti sebelum modifikasi dilakukan.
2. Mungkin saja xHTML-1 sedikit berbeda dengan yang anda temukan.
   Yang penting di atas kode :
   <b:include data='post' name='comments'/>
   xHTML terdapat kode:
   == &quot;item&quot;'.

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

Posting » Jemuah    KLIWON, April, 06, 2012

» Happy Blogging - gubhugreyot «