earth

Guestbook

/* Iklan google ads */
Browse » » » Cara Membuat Toggle Pada Kotak Formulir Komentar Blogspot

Cara Membuat Toggle Pada Kotak Formulir Komentar Blogspot

Ditulis oleh Kang eNeS Rabu, 24 Oktober 2012. 07.03
Label: komentar (2)
Tadinya saya tidak akan membuat tutorial mengenai masalah ini, tapi sehubungan ada yang menanyakan bagaimana cara menyembunyikan kotak formulir komentar seperti pada blog SC Community, akhirnya saya buat juga. Ya itung-itung minuhan blog, hehehe...

Sebenarnya cara menyembunyikannya tidak jauh berbeda dengan cara menyembunyikan sidebar, bisa dengan toggle spoiler atau dengan toggle jQuery. Tapi supaya kerenan dikit, maka pada tutorial kali ini saya gunakan toggle jQuery.

Supaya tidak tumpangtindih dengan toggle jQuery pada sidebar maka CSS dan script yang digunakan pun disamakan, hanya diberi tambahan tag h4. Caranya:
  • Dari halaman Dasbor, pilih Template - Edit HTML (untuk amannya, lakukan duplikasi template terlebih dahulu).
  • Beri tanda centrang pada Expand Template Widget.
  • Setelah itu tambahkan CSS berikut di atas kode ]]></b:skin>: 
    /*=== Toggle Sidebar jQuery ===*/
#toggle-sidebar {}
#toggle-sidebar h2, h4 {cursor:pointer; display:block;}
#toggle-sidebar h2:hover, h4:hover {opacity: 0.75; -o-opacity: 0.75; -moz-opacity: 0.75; -webkit-opacity: 0.75; filter: alpha(opacity=75);}
#toggle-sidebar h2:active, h4:active {color:#888} /*warna huruf ketika aktif*/
.toggle-content {}
    Catatan
    Kamu bisa menambahkan atribut CSS untuk #toggle-sidebar dan .toggle-content jika diperlukan. Juga bisa mengganti warna huruf sesuai keinginan.
  • Lalu tambahkan script berikut di bawah kode ]]></b:skin> tadi: 
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
jQuery(document).ready(function(){ 
    jQuery(".toggle-content").hide(); 
    jQuery("#toggle-sidebar>h2, h4").click(function(){ 
        jQuery(this).toggleClass("active").next().slideToggle("slow");
    }); 
}); 
</script>
    Jika sudah menggunakan script jQuery, hapus salah satunya.
  • Setelah itu cari kode seperti ini (atau yang mirip, karena tiap template kadang berbeda): 
    <b:includable id='comment-form' var='post'>
 <div class='comment-form'>
 <a name='comment-form'/>
 <h4 id='comment-post-message'><data:postCommentMsg/></h4>
 <p><data:blogCommentMessage/></p>

 Kode HTML untuk kotak formulir komentar

 </div>

</b:includable>
  • Jika sudah ketemu tambahkan kode berwarna merah sehingga menjadi seperti ini: 
    <b:includable id='comment-form' var='post'>
 <div class='comment-form'>
 <a name='comment-form'/>
 <div id='toggle-sidebar'>
 <h4 id='comment-post-message'><data:postCommentMsg/></h4>
 <div class='toggle-content'>
 <p><data:blogCommentMessage/></p>

 Kode HTML untuk kotak formulir komentar

 </div><!--/toggle-content-->
 </div><!--/toggle-sidebar-->
 </div>

</b:includable>
  • Simpan hasil kerjaan ini lalu ucapkan Alhamdulillah...

Ok, segitu aja sob. Semoga bermanfaat .....

    • Artikel Terkait Dengan CSS dan Javascript

    Terimakasih sudah membaca artikel SC Community's Blog

    2 komentar
    Posting Komentar

    Balas
    Surya Dua Enam mengatakan...

    informasi yang dicari ternyata ada disini gan, thanks banget, oh ya gan,,saya dah follow...folback ya gan...

    24 Oktober 2012 pukul 12.16  
    Balas
    motorlinker mengatakan...


    http://motorlinkers.blogspot.com/

    29 Oktober 2012 pukul 17.11  

    Tambahkan Komentar

    • Dimohon untuk tidak mencantumkan link aktif pada komentar sobat.
    • Gunakan Ruang Tanya pada TabView Menu, jika ingin menanyakan sesuatu yang tidak ada kaitannya dengan artikel di atas.
    Kang eNeS

    Terimakasih atas semua apresiasi yang sobat berikan.

    Langganan: Posting Komentar (Atom)

    10 Artikel Terbaru

    10 Artikel Terpopuler