Membuat Komentar Slide Panel pada Template Blogspot
Tabel Konten
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!
53 Komentar
Putra
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
Taufik Nurrohman
@Alam Perwira Bedanya kalau yang ini bentuknya slide panel seperti komentar di blog ini. Udah, udah lihat :)
IRIL SAGITA
Kalau mau nempatin tombolnya di lain tempat gimana kak ?
Taufik Nurrohman
Pertama, hapus dulu tombol originalnya:
Lalu buat elemen tombol panelnya di tempat lain, melalui elemen tautan dengan kelas
.openpanel
Putra
oaalah, enyak yg udah ane terapin sekarang :D
Rosyd Aqbar
Wah .
Apik iki Tutoriale, aku jajal yo Kang Taufik ..
Dani Setiadi
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
Taufik Nurrohman
@Dani Setiadi Itu karena komentar scroll-nya menggunakan ukuran
height
:Lebih baik gunakan
max-height
:Unknown
Bang kalau mau buat komentar slider panel nyatu dengan hompager gimana ??
Taufik Nurrohman
@Suwardi Unggit Hehe. Mungkin maksudnya: menyatu dengan
#blog-pager
.Itu buatan sendiri, cek saja isinya :)
Unknown
@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..
Taufik Nurrohman
@Suwardi Unggit Kalau begitu jangan masuk ke situ dulu. Ambil pemahaman awalnya terlebih dahulu, setelah itu baru bongkar-bongkar halaman.
Surga Kenari
Great :-bd
Unknown
keren kakak tutor.nya :)
Surga Kenari
Mas Taufik, saya mau nanya
bagaimana cara buat daftar member aktif sprt blog mas Taufik?
MUX SPARROW
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
Planet Pengetahuan
mas boleh tanya gak? keuntungannya pasang itu apa ik? apa bikin blog kita loadingnya agak lebih cepet?
Taufik Nurrohman
Cuma aksesoris.
Yusril Ibnu Maulana
kok di saya gk work ?? (http://yuzsite.blogspot.com/)
Yusril Ibnu Maulana
Sudah work :D ,
ternyata cssnya gk work kalau disimpen diatas b:skin harus memakai tag
<style type='text/css'>
, kenapa ya ??ImpotenSIA
mas mau nanya, kok isi postingannya jadi ketutup yah :( ?
ni SSnya mas
Taufik Nurrohman
Aneh... aneh. Mungkin tag HTML di blogmu nggak ketutup sempurna =(
ImpotenSIA
Mas mohon di cek dong kodenya :(
mct-dayz .blogspot. com
Taufik Nurrohman
Oh, masalah ada di CSS Float. Nggak tahu muncul dari mana. Tambahkan ini saja di dalam selektor
a.openpanel
, beres:Unknown
kang Taufik Hebat oiiii
Unknown
kalo cuna nyembunyiin form komentarnya gimana?
Taufik Nurrohman
Unknown
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
azewdsignet
cool..!! :Q
Unknown
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
Taufik Nurrohman
Letakkan kode ini di atas
</body>
:Unknown
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.htmlTaufik Nurrohman
⇒ http://btemplates.com/2010/blogger-template-accordion/
Unknown
mas, gimana caranya panel ini gak muncul ketika belum ada komentar, dan baru muncul ketika ada komentar...?
Unknown
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...
Taufik Nurrohman
JavaScript ini harus diletakkan di dalam kondisional jumlah komentar, bukan di atas tag
</head>
. Seperti ini:Template widget harus di-expand. Kemudian, letakkan kode di atas di bawah kode ini (biasanya ada 2 — 3 buah):
Anonim
gan kalo mau kotak komentar di buka pas pertama kali gmana kak
Taufik Nurrohman
Pakai yang ini:
Anonim
disimpannya di bagian mana kak sya gk ngerti??
Ardana D'kaiser
Cara Ngubah warnanya gmn
Unknown
biar simpel gmana mas? maksut saya jquerynya gak dihosting trus gak usah di beri kayak pengaturan itu
Taufik Nurrohman
Anonim
Artikel postingan yang bagus gan, sangat bermanfaat.
Surga Kenari
cantik css nya udah gak perlu repot2 lagi simple dan sangat singkat :-bd
Indraka
Om taufik kalau mau ganti background warna Biru pada tombol Poskan Komentar dengan warna yang lain caranya bagaimana? mohon bantuannya..
Taufik Nurrohman
Warna latar dan warna teks bisa diatur di bagian ini:
Indraka
Terimakasih Om taufik :)
Unknown
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 ???????????
Taufik Nurrohman
Unknown
Komentar ini telah dihapus oleh pengarang.
Unknown
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
Taufik Nurrohman
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.Geliathuss
siap berlangganan pokonya,sangat membantu buat saya yang pemula mas