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

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

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

          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

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

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

  • 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

      $(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.