Membuat Komentar Slide Panel (Show Hide)

Buka Panel
Tutup Panel


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.

9 Responses to "Membuat Komentar Slide Panel (Show Hide)"

  1. keren sob.. jadi pengen nyoba :D

    ReplyDelete
  2. Wiss keren gan, ntar kapan2 ane mau coba

    ReplyDelete
  3. mantafff dah...sebulan yang lalu saya menggunakan ini pada footer gan namun setelah diceck kurang sesuai jadi saya hapu lagi,hehe
    sukses sob blonya

    ReplyDelete
  4. This comment has been removed by the author.

    ReplyDelete
  5. Keren Nih, Di Coba ah... :d

    ReplyDelete
  6. wah boleh juga ni gan... ijin coba ah (f)

    ReplyDelete
  7. Kunjungan perdana gan... (y)

    ReplyDelete