Modifikasi Form Komentar pada Template blogger baru

Bagaimana yach caranya mengedit atau memodifikasi tampilan form komentar pada setiap posting blog agar menjadi lebih simpel seperti Form komentar yang terdapat di Wordpress?. Sehingga pengunjung tidak harus menunggu loading yang terkadang lama untuk menampilkan Form Komentar, sehingga terkadang mereka tidak jadi memposting sebuah komentar (Apalagi bagi pengunjung yang menggunakan Koneksi Dial-up). Itulah yang juga selalu ada dalam pikiran saya.

Dan setelah membaca salah satu posting blog dari Jack Book dan sedikit melakukan uji coba dengan menggunakan kode Javascript yang saya dapatkan di situs Dynamic Drive. Akhirnya, saya berhasil Memodifikasi Form Komentar pada blog ini . (Untuk contohnya, coba Anda klik link di bagian bawah dari posting ini, yaitu : "Posting Sebuah Komentar").

Baiklah, tanpa harus banyak basa-basi. Berikut ini adalah beberapa langkah yang saya lakukan saat memodifikasi Form Komentar pada template Blogger baru. (Sebelumnya Backup Template Anda)

1. Setelah Login (Masuk kedalam Panel Kontrol blog Anda, klik "Layout" - "Edit HTML", kemudian klik checkbox "Expand Template Widget"
2. Tambahkan kode Javascript di bawah ini di antara tag ]]></b:skin> dan tag </head>
   

   <script type='text/javascript'>
   //<![CDATA[
   <!--
   /***********************************************
   * Switch Menu script- by Martial B of http://getElementById.com/
   * Modified by Dynamic Drive for format & NS4/IE4 compatibility
   * Visit http://www.dynamicdrive.com/ for full source code
   ***********************************************/
   
   var persistmenu="yes" //"yes" or "no". Make sure each SPAN content contains an incrementing ID starting at 1 (id="sub1", id="sub2", etc)
   var persisttype="sitewide" //enter "sitewide" for menu to persist across site, "local" for this page only
   
   if (document.getElementById){ //DynamicDrive.com change
   document.write('<style type="text/css">\n')
   document.write('.submenu{display: none;}\n')
   document.write('</style>\n')
   }
   
   function SwitchMenu(obj){
   if(document.getElementById){
   var el = document.getElementById(obj);
   var ar = document.getElementById("masterdiv").getElementsByTagName("span"); //DynamicDrive.com change
   if(el.style.display != "block"){ //DynamicDrive.com change
   for (var i=0; i<ar.length; i++){
   if (ar[i].className=="submenu") //DynamicDrive.com change
   ar[i].style.display = "none";
   }
   el.style.display = "block";
   }else{
   el.style.display = "none";
   }
   }
   }
   
   function get_cookie(Name) {
   var search = Name + "="
   var returnvalue = "";
   if (document.cookie.length > 0) {
   offset = document.cookie.indexOf(search)
   if (offset != -1) {
   offset += search.length
   end = document.cookie.indexOf(";", offset);
   if (end == -1) end = document.cookie.length;
   returnvalue=unescape(document.cookie.substring(offset, end))
   }
   }
   return returnvalue;
   }
   
   function onloadfunction(){
   if (persistmenu=="yes"){
   var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
   var cookievalue=get_cookie(cookiename)
   if (cookievalue!="")
   document.getElementById(cookievalue).style.display="block"
   }
   }
   
   function savemenustate(){
   var inc=1, blockid=""
   while (document.getElementById("sub"+inc)){
   if (document.getElementById("sub"+inc).style.display=="block"){
   blockid="sub"+inc
   break
   }
   inc++
   }
   var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
   var cookievalue=(persisttype=="sitewide")? blockid+";path=/" : blockid
   document.cookie=cookiename+"="+cookievalue
   }
   
   if (window.addEventListener)
   window.addEventListener("load", onloadfunction, false)
   else if (window.attachEvent)
   window.attachEvent("onload", onloadfunction)
   else if (document.getElementById)
   window.onload=onloadfunction
   
   if (persistmenu=="yes" && document.getElementById)
   window.onunload=savemenustate
   //-->
   //]]>
   </script>
   

3. Jangan lupa juga untuk menambahkan Style CSS berikut ini diantara tag <head> dan tag ]]></b:skin>
   

   /* Switch Menu CSS for Comments Form Blog
   ----------------------------------------------- */
   .menutitle {
   cursor:pointer;
   margin-bottom: 5px;
   color:#000000;
   padding:2px;
   font-weight:bold;
   /*/*/border:0px solid #000000;/* */
   }
   
   .submenu {
   margin-bottom: 0.5em;
   }
   

4. Lalu scroll mouse ke bawah dan carilah kode seperti di bawah ini:
   

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

5. Setelah Anda menemukannya, hapuslah kode di atas yang berwarna merah
6. Berikutnya, carilah kode seperti di bawah ini :
   

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

7. Gantilah kode di atas (langkah 6) dengan kode berikut ini :
   

   <center>
   <div id='masterdiv'>
   <div class='menutitle' onclick='SwitchMenu("sub1")'>Kirim komentar Anda</div>
   <span class='submenu' id='sub1'>
   <iframe expr:src='data:post.addCommentUrl' height='300px' scrolling='yes' style='border:none;' width='75%'/>
   </span>
   </div>
   </center>
   

   (Note : Kode yang berwarna merah di atas adalah kode/tag iFrame untuk menampilkan form komentar dalam setiap posting Anda)
8. Terakhir, Save (simpan) Template Anda. Kemudian lihat hasilnya.

Note :
• Aku melakukan uji coba ini pada Template Standar (Default) Blogger baru.
• Untuk pengaturan Tampilan Komentarnya, aku sarankan lebih baik pilih Ya pada "Tampilkan komentar dalam sebuah window popup?".

DBK	Terima Kasih telah berkunjung dan membaca posting ini. Punya Saran dan Kritik? Silakan tuliskan lewat form Komentar di bawah. Dan tolong jangan kasih komentar spam!
	Find Me on : Facebook | Twitter | Mybloglog | Grup Dunia Internet | NetworkedBlogs

Bookmark Posting ini :

 

« Artikel Terkait »

« Posting terbaru »