Meskipun sudah cukup banyak tutorial mengenai ini, tapi Saya hanya ingin mengatakan bahwa ada satu cara yang lebih gampang untuk melaksanakan 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 ialah tombol/pemicu panel):
Pertama-tama masuklah ke halaman editor HTML templat Anda kemudian temukan aba-aba ini:
]]></b:skin>
Salin aba-aba ini dan letakkan di atasnya:
a.openpanel { display:block; clear:both; width:auto; padding:0; margin:0; text-align:center; font-weight:bold; line-height:32px; background-color:#39f; 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.openpanel em { display:block; width:0; height:0; 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:0; border-bottom:4px solid #39b; } div.hompiPanel { 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; }Kemudian temukan aba-aba ini:
</head>
Salin aba-aba ini dan letakkan di atasnya:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script><script> //<![CDATA[ var panelSelector = '#comments', openPanelText = "Poskan Komentar", closePanelText = "Tutup Komentar", slideDownPanelSpeed = 600, slideUpPanelSpeed = 400; //]]> </script> <script src='http://dte-project.googlecode.com/svn/trunk/blogger-slide-panel-comments.js'></script>Ingat, aba-aba yang Saya beri garis bawah ialah jQuery. Jika templat Anda sudah dilengkapi dengan jQuery, singkirkan aba-aba tersebut!
Klik Simpan Template.
Sudah, begitu saja.
Lebih Jauh Lagi
Berikut ini ialah isi dari skrip blogger-slide-panel-comments.js:
jQuery(function() { jQuery(panelSelector).hide() .addClass('hompiPanel') .before('<a class="openpanel" href="#">' + openPanelText + '<em></em></a>') .after('<div class="paneline"></div>'); jQuery('a.openpanel').toggle(function() { jQuery(this).addClass('active').html(closePanelText + '<em></em>'); jQuery('div.hompiPanel').slideDown(slideDownPanelSpeed); return false; }, function() { jQuery(this).removeClass('active').html(openPanelText + '<em></em>'); jQuery('div.hompiPanel').slideUp(slideUpPanelSpeed); return false; }); });Isinya sangat sedikit. Karena fungsi dari skrip ini memang hanya untuk mencari elemen #comments, kemudian sesudah jQuery menemukannya maka beliau akan menyisipkan elemen a.openpanel sebelum #comments dan elemen div.paneline sesudah #comments:
jQuery(panelSelector).hide() // Menyembunyikan elemen panelSelector (dalam hal ini ialah "#comments") // Tambahkan class="hompiPanel" (untuk membuatnya menjadi lebih spesifik) .addClass('hompiPanel') // Sisipkan elemen a.openpanel sebelum panelSelector .before('<a class="openpanel" href="#">' + openPanelText + '<em></em></a>') // Sisipkan elemen div.paneline sesudah panelSelector (sekedar hiasan saja) .after('<div class="paneline"></div>');Setelah itu barulah agresi animasi dapat dilakukan. Di sini Saya memakai event .toggle() (pelajari di sini):
jQuery('a.openpanel').toggle(function() { jQuery(this).addClass('active').html(closePanelText + '<em></em>'); jQuery('div.hompiPanel').slideDown(slideDownPanelSpeed); return false; }, function() { jQuery(this).removeClass('active').text(openPanelText + '<em></em>'); jQuery('div.hompiPanel').slideUp(slideUpPanelSpeed); return false; });Tentukan label tombol pada ketika panel tertutup pada variabel openPanelText, kemudian tentukan juga label tombol ketika panel sedang terbuka pada variabel closePanelText.
Tentukan kecepatan efek .slideDown() pada variabel slideDownPanelSpeed dan kecepatan efek .slideUp() pada variabel slideUpPanelSpeed.
panelSelector ialah variabel untuk memilih sasaran yang akan dijadikan elemen panel. Sekali-kali cobalah untuk mengubah nilai "#comments" menjadi "#comment-editor" atau "div.post" dan lihat apa yang akan terjadi!