Setting Kotak Komentar Dibawah Posting

Akhirnya sekarang pengguna blogspot boleh untuk sedikit berbangga hati karena pihak blogger.com sudah meluncurkan fitur-fitur barunya walaupun masih dalam tahap uji coba seperti yang telah kang rohman tulis di sini. Kini anda tidak perlu lagi minder karena sering mendapat cemoohan di sebabkan urusan kotak komentar Blogspot yang konon katanya sangat ribet, kini anda bisa membuat backup blog hanya dengan satu kali klik saja, tidak perlu lagi khawatir tidak akan terindeks di google karena Webmaster Tools sudah terintegrasi dengan blogger. Duh... semakin hari saya makin Love aza nih ama blogspot...iiiiiihhhh.. gregetan deh jadinya

Seperti janji kang rohman kemarin bahwa akan membuat tutorial cara mengembalikan template yang sudah di modifikasi seperti yang kang rohman tulis di sini. Yuk... kita mulai aja biar cepat-cepat merasakan kotak komentar langsung di bawah posting.

Langkah #1

Silahkan Login ke http://draft.blogger.com dengan ID blogger anda, ini di maksudkan agar nanti memasang kotak komentarnya langsung bisa di lakukan.

Tuju pada blog yang akan anda ubah kodenya. Klik pada Tata Letak

Klik tab Edit HTML.

Klik pada tulisan Download Template Lengkap di bagian sebelah atas monitor. Silahkan di Backup dulu templatenya (sangat penting).

Beri tanda centang pada kotak kecil di samping tulisan Expand Template Widget.

Tunggu beberapa saat sampai proses selesai.

Cari kode yang seperti di bawah ini :

 
 <span class='post-comment-link'>
  <b:if cond='data:blog.pageType != "item"'>
  <b:if cond='data:post.allowComments'>
  <a class='comment-link' expr:href='data:post.url + "#comments"' >
  <b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/>
   <b:else/><data:post.numComments/> 
  <data:top.commentLabelPlural/>
  </b:if></a>
  </b:if>
  </b:if>
   </span>

Gantilah kode di atas dengan kode di bawah ini :

  <span class='post-comment-link'>
  <b:if cond='data:blog.pageType != "item"'>
 <b:if cond='data:post.allowComments'>
 <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
 <b:if cond='data:post.numComments == 1'>1
  <data:top.commentLabel/>
 <b:else/>
 <data:post.numComments/>
  <data:top.commentLabelPlural/>
  </b:if></a>
 </b:if>
 </b:if>
 </span>

Cari kode seperti di bawah ini, lalu hapus / delete saja :

   <!-- www.jackbook.com --><!-- this to hide and show el -->
  <script languange='javascript'>
 function showcomment(a,b){var jackbookdotcom = document.getElementById(a);jackbookdotcom.style.display = 'none';jackbookdotcom = document.getElementById(b);jackbookdotcom.style.display = 'block';}
 </script><!-- www.jackbook.com -->

Cari kode yang seperti di bawah ini :

 <b:includable id='comments' var='post'>
   <div class='comments' id='comments'>
   <a name='comments'/>
   <b:if cond='data:post.allowComments'>
  <!-- jackbook.com part 1 start -->
 <!--
 <h4>
 <b:if cond='data:post.numComments == 1'>
   1 <data:commentLabel/>:
 <b:else/>
 <data:post.numComments/> <data:commentLabelPlural/>:
  </b:if>
 </h4>
   -->
 <div class='onepx'>
 <dl id='comments-block' style='height: 1px;overflow:hidden;'>
 <b:loop values='data:post.comments' var='comment'>
 <dt class='comment-author' expr:id='"comment-" + data:comment.id'>
  <a expr:name='"comment-" + data:comment.id'/>
 <b:if cond='data:comment.authorUrl'>
 <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
 <b:else/>
 <data:comment.author/>
 </b:if>
  <data:commentPostedByMsg/>
 </dt>
 <dd class='comment-body'>
 <b:if cond='data:comment.isDeleted'>
 <span class='deleted-comment'><data:comment.body/></span>
 <b:else/>
 <p><data:comment.body/></p>
  </b:if>
 </dd>
 <dd class='comment-footer'>
 <span class='comment-timestamp'>
 <a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
 <data:comment.timestamp/>
 </a>
   
 <b:include data='comment' name='commentDeleteIcon'/>
 </span>
 </dd>
 </b:loop>
 </dl>
 </div>
 <!--
 <p class='comment-footer'>
  <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
 </p>
   -->
 <!-- jackbook.com part 1 ends -->
 <!-- actually i almost do nothing with your template, just add that comment, you did it :) -->
 <div id='comment-parent' onmouseover='showcomment("hoverme", "comment-child");' style='margin-bottom: 50px;'>
  <h3 id='hoverme' style='display:block;'>
 <img alt='Your cOmment"s Here! Hover Your cUrsOr to leave a cOmment.' src='http://img229.imageshack.us/img229/5559/htmlcodeleavecommentfi5.gif' title='Your cOmment"s Here! Hover Your cUrsOr to leave a cOmment.'/>
 </h3>
 <!-- this iframe below is your comment form. you can change the height, or add more style property into it -->
 <div id='comment-child' style='border:none; display: none; height:750px; width: 440px; margin-bottom: 5px; background: #fff none; border: 1px solid #FCO;'>
 <iframe expr:src='data:post.addCommentUrl' height='100%' scrolling='yes' style='border:none;' width='100%'/>
 <br/>
 <a href='http://www.jackbook.com/2007/06/how-to-make-readers-leave-comment.html' title='Want to have this on your blogger/blogspot?'>Comment Form under post in blogger/blogspot</a>
  </div>
 <!-- end of iframe -->
 </div>
 
 </b:if>
  <div id='backlinks-container'>
  <div expr:id='data:widget.instanceId + "_backlinks-container"'>
  <b:if cond='data:post.showBacklinks'>
   <b:include data='post' name='backlinks'/>
  </b:if>
  </div>
  </div>
  </div>
  </b:includable>

Ganti kode di atas dengan kode di bawah ini :

 <b:includable id='comments' var='post'>
 <div class='comments' id='comments'>
 <a name='comments'/>
 <b:if cond='data:post.allowComments'>
 <h4><b:if cond='data:post.numComments == 1'>1 
 <data:commentLabel/>:<b:else/><data:post.numComments/> 
  <data:commentLabelPlural/>:
 </b:if>
 </h4>
 <dl id='comments-block'>
 <b:loop values='data:post.comments' var='comment'>
 <dt class='comment-author' expr:id='"comment-" + data:comment.id'><a expr:name='"comment-" + data:comment.id'/>
 <b:if cond='data:comment.authorUrl'><a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/>
  </a><b:else/><data:comment.author/></b:if><data:commentPostedByMsg/>
 </dt>
 <dd class='comment-body'>
 <b:if cond='data:comment.isDeleted'>
 <span class='deleted-comment'>
 <data:comment.body/>
 </span><b:else/> 
  <p><data:comment.body/></p>
 </b:if></dd><dd class='comment-footer'>
 <span class='comment-timestamp'>
 <a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
 <data:comment.timestamp/>
 </a>
 <b:include data='comment' name='commentDeleteIcon'/>
  </span>
 </dd>
 </b:loop>
 </dl>
 <p class='comment-footer'>
 <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a></p>
 </b:if>
  <div id='backlinks-container'>
 <div expr:id='data:widget.instanceId + "_backlinks-container"'>
 <b:if cond='data:post.showBacklinks'>
 <b:include data='post' name='backlinks'/>
 </b:if>
 </div>
 </div>
 </div>
 </b:includable>

Langkah #1 Selesai, silahkan sejenak beristirahat dulu agar suasana menjadi tambah rileks.

Sudah istirahatnya? siap untuk melanjutkan? yuuukkkk.... mulai lagi jika sudah siap.

Langkah #2

Masih dalam posisi Edit HTML dan pastikan kotak kecil di samping tulisan Expand Template Widget masih dalam keadaan tercentang.

Cari kode yang seperti di bawah ini( karena kadang kode template berbeda-beda, kalau kata oom "focus saja ke kode yang warna hijau.

 <p class='comment-footer'>
         <b:if cond='data:post.allowComments'>
         <a expr:href='data:post.addCommentUrl'              expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
     </b:if>
  </p>

Hapus / delete semua kode di atas lalu ganti dengan kode di bawah ini :

 <p class='comment-footer'>
 <b:if cond='data:post.embedCommentForm'>
 <b:include data='post' name='comment-form'/>
 <b:else/>
 <b:if cond='data:post.allowComments'>
  <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
 </b:if>
 </b:if>
 </p>

Klik tombol Simpan Template.

Akhirnya langkah #2 pun selesai juga, silahkan santai sejenak kembali untuk menghapai ujian yang terakhir.

Sudah habis

nya? siap menghadapi ujian yang terakhir :D yukkkk....

Langkah #3

Klik tab Pengaturan.

Klik sub tab Komentar. Tuju Penempatan Formulis Komentar, pilih untuk pilihan Disemat di bawah entri.
Klik tombol Simpan Pengaturan yang ada di bagian bawah layar monitor anda.