Menerapkan JQuery Slide Panel pada Komentar Blogger
Meskipun
sudah cukup banyak tutorial mengenai ini, tapi Saya hanya ingin
menunjukkan bahwa ada satu cara yang lebih mudah untuk melakukan ini.
Anda tidak perlu membongkar struktur template secara keseluruhan hanya
untuk menambahkan elemen lain, biarkan JQuery yang mencarinya dan
menyisipkan elemen-elemen yang kita butuhkan (dalam hal ini adalah
tombol/pemicu panel):
Pertama-tama masuklah ke halaman
editor HTML template Anda kemudian temukan kode ini:
Salin kode ini dan letakkan di atasnya:
a.openpanel {
display:block;
clear:both;
width:auto;
padding:0px 0px;
text-align:center;
font-weight:bold;
line-height:32px;
background-color:#39f;
color:white;
text-decoration:none;
margin:0px 0px;
-webkit-box-shadow:0px 1px 1px rgba(0,0,0,0.2);
-moz-box-shadow:0px 1px 1px rgba(0,0,0,0.2);
box-shadow:0px 1px 1px rgba(0,0,0,0.2);
position:relative;
}
a.openpanel em {
width:0px;
height:0px;
display:block;
position:absolute;
top:15px;
right:15px;
border:6px solid transparent;
border-top-color:white;
}
a.openpanel.active {background-color:#900;}
a.openpanel.active em {
top:6px;
border-color:transparent transparent white transparent;
}
div.paneline {
height:0px;
border-bottom:4px solid #39b;
}
div.hompiPanel {
padding:10px 20px 20px;
-webkit-box-shadow:inset 0px 1px 7px rgba(0,0,0,0.2);
-moz-box-shadow:inset 0px 1px 7px rgba(0,0,0,0.2);
box-shadow:inset 0px 1px 7px rgba(0,0,0,0.2);
margin:0px 0px !important;
}
Kemudian temukan kode ini:
Salin kode ini dan letakkan di atasnya:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
var panelSelector = '#comments',
openPanelText = "Poskan Komentar",
closePanelText = "Tutup Komentar",
slideDownPanelSpeed = 600,
slideUpPanelSpeed = 400;
</script>
<script src='http://reader-download.googlecode.com/svn/trunk/blogger-slide-panel-comments.js' type='text/javascript'></script>
Ingat, kode yang Saya beri garis bawah adalah JQuery. Jika template Anda sudah dilengkapi dengan JQuery, singkirkan kode tersebut!
Klik
Simpan Template.
Sudah, begitu saja.
Lebih Jauh Lagi
Berikut ini adalah isi dari
script blogger-slide-panel-comments.js:
jQuery(function() {
jQuery(panelSelector).hide()
.addClass('hompiPanel')
.before('' + openPanelText + '
')
.after(
'
');
jQuery(
'a.openpanel').toggle(
function() {
jQuery(
this).addClass(
'active').html(closePanelText +
'');
jQuery(
'div.hompiPanel').slideDown(slideDownPanelSpeed);
return false;
},
function() {
jQuery(
this).removeClass(
'active').html(openPanelText +
'');
jQuery(
'div.hompiPanel').slideUp(slideUpPanelSpeed);
return false;
});
});Isinya sangat sedikit. Karena fungsi dari
script ini memang hanya untuk mencari elemen
#comments, kemudian setelah JQuery menemukannya maka dia akan menyisipkan elemen
a.openpanel sebelum
#comments dan elemen
div.paneline setelah
#comments:
jQuery(panelSelector).hide()
.addClass('hompiPanel')
.before('' + openPanelText + '
')
.after(
'
');
Setelah itu barulah aksi animasi bisa dilakukan. Di sini Saya menggunakan
event .toggle():
jQuery('a.openpanel').toggle(function() {
jQuery(this).addClass('active').html(closePanelText + '');
jQuery('div.hompiPanel').slideDown(slideDownPanelSpeed);
return false;
}, function() {
jQuery(this).removeClass('active').text(openPanelText + '');
jQuery('div.hompiPanel').slideUp(slideUpPanelSpeed);
return false;
});
Tentukan label tombol pada saat panel tertutup pada variabel
openPanelText, lalu tentukan juga label tombol saat panel sedang terbuka pada variabel
closePanelText.
Tentukan kecepatan efek
.slideDown() pada variabel
slideDownPanelSpeed dan kecepatan efek
.slideUp() pada variabel
slideUpPanelSpeed.
panelSelector adalah variabel untuk menentukan target yang akan dijadikan elemen panel. Sekali-kali cobalah untuk mengubah nilai "#comments" menjadi "#comment-editor" atau "div.post" dan lihat apa yang akan terjadi :)
) mari kita menuju ke pokok pembahasan.
