Search here

Type a word related to the post, then click the search button !

Memuat...
English
Bru masuk angin!

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

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 «

19 komentar:

  1. Test Threaded Comment.
    Silahkan coba dengan klik "BALAS"!

    gubhugreyot

    BalasHapus
    Balasan
    1. gagal mas di template saya, ada eroor di xml template yg saya punya... gimana donk?

      Hapus
    2. Aku udah coba di template "Ultimatum" n threaded comments bisa langsung befungsi!
      Silahkan dicoba lagi. Mungkin saja terjadi sedikit kesalahan saat perubahan kode dilakukan!

      Hapus
    3. belum bisa nihh,..
      gimana ya cara buat comment sebagus http://gubhugreyot.blogspot.com ??
      bisa di share ??? :)

      Hapus
    4. test ah sebelum coba hehe

      Hapus
    5. Komentar ini telah dihapus oleh pengarang.

      Hapus
    6. pada kode : html1

      di template saya ada 2 om ...

      Hapus
  2. Pokoknya kalau GR ma css3 banget Lah Style nya keren abis bang

    BalasHapus
    Balasan
    1. Thank's atas pujian-nya! Semoga jadi pemicu untuk terus maju dan berkembang...

      Hapus
  3. semoga tutor ini cocok untuk blog aq.. :D

    BalasHapus
  4. wah gan thanks infonya,, sangat membantu.

    BalasHapus
  5. Gan di blog sya udh kyk gni. tpi balas/reply nya nggk fungsi yh? tolong solusi nya gan?

    BalasHapus
    Balasan
    1. @Eltoy... : Syukur klo button reply comment-nya sudah berfungsi. Aku sudah coba cek ke gubhug sampeyan sekaligus silaturami!

      Hapus
  6. @Muhammad Risdiyanto... : Silahkan ke dua2nya diganti dengan xHTML2. Setelah itu lanjutkan mengganti javasccript threaded comment-nya dg yg sesuai: Copy javascriptnya di http://gubhugreyot.blogspot.com/2012/04/best-solution-when-reply-comment-button.html (Solusi jitu atasi threaded comments)

    BalasHapus

 
GR | Edited by | gubhug reyot