Cara Membuat Tombol Show/hide Area Komentar

Salam sukses selalu buat sobat semua, Belajar Komputer Melalui Internet saat ini akan sedikit membahas tentang Cara Membuat Tombol Show/hide Area Komentar dan semoga artikel ini bermanfaat.

---

Cara Membuat Tombol Show/hide Area Komentar sebenarnya sudah saya pakai pada blog ini namun baru kali ini saya share buat sobat semua, jadi buat lihat hasil sobat bisa lihat pada kotak komentar blog ini. pada tutorial ini saya menggunakan hosting kode javascript blog saya yang lain jadi bila sobat mau menggunakannya langsung tanpa menghosting sendiripun akan aman karena masih dalam pengawasan saya, perlu sobat ketahui kenapa hal ini saya jelaskan? karena bila kita menggunakan kode yang dihosting oleh penyedia tutorial itu ga ada jaminan sepenuhnya yang tentunya dengan berbagai alasan yang diantaranya; bila yang menggunakan kode tersebut dalam jumlah banyak secara bersamaan maka ada kemungkinan akan terjadinya overload sehingga mungkin akan mengganggu kinerja kode tersebut atau bisa juga situs hostingan tersebut ditutup karena berbagai alasan atau mungkin file kode tersebut dihapus pemiliknya, nah dengan berbagai alasan diatas alangkah lebih baiknya bila sobat menghosting sendiri kode yang perlu di hosting misalnya kode javascript namun buat yang menggunakan hostingan dari tutorial blog ini saya jamin sehingga bila tidak menghosting sendiripun ga apa-apa.

Ok, kita langsung saja ya pada pokok bahasan yaitu Cara Membuat Tombol Show/hide Area Komentar. 

saya tidak akan menjelaskan dari awal login karena mungkin sobat sudah pada paham bagaimana caranya kalau mau mengedit template.

Sobat letakan kode CSS berikut tepat diatas kode ]]></b:skin>

a.bukacoment {
  display:block;
  clear:both;
  width:auto;
  padding:0px 0px;
  text-align:center;
  font-size:14px;
  font-weight:bold;
  line-height:30px;
  background-color:#000;
  color:white;
  text-decoration:none;
  margin:0px 0px;
  position:relative;
}
a.bukacoment em {
  width:0px;
  height:0px;
  display:block;
  position:absolute;
  top:10px;
  right:10px;
  border:6px solid transparent;
  border-top-color:white;
}
a.bukacoment.active {background-color:#900;}
a.bukacoment.active em {
  top:6px;
  border-color:transparent transparent white transparent;
}
div.btsbawah {
  height:0px;
  border-bottom:4px solid #ff0000;
}
div.jqcoment {
  padding:0px;
  margin:0px 0px !important;
} 

 Kemudian sobat letakan kode Javascript berikut tepat diatas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
var panelSelector          = '#comments',
    openPanelText          = "Poskan Komentar",
    closePanelText          = "Tutup Komentar",
    slideDownPanelSpeed = 600,
    slideUpPanelSpeed      = 400;
//]]>
</script><script src='http://elina.googlecode.com/files/Buka-coment.js' type='text/javascript'/>

Perhatikan kode yang diberi garis bawah, itu library JQuery bila template sobat sudah ada kode tersebut maka kode bergaris bawah tersebut hapus saja.
#comments ini adalah ID area komentar bila ID area komentar sobat berbeda silahkan ganti dengan kode ID area komentar sobat.
Poskan Komentar ini kalimat yang tampil sebelum diklik, sobat bisa ganti sesuai keinginan
Tutup Komentar ini kalimat yang tampil setelah diklik, sobat bisa sesuaikan.

600 dan 400 adalah kecepatan membuka dan menutup kotak komentar.
Sebagai tambahan bila pada template sobat menggunakan Library Jquery versi dibawah 1.7.2 maka sobat ganti saja Jquery tersebut dengan JQuery 1.7.2.

Mungkin sampai disini dulu Belajar Komputer Melalui Internet tentang Cara Membuat Tombol Show/hide Area Komentar kali ini, semoga bermanfaat bagi Anda.

DAPATKAN ARTIKEL VIA EMAIL

Masukan Alamat Email Sobat:

Delivered

BACA JUGA ARTIKEL TERKAIT LAINNYA

Dipublish oleh : Abdul Kohar - Jatinangor Rating 5 Belajar Komputer Melalui Internet, Updated at: 01:43