earth

Guestbook

/* Iklan google ads */
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

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

    24 Oktober 2012 pukul 12.16  


    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.

    10 Artikel Terbaru

    10 Artikel Terpopuler