Pertama-tama masuklah ke halaman editor HTML template Anda kemudian temukan kode ini:
]]></b:skin>
Salin kode ini dan letakkan di atasnya:
Kemudian temukan kode ini: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; }
</head>
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'> //<![CDATA[ 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:Isinya sangat sedikit. Karena fungsi dari script ini memang hanya untuk mencari elemenjQuery(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; }); });
#comments
, kemudian setelah JQuery menemukannya maka dia akan menyisipkan elemen a.openpanel
sebelum #comments
dan elemen div.paneline
setelah #comments
:Setelah itu barulah aksi animasi bisa dilakukan. Di sini Saya menggunakan eventjQuery(panelSelector).hide() // Menyembunyikan elemen panelSelector (dalam hal ini adalah "#comments") // Tambahkan class="hompiPanel" (untuk keperluan intimidasi) .addClass('hompiPanel') // Sisipkan elemen a.openpanel sebelum panelSelector .before('<a class="openpanel" href="#">' + openPanelText + '<em></em></a>') // Sisipkan elemen div.paneline setelah panelSelector (sekedar hiasan saja) .after('<div class="paneline"></div>');
.toggle()
:Tentukan label tombol pada saat panel tertutup pada variabeljQuery('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; });
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
.