Membuat Komentar Slide Panel pada Template Blogspot 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):

Pertama-tama masuklah ke halaman editor HTML template Anda kemudian temukan kode ini:

Salin kode ini dan letakkan di atasnya:

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

Kemudian temukan kode ini:

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:

jQuery(function() {
    jQuery(panelSelector).hide()
        .addClass('hompiPanel')
            .before('' + openPanelText + '

') .after('

'); jQuery('a.openpanel').toggle(function() { jQuery(this).addClass('active').html(closePanelText + ''); jQuery('div.hompiPanel').slideDown(slideDownPanelSpeed); return false; }, function() { jQuery(this).removeClass('active').html(openPanelText + ''); jQuery('div.hompiPanel').slideUp(slideUpPanelSpeed); return false; }); });Isinya sangat sedikit. Karena fungsi dari script 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 keperluan intimidasi)
    .addClass('hompiPanel')
     // Sisipkan elemen a.openpanel sebelum panelSelector
        .before('' + openPanelText + '

') // Sisipkan elemen div.paneline setelah panelSelector (sekedar hiasan saja) .after('

'); Setelah itu barulah aksi animasi bisa dilakukan. Di sini Saya menggunakan event .toggle():

jQuery('a.openpanel').toggle(function() {
    jQuery(this).addClass('active').html(closePanelText + '');
    jQuery('div.hompiPanel').slideDown(slideDownPanelSpeed);
    return false;
}, function() {
    jQuery(this).removeClass('active').text(openPanelText + '');
    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 :)

Xsumber artikel ini

silakan di clik sumber artikel ini

Hhihihi jangan lupa back lagi ya..

Untuk berlangganan Artikel silahkan Masukkan email anda kemudian cek inbox email

Author : Unknown

Setelah anda membaca artikel tentang Membuat Komentar Slide Panel pada Template Blogspot jika bermanfaat, silahkan tekan tombol Share. Anda juga boleh menyalin / menyebarluaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya : <a href="http://cyberbintauna.blogspot.com/2013/08/membuat-komentar-slide-panel-pada-template-blogspot.html" target="_blank">Membuat Komentar Slide Panel pada Template Blogspot</a>

Baca Juga:

Judul: Membuat Komentar Slide Panel pada Template Blogspot
Rating: 100% based on 99998 ratings. 5 user reviews.
Ditulis Oleh Unknown
klik disini untuk menambahkan komentar blogger

Terimakasih atas kunjungan Sobat pada artikel ini,dan jangan lupa untuk meninggalkan komentar sobat tentang artikel ini.