Penting!! Sobat Blogger yang ingin re-post atau menulis kembali artikel kami diblog/website Anda, harap lihat halaman DISCLAIMER ( beberapa blog telah diproses di Google Removal Content ) Setiap tindakan pelanggaran hak cipta (COPAS) akan dilaporkan, TANPA pemberitahuan.

proBlogiz


Pasang Blogger Threaded Comments di Template KostumUntuk memasang Blogger Threaded Comments di template kostum, yaitu template yang disediakan selain Official Blogger Templates ( template bawaan Blogger) perlu menerapkan beberapa kode yang diperlukan untuk membuat fitur ini berfungsi dengan baik. Tutorial Blogger Threaded Comments ini menawarkan cara mudah untuk memberi gaya atau style komentar bertingkat pada kostum template.

Mari ikuti langkah-langkah mudah di bawah ini, tentang cara memberi style komentar bergulir/bertingkat pada template di Blogger.

Penerapan  Blogger Threaded Comments di Template Kostum

  • Masuk Blogger > Template > Edit HTML
  • Backup template Anda
  • Click "Expand Widget Templates" box
  • Tekan Control + F
  • Cari kode berikut ini :

<b:if cond='data:blog.pageType == &quot;item&quot;'> 
 <b:include data='post' name='comments'/> 
</b:if>
note : jika ada lebih dari satu kode diatas ganti semua
Gantilah kode diatas dengan kode dibawah ini :

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

Kemudian Save Template

Selesai !!!. Lihat blog, Anda akan menemukan link Balas/Reply bersama dengan link Hapus/Delete di bawahnya. Dengan meng-klik reply link ini akan membuka form komentar dibawahnya komentar sehingga Anda bisa mengirim sebuah balasan . Sempurna. :)

Memodifikasi Tampilan Threaded Comments

Memberi gaya atau style pada Threaded Comments ini berarti style komentar bertingkat akan merubah format tampilan komentar Anda saat ini. Untuk menyesuaikan body komentar yang sesuai keinginan, Anda harus menambah kode CSS yang diperlukan untuk mengedit style sheet untuk blok komentar.

Template Anda yang sekarang akan menyertakan kode CSS berikut yang otomatis dimasukkan oleh Blogger:
note : tapi tidak semua tertanam secara otomatis, ada yang tidak

<b:includable id='threaded_comment_css'> <style> .comments { clear: both; margin-top: 10px; margin-bottom: 0px; line-height: 1em; } .comments .comments-content { font-size: 13px; margin-bottom: 16px; } .comments .comment .comment-actions a { padding-top: 5px; padding-right: 5px; } .comments .comment .comment-actions a:hover { text-decoration: underline; } .comments .comments-content .comment-thread ol { list-style-type: none; padding: 0; text-align: left; } .comments .comments-content .inline-thread { padding: 0.5em 1em; } .comments .comments-content .comment-thread { margin: 8px 0px; } .comments .comments-content .comment-thread:empty { display: none; } .comments .comments-content .comment-replies { margin-top: 1em; margin-left: 36px; } .comments .comments-content .comment { margin-bottom:16px; padding-bottom:8px; } .comments .comments-content .comment:first-child { padding-top:16px; } .comments .comments-content .comment:last-child { border-bottom:0; padding-bottom:0; } .comments .comments-content .comment-body { position:relative; } .comments .comments-content .user { font-style:normal; font-weight:bold; } .comments .comments-content .icon.blog-author { width: 18px; height: 18px; display: inline-block; margin: 0 0 -4px 6px; } .comments .comments-content .datetime { margin-left:6px; } .comments .comments-content .comment-header, .comments .comments-content .comment-content { margin:0 0 8px; } .comments .comments-content .comment-content { text-align:justify; } .comments .comments-content .owner-actions { position:absolute; right:0; top:0; } .comments .comments-replybox { border: none; height: 250px; width: 100%; } .comments .comment-replybox-single { margin-top: 5px; margin-left: 48px; } .comments .comment-replybox-thread { margin-top: 5px; } .comments .comments-content .loadmore a { display: block; padding: 10px 16px; text-align: center; } .comments .thread-toggle { cursor: pointer; display: inline-block; } .comments .continue { cursor: pointer; } .comments .continue a { display: block; padding: 0.5em; font-weight: bold; } .comments .comments-content .loadmore { cursor: pointer; max-height: 3em; margin-top: 3em; } .comments .comments-content .loadmore.loaded { max-height: 0px; opacity: 0; overflow: hidden; } .comments .thread-chrome.thread-collapsed { display: none; } .comments .thread-toggle { display: inline-block; } .comments .thread-toggle .thread-arrow { display: inline-block; height: 6px; width: 7px; overflow: visible; margin: 0.3em; padding-right: 4px; } .comments .thread-expanded .thread-arrow { background: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAA DEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC&quot;) no-repeat scroll 0 0 transparent; } .comments .thread-collapsed .thread-arrow { background: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAA DEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAABJRU5ErkJggg==&quot;) no-repeat scroll 0 0 transparent; } .comments .avatar-image-container { float: left; width: 36px; max-height: 36px; overflow: hidden; } .comments .avatar-image-container img { width: 36px; } .comments .comment-block { margin-left: 48px; position: relative; } /* Responsive styles. */ @media screen and (max-device-width: 480px) { .comments .comments-content .comment-replies { margin-left: 0; } } </style> </b:includable>

Gantilah kode CSS diatas dengan yang baru dibawah ini :

<b:includable id='threaded_comment_css'> <style> /*------------- START of New Blogger Threaded Comments -------------*/ .comments { clear: both; margin-top: 10px; margin-bottom: 0px; line-height: 1em; } .comments .comments-content { font-size: 12px; margin-bottom: 16px; font-family: Verdana; font-weight: normal; text-align:left; line-height: 1.4em; } .comments .comment .comment-actions a { background:#1F9EE5; cursor:pointer; color:#ffffff; padding:2px 3px; margin-right:10px; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; font:9px sans-serif; border:1px solid #1F9EE5; } .comments .comment .comment-actions a:hover { text-decoration: none; background:#5AB1E2; border:1px solid #5AB1E2; } .comments .comments-content .comment-thread ol { list-style-type: none; padding: 0; text-align: none; } .comments .comments-content .inline-thread { padding: 0.5em 1em; } .comments .comments-content .comment-thread { margin: 8px 0px; } .comments .comments-content .comment-thread:empty { display: none; } .comments .comments-content .comment-replies { margin-top: 1em; margin-left: 40px; font-size:12px; background:#EBF5FE; } .comments .comments-content .comment { margin-bottom:16px; padding-bottom:8px; } .comments .comments-content .comment:first-child { padding-top:16px; } .comments .comments-content .comment:last-child { border-bottom:0; padding-bottom:0; } .comments .comments-content .comment-body { position:relative; } .comments .comments-content .user { font-style:normal; font-weight:bold; } .comments .comments-content .icon.blog-author { width: 18px; height: 18px; display: inline-block; margin: 0 0 -4px 6px; } .comments .comments-content .datetime { margin-left:6px; } .comments .comments-content .comment-header, .comments .comments-content .comment-content { margin:0 0 8px; } .comments .comments-content .comment-content { text-align:none; } .comments .comments-content .owner-actions { position:absolute; right:0; top:0; } .comments .comments-replybox { border: none; height: 250px; width: 100%; } .comments .comment-replybox-single { margin-top: 5px; margin-left: 48px; } .comments .comment-replybox-thread { margin-top: 5px; } .comments .comments-content .loadmore a { display: block; padding: 10px 16px; text-align: center; } .comments .thread-toggle { cursor: pointer; display: inline-block; } .comments .continue { cursor: pointer; } .comments .continue a { display: block; padding: 0.5em; font-weight: bold; } .comments .comments-content .loadmore { cursor: pointer; max-height: 3em; margin-top: 3em; } .comments .comments-content .loadmore.loaded { max-height: 0px; opacity: 0; overflow: hidden; } .comments .thread-chrome.thread-collapsed { display: none; } .comments .thread-toggle { display: inline-block; } .comments .thread-toggle .thread-arrow { display: inline-block; height: 6px; width: 7px; overflow: visible; margin: 0.3em; padding-right: 4px; } .comments .thread-expanded .thread-arrow { background: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC&quot;) no-repeat scroll 0 0 transparent; } .comments .thread-collapsed .thread-arrow { background: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==&quot;) no-repeat scroll 0 0 transparent; } .comments .avatar-image-container { float: left; width: 36px; max-height: 36px; overflow: hidden; } .comments .avatar-image-container img { width: 36px; } .comments .comment-block { margin-left: 48px; position: relative; } /* Responsive styles. */ @media screen and (max-device-width: 480px) { .comments .comments-content .comment-replies { margin-left: 0; } } /*------------- End of New Blogger Threaded Comments -------------*/ </style> </b:includable>

Save Template Anda
Dan coba lihat hasilnya threaded commnets baru yang lebih menarik bukan.

Kostumisasi :

  • tip untuk merubah warna gunakan Color Generator Tool ini :
Untuk merubah background tombol Reply aktif mode > edit #1F9EE5
Untuk merubah background tombol Reply mouse hover mode > edit #5AB1E2
Untuk merubah warna Font teks tombol Reply > edit #ffffff
Untuk merubah warna background comments container Reply > edit #EBF5FE

Selamat Mencoba !!!

Perlu Anda Baca Juga :
Artikel Terkait Lainnya:
Click here for comments

4 komentar

blog walking lagi kang, mhn maaf mau tanya kalau di blog saya udah terpasang blm ya? kalau blm saya mau pasang sesuai dgn turtorial anda. cek ya kang..trim's. http://sijalupangna.blogspot.com

REPLY

keren kang:)
udah cek and comment diblognya
threaded commentnya sukses:)

REPLY

terima kasih banyak sudah berkunjung ke blog saya lagi. Maklum saya masih pemula dan hanya belajar otodidak tanpa guru kecuali si embah google yang setia mendampingi saya. hehehe... makanya butuh bimbingan banyak termasuk dari anda.

REPLY

sama2 kang :)
saya juga baru belajar kang:)

REPLY

Silahkan Berkomentar
Komentar/pertanyaan Sesuai Topik, Please NO SPAM, NO Promotion Links
Convert Kode HTML sebelum disisipkan

Convert

Google+ Followers

Submit email Anda, dapatkan update artikel:


Like Me

Blog Arsip

Artikel Terbaru

|Copyright © 2013| Problogiz |All Rights Reserved|