Mau Jadi Ahli SEO | Mau Tahu Cara Mengoptimasi Website Anda | Mau Toko Online Anda Banjir Pengunjung | Mau Meningkatkan Skil SEO Anda | Klik Banner di Bawah ini dan BUKTIKAN!
SEO Academy, sekolah seo, belajar seo
Home » Trik Blogger » Membuat Komentar Berurutan Di Blogger

17.1.12

Membuat Komentar Berurutan Di Blogger

08.00 · by Unknown · in , 7 comments

komentar-blogger
Assalamu'alaikum, kawan kali ini saya akan share sebuah trik terbaru, dan saya yakin, belum ada yang posting seperti ini di indonesia, kalau pun ada, itu juga bisa dihitung, lantas apa si yang akan saya share disini, saya akan share cara membuat komentar berurutan diblogger, lantas apa yang dimaksud komentar berurutan, maksudnya adalah, kamu memiliki fitur replay pada komentar yang ada pada blogger kamu.

Tapi yang membedakan dari trik-trik selama ini, yaitu "trik membuat tombol replay", seperti komentar yang saling berkesinambungan, yang biasanya fitur ini terdapat pada kotak komentar pada wordpress, jommla, atau pun pada forum-forum, atau mudahnya seperti pada komentar facebook atau google plus, yap, bila kamu sudah paham , sekarang kita coba membuat komentar berurutan diblogger.




Update Membuat Komentar Berurutan Di Blogger :


klik >> disini


Contoh hasil penerapan trik ini :


komentar-blogger




Berikut ini langkah-langkah membuat komentar berurutan diblogger.


1. Backup terlebih dahulu template kamu.
2. Pada dashbor kamu klik template >> Edit HTML >> Proceed.
3. Kamu ceklist Expand Widget Templates.
4. Sekarang kamu cari kode berikut.




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


Catatan >> kode diatas ada dua, ganti semua.


Kamu rubah jadi seperti 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> 

5. Save template kamu.


Pada langkah ini kamu sekarang sudah mempunyai fitur replay komentar yang berurutan, dan setelah kode ini tertanam, maka dari pihak blogger otomatis akan menambahkan kode pelengkap, yang kamu bisa mengedit model yang kamu inginkan.



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

Nah sekarang bila kamu mau mempunyai fitur replay, seperti yang saya punya, maka kode diatas kamu rubah, menjadi seperti ini.



<b:includable id='threaded_comment_css'>
  <style>
/*START of Blogger Threaded Comments By MBT*/


.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 Blogger Threaded Comments By MBT*/ 
  </style>
</b:includable> 

Catatan :


>> Trik ini masih baru, mungkin akan ada bug, bila ada mohon dikabarkan.
>> Trik ini hanya bisa pada template blogger.
>> Kamu bisa edit warna aplikasi komentar ini.


  • Untuk mengubah background Tombol Jawab dalam kamu edit 1F9EE5
  • Untuk mengubah background tombol mouse hover Balas di mode edit 5AB1E2
  • Untuk mengubah warna font dari teks Balasan edit ffffff
  • Untuk mengubah warna background Balas komentar edit EBF5FE


Yap, sampai disini dulu, trik cara membuat komentar berurutan diblogger, semoga bermanfaat.
 Persembahan dari : Blogger dan MBT

Pin It

7 Komentar:

  1. Unknown17 Januari 2012 pukul 18.15

    Thank you mas joy, semoga tutorial ini bermanfaat.

    BalasHapus
  2. Cahaya4 Februari 2012 pukul 10.39

    ini bisa yah mas.. q kmrin dah coba tak gak bisa. aku akan coba pakai ini yah.. bismiilah

    BalasHapus
  3. Annur Shah4 Februari 2012 pukul 10.48

    subhanallah.. cara ini paling jitu.. syukron jiddan yah...
    aku bisa mmpir kesini dan langsung praktek

    BalasHapus
    Balasan
    1. Unknown6 Februari 2012 pukul 16.53

      syukran, insya Allah tutorial ini ada updatenya.

      Hapus
  4. DeeJayHan-Blog10 Februari 2012 pukul 21.30

    Trik yang bagus . comment back yah ^^.

    BalasHapus
  5. rachmad tatawarna20 Desember 2012 pukul 11.21

    ane behasil gan :D lanjutkan gan

    BalasHapus

Bila kamu ada pertanyaan silahkan kirim komentar, dan sebelumnya saya mohon maaf bila terlambat membalas karena banyak kesibukan yang lain :)

Langganan: Posting Komentar (Atom)