Membuat Komentar Slide Panel (Show Hide)

Meski sudah cukup banyak tentang tutorial ini, saya akan memberi cara yang lebih mudah untuk Membuat Komentar Slide Panel (Show Hide) tanpa harus banyak edit HTML Template.
Karna JQuery akan mencari dan menyisipkan elemen elemen yang dibutuhkan pada tutorial kali ini.

Langkah langkah pemasangannya :
1. Blogger, pilih Template dan Edit HTML
2. Cari kode ]]></b:skin>
3. Salin kode dibawah ini dan letakkan diatasnya

a.bukapanel {
  display:block;
  clear:both;
  width:auto;
  padding:0;
  margin:0;
  text-align:center;
  font-weight:bold;
  line-height:32px;
  background-color:#189B91;
  color:white;
  text-decoration:none;
  -webkit-box-shadow:0 1px 1px rgba(0,0,0,.2);
  -moz-box-shadow:0 1px 1px rgba(0,0,0,.2);
  box-shadow:0 1px 1px rgba(0,0,0,.2);
  position:relative;
}

a.bukapanel em {
  display:block;
  width:0;
  height:0;
  position:absolute;
  top:15px;
  right:15px;
  border:6px solid transparent;
  border-top-color:white;
}

a.bukapanel.active {background-color:#1195C9}

a.bukapanel.active em {
  top:6px;
  border-color:transparent transparent white transparent;
}

div.garispanel {
  height:0;
  border-bottom:4px solid #21AFA4;
}

div.rifanPanel {
  padding:10px 20px 20px;
  -webkit-box-shadow:inset 0 1px 7px rgba(0,0,0,.2);
  -moz-box-shadow:inset 0 1px 7px rgba(0,0,0,.2);
  box-shadow:inset 0 1px 7px rgba(0,0,0,.2);
  margin:0 !important;
}

4. Cari kode </head> ,dan letakan kode dibawah ini diatasnya

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'/>
<script>
//<![CDATA[
var panelSelector = '#comments',
    openPanelText = "Beri Komentar",
    closePanelText = "Tutup Komentar",
    slideDownPanelSpeed = 600,
    slideUpPanelSpeed = 400;
//]]>
</script>
<script>
//<![CDATA[
jQuery(function() {
    jQuery(panelSelector).hide()
        .addClass('rifanPanel')
            .before('<a class="bukapanel from-js" href="#">' + openPanelText + '<em></em></a>')
                .after('<div class="garispanel"></div>');
    jQuery('.bukapanel').toggle(function() {
        jQuery(this).addClass('active').html(closePanelText + '<em></em>');
        jQuery('div.rifanPanel').slideDown(slideDownPanelSpeed);
        return false;
    }, function() {
        jQuery(this).removeClass('active').html(openPanelText + '<em></em>');
        jQuery('div.rifanPanel').slideUp(slideUpPanelSpeed);
        return false;
    });
});
//]]>
</script>

Kode yang saya beri garis bawah adalah JQuery, apabila sudah ada JQuery pada template anda, jangan copy kode tersebut

anda bisa mengganti tulisan "Beri Komentar" dan "Tutup Komentar" pada variabel openPanelText dan closePanelText. Untuk mengatur kecepatan slide nya, silahkan atur angkanya pada variabel slideDownPanelSpeed dan slideUpPanelSpeed.

Tweet