Mecha versi 2.6.3 sudah dirilis!

Membuat Komentar Slide Panel pada Template Blogspot

Tabel Konten
  1. Lebih Jauh Lagi 
Membuat Komentar Slide Panel pada Template Blogspot
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):

Lihat Demo

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:

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>

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:

<div style='overflow:auto; width:auto; height:300px;'>

Lebih baik gunakan max-height:

<div style='overflow:auto; width:auto; max-height:300px;'>

Unknown

Bang kalau mau buat komentar slider panel nyatu dengan hompager gimana ??

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.

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?

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:

a.openpanel {
...
clear:both;
}

Unknown

kang Taufik Hebat oiiii

Unknown

kalo cuna nyembunyiin form komentarnya gimana?

Taufik Nurrohman

panelSelector = '#comment-form,#threaded-comment-form'

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

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>:

<script>
$('.post :header:first').click(function() {
$('.post :header:first').next().slideUp();
$(this).next().slideDown();
return false;
}).next().hide();
</script>

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:

<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'>

Anonim

gan kalo mau kotak komentar di buka pas pertama kali gmana kak

Taufik Nurrohman

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;
});
});

Anonim

disimpannya di bagian mana kak sya gk ngerti??

Unknown

biar simpel gmana mas? maksut saya jquerynya gak dihosting trus gak usah di beri kayak pengaturan itu

Taufik Nurrohman

$(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;
});
});

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:

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 */
}

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 ???????????

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

Komentar telah ditutup.