Pasang Blogger Threaded Comments di Template Kostum

proBlogiz

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

Color Generator

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 :

Cara Aktifkan Threaded Comments di Blogger

Modifikasi Tampilan Threaded Comments Blogger

Solusi Kotak Komentar Hilang di Halaman Statis

4 komentar

jalupangna

29 Desember 2012 pukul 18.08

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

Unknown Author

29 Desember 2012 pukul 22.07

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

29 Desember 2012 pukul 22.12

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.

29 Desember 2012 pukul 22.50

sama2 kang :)
saya juga baru belajar kang:)

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

Convert

ProBlogiz

Home

Tutorial

SEO

Basic

Template

Pasang Blogger Threaded Comments di Template Kostum

Penerapan Blogger Threaded Comments di Template Kostum

Memodifikasi Tampilan Threaded Comments

Kostumisasi :

Artikel Terkait Lainnya:

4 komentar

Google+ Followers

Like Me

Blog Arsip

Kategori

Artikel Popular

Artikel Terbaru

Support

Usefull Tools

Pages