Wednesday, August 29, 2012

Membuat Tombol show/hide Komentar

Membuat Tombol show/hide Komentar buat anda yang suka mengutak - atik template khususnya pengguna blogspot mungkin cara ini bisa anda coba biar web/blognya tambah keren. berikut kode untuk Membuat Tombol show/hide Komentar;
Membuat Tombol show/hide Komentar

Kode CSS

Letakan kode 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;
}

Kode Javascript

Letakan kode berikut ini 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'/>

Simpan template, Selesai

Keterangan:
Tulisan yang berwarna orange bisa anda ganti atau sesuaikan
- var panelSelector untuk #comments bisa juga diganti dengan obyek lain
- openPanelText Poskan Komentar adalah tulisan pada awal tampilan
- closePanelText Tutup Komentar adalah tulisan setelah diklik
- 600 dan 400 adalah kecepatan slide

Begitulah cara  Membuat Tombol show/hide Komentar semoga  berhasil.
Rating: 5 Reviewer: Unknown

2 comments: