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 {}CatatanKamu 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 .....
2 commentsPosting Komentar
informasi yang dicari ternyata ada disini gan, thanks banget, oh ya gan,,saya dah follow...folback ya gan...
http://motorlinkers.blogspot.com/
Tambahkan Komentar