Membuat Komentar Slide Panel pada Template Blogspot
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 templat Anda kemudian temukan kode ini:
]]></b:skin>
Salin kode 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 kode ini:
</head>
Salin kode 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, kode yang Saya beri garis bawah adalah jQuery. Jika templat Anda sudah dilengkapi dengan jQuery, singkirkan kode tersebut!
Klik Simpan Template.
Sudah, begitu saja.
Lebih Jauh Lagi
Berikut ini adalah 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 setelah jQuery menemukannya maka dia akan menyisipkan elemen a.openpanel
sebelum #comments
dan elemen div.paneline
setelah #comments
:
jQuery(panelSelector).hide() // Menyembunyikan elemen panelSelector (dalam hal ini adalah "#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 setelah panelSelector (sekedar hiasan saja)
.after('<div class="paneline"></div>');
Setelah itu barulah aksi animasi bisa dilakukan. Di sini Saya menggunakan 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 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!
Labels: Blogger, Dasar, JavaScript, jQuery
53 Comments:
bedanya sama yang Menyelesaikan Masalah JQuery Popup Formulir Komentar Blogger udah terlanjur pasang yang Menyelesaikan Masalah JQuery Popup Formulir Komentar Blogger :(
diliat donk mas :D alam-perwira.blogspot.com
@Alam Perwira Bedanya kalau yang ini bentuknya slide panel seperti komentar di blog ini. Udah, udah lihat :)
oaalah, enyak yg udah ane terapin sekarang :D
Wah .
Apik iki Tutoriale, aku jajal yo Kang Taufik ..
mas tofik mau tanya ni
blog saya kok antara jumlah komentar dan kotak komentarnya kok berselisih jauh ya mas kalau blum ada yang komentar
mksdnya spasinya bnyak bgt
jadi memakan tempat
disini mas http://dubraw735.blogspot.com
coba cek salah satu artikel yang blum ada comentnya
@Dani Setiadi Itu karena komentar scroll-nya menggunakan ukuran height:
<div style='overflow:auto; width:auto; height:300px;'>
Lebih baik gunakan max-height:
<div style='overflow:auto; width:auto; max-height:300px;'>
Bang kalau mau buat komentar slider panel nyatu dengan hompager gimana ??
@Suwardi Unggit Hehe. Mungkin maksudnya: menyatu dengan #blog-pager.
Itu buatan sendiri, cek saja isinya :)
@Taufik Nurrohman yup maksud-nya seperti itu. Isi yang mana yang di cek..?? tadi malam aku cek di templete blogazine buatan abang binggung liat jquery-nya kerena aku masih belajar CSS dan ilmu belum sampai Jquery..
@Suwardi Unggit Kalau begitu jangan masuk ke situ dulu. Ambil pemahaman awalnya terlebih dahulu, setelah itu baru bongkar-bongkar halaman.
Great :-bd
keren kakak tutor.nya :)
Mas Taufik, saya mau nanya
bagaimana cara buat daftar member aktif sprt blog mas Taufik?
template punya ane ga ada comment wrap-nya, Mas (gabung ama main-wrapper)..pas dicoba..eh.. isi postingannya berubah jadi tombol "buka komentar" segede motorrrr.. :p
mas boleh tanya gak? keuntungannya pasang itu apa ik? apa bikin blog kita loadingnya agak lebih cepet?
Cuma aksesoris.
kok di saya gk work ?? (http://yuzsite.blogspot.com/)
Sudah work :D ,
ternyata cssnya gk work kalau disimpen diatas b:skin harus memakai tag <style type='text/css'> , kenapa ya ??
mas mau nanya, kok isi postingannya jadi ketutup yah :( ?
ni SSnya mas http://i50.tinypic.com/mj60k6.png
Aneh... aneh. Mungkin tag HTML di blogmu nggak ketutup sempurna =(
Mas mohon di cek dong kodenya :(
mct-dayz .blogspot. com
Oh, masalah ada di CSS Float. Nggak tahu muncul dari mana. Tambahkan ini saja di dalam selektor a.openpanel, beres:
a.openpanel {
...
clear:both;
}
kang Taufik Hebat oiiii
Kalau mau nempatin tombolnya di lain tempat gimana kak ?
Pertama, hapus dulu tombol originalnya:
a.openpanel.from-js {display:none;}
Lalu buat elemen tombol panelnya di tempat lain, melalui elemen tautan dengan kelas .openpanel
<a class='openpanel' href='#'>Tombol Buatan</a>
kalo cuna nyembunyiin form komentarnya gimana?
panelSelector = '#comment-form,#threaded-comment-form'
Mau nanya nih, kan di homepage aku buat tampil judul aja, gimana cara buat agar kalo judul posting diklik muncul postingannya menggeser ke bawah, tapi pake jquery
cool..!! :Q
Mau nanya nih, kan di homepage aku buat tampil judul aja, gimana cara buat agar kalo judul posting diklik muncul postingannya menggeser ke bawah, tapi pake jquery
Letakkan kode ini di atas </body>:
<script>
$('.post :header:first').click(function() {
$('.post :header:first').next().slideUp();
$(this).next().slideDown();
return false;
}).next().hide();
</script>
Tetep gak bisa mas, coba cek deltave.blogspot.com, dan apakah cara ini ada kaitannya dengan http://www.dte.web.id/2012/03/format-posting-hanya-tampil-judul.html
⇒ http://btemplates.com/2010/blogger-template-accordion/
mas, gimana caranya panel ini gak muncul ketika belum ada komentar, dan baru muncul ketika ada komentar...?
Maksudnya, saya kan mau membuat form komentarnya terpisah dari slidenya... nah, cara menyembunyikan panel ini ketika belum ada komentar gimana? dan baru muncul ketika ada komentar masuk...
JavaScript ini harus diletakkan di dalam kondisional jumlah komentar, bukan di atas tag </head>. Seperti ini:
<b:if cond='data:post.numComments != 0'>
<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>
</b:if>
Template widget harus di-expand. Kemudian, letakkan kode di atas di bawah kode ini (biasanya ada 2 — 3 buah):
<div class='comments' id='comments'>
gan kalo mau kotak komentar di buka pas pertama kali gmana kak
Pakai yang ini:
jQuery(function() {
jQuery(panelSelector).show()
.addClass('hompiPanel')
.before('<a class="openpanel active" href="#">' + closePanelText + '<em></em></a>')
.after('<div class="paneline"></div>');
jQuery('a.openpanel').toggle(function() {
jQuery(this).removeClass('active').html(openPanelText + '<em></em>');
jQuery('div.hompiPanel').slideUp(slideUpPanelSpeed);
return false;
}, function() {
jQuery(this).addClass('active').html(closePanelText + '<em></em>');
jQuery('div.hompiPanel').slideDown(slideDownPanelSpeed);
return false;
});
});
disimpannya di bagian mana kak sya gk ngerti??
Cara Ngubah warnanya gmn
biar simpel gmana mas? maksut saya jquerynya gak dihosting trus gak usah di beri kayak pengaturan itu
$(function() {
$('#comments').hide()
.addClass('hompiPanel')
.before('<a class="openpanel" href="#">Tampilkan Komentar<em></em></a>')
.after('<div class="paneline"></div>');
$('a.openpanel').toggle(function() {
$(this).addClass('active').html('Tutup Komentar<em></em>')
.next().slideDown();
return false;
}, function() {
$(this).removeClass('active').html('Tampilkan Komentar<em></em>')
.next().slideUp();
return false;
});
});
Artikel postingan yang bagus gan, sangat bermanfaat.
cantik css nya udah gak perlu repot2 lagi simple dan sangat singkat :-bd
Om taufik kalau mau ganti background warna Biru pada tombol Poskan Komentar dengan warna yang lain caranya bagaimana? mohon bantuannya..
Warna latar dan warna teks bisa diatur di bagian ini:
a.openpanel {
background-color:#39f; /* Warna latar saat panel komentar tertutup */
color:white; /* Warna teks pembuka panel komentar */
}
a.openpanel.active {
background-color:#900; /* Warna latar saat panel komentar terbuka */
}
Terimakasih Om taufik :)
apa ini hanya khusus untuk #comments ?
saya ingin mnerapkan ini pada sidebar wrapper, saya tidak ingin menngunakan accrdion sidebar seperti biasa..
karena template yang saya akan gunakan 1 colom jadi mneurut saya ini lebih tepat.. tapi knapa tidak jalan ketika di terapkan pada #sidebar-wrapper ???????????
var panelSelector = '#sidebar-wrapper'
This comment has been removed by the author.
wah sangat keren mas, sempurna di dark template saya :)
sudah saya terapkan, pokoknya :-bd
sekalian nanya mas :D
agar slide-nya berhenti di header saat di scroll kebawah, biar gk capek pengunjung scroll ke atas saat ada di bawah, bisa gk ya mas?
dengan begitu akan terlihat lebih sempurna :)
mohon di kasih jamu mas. sebelumnya makasih :D
Bagaimana kalau panelnya saja yang dipindah posisinya jadi di bawah? Jadi untuk menutup panel adalah cukup dengan cara menggulung layar ke bawah, tidak perlu menggulung layar ke atas lagi. Satu arah saja, tidak capek. Coba ganti kode .before( menjadi .after( dan juga sebaliknya.
siap berlangganan pokonya,sangat membantu buat saya yang pemula mas
Post a Comment
<< Home