Minggu, 24 Februari 2013

Cara Memasang Tombol Buka Tutup di Kotak Komentar Menggunakan Script

Cara Memasang Tombol Buka Tutup di Kotak Komentar Menggunakan Script - Pada artikel sebelumnya saya sudah menjelaskan tentang memasang tombol buka tutup komentar tanpa menggunakan script yang tentunya lebih mudah dibuat dan lebih cepat dalam urusan loadingnya. Masih dengan topik yang sama yaitu memasang tomobl buka tutup di kotak komentar, jika pada artikel sebelumnya tidak menggunakan script tapi untuk artikel ini, kita akan menggunakan script dalam memasang tombol buka tutup di kotak komentar.

Meskipun memiliki kode yang berbeda tapi fungsi yang dihasilkan adalah tetap sama yaitu sama-sama memiliki tombol buka tutup di kotak komentar blog! Memasang tombol buka tutup (spoiler) itu sendiri memiliki fungsi untuk menyembunyikan kotak komentar agar (mungkin) tampilan dari artikel blog yang dibuat bisa minimalis padahal tanpa menggunakan script, blogger sendiri sudah menyediakan tampilan buka tutup dibagian menu Komentar yang bisa di setting sesuai keinginan. Ya, namanya juga manusia, individu unik yang tentunya tidak memiliki kesamaan yang sama dengan individu lainnya, tampil beda adalah sesuatu yang lumrah yang bisa dilakukan oleh setipa manusia termasuk dalam memodifikasi blog yang mereka miliki.

Dan berikut contoh tampilan gambar tombol buka tutup di kotak komentar menggunakan script yang telah saya terapkan untuk blog saya yang lain

Cara Memasang Tombol Buka Tutup di Kotak Komentar Menggunakan Script

Demo

Jika anda ingin memasang tombol buka tutup ini, berikut panduannya
  1. Masuk ke akun Blogger anda
  2. Pilih menu Template >> Edit HTML >> tekan tombol Ctrl+F di keyboard
  3. Cari kode ]]></b:skin>
  4. Letakkan kode berikut tepat diatas ]]></b:skin>
    a.openpanel {display:block;width: 100% ;height: 30px ;padding:0px 0px;text-align:center;font-weight:bold;line-height:30px;background: #9E9E9E ;-webkit-transition: all .15s ease-in-out;-webkit-transform-origin: 50% 1px;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:#;}
    a.openpanel.active em {top:6px;border color:transparent transparent white transparent;}
    div.paneline {height:0px;-webkit-transition: all .15s ease-in-out;-webkit-transform-origin: 50% 1px;}
    div.openclosePanel {padding:10px 20px 20px;margin:0px 0px !important;}
  5. Cari kode </head>
  6. Letakkan kode berikut tepat diatas </head>
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js' type='text/javascript'/>
    <script type='text/javascript'> //<![CDATA[
    var panelSelector = '#comments',
    openPanelText = "Buka Komentar",
    closePanelText = "Tutup Komentar",
    slideDownPanelSpeed = 600;
    slideUpPanelSpeed = 400;
    //]]>
    </script>
    <script src='http://panduan-template-blog-id-id.googlecode.com/files/openclosepanel.js'/>
  7. Selesai. Silahkan preview terlebih dahulu perubahan template anda, jika tidak ada error. Simpan template
  8. Keterangan :
    Hapus <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"> jika ditemplate anda sudah terpasang kode script tersebut
Semoga dengan adanya tombol buka tutup di kotak komentar blog ini bisa memberikan nuansa terseniri dalam tampilan blog anda. Namun kalau untuk saya sendiri saya tidak ingin memasang tombol buka tutup ini di blog utama saya ini karena sudah banyak kode yang saya pasang hehehee..

Okey, jika ada pertanyaan atau ada kode yang tidak berfungsi dari kode diatas, silahkan tinggalkan komentar anda untuk artikel ini, Cara Memasang Tombol Buka Tutup di Kotak Komentar Menggunakan Script

Cara Memasang Tombol Buka Tutup di Kotak Komentar Menggunakan Script Rating: 4.5 Diposkan Oleh: Ana Sriwahyuni

12 komentar:

  1. keren, aku udah coba :D follback ya teknomumed.blogspot.com

    BalasHapus
  2. Mantap...sangat bermanfaat.... mau ga???? tukar link ama saya??? jika mau hubungi saya melalui komentar di blog saya www.eqhackersblog.blogspot.com

    BalasHapus
  3. thnks infonya gan, kunjungi juga blog ane
    http://yogagj.blogspot.com

    BalasHapus
  4. oke juga untuk mempercantik kotak komentar :)

    BalasHapus
  5. kalo mengatasi tombol publikasikan (publish) yang gag berfungsi gmana gan caranya...

    BalasHapus
  6. Mantab gan..trimksih infonya..

    BalasHapus
  7. Terima kasih mbak. Sangat bermanfaat dan berhasil. jadi menghemat space blog. :)

    BalasHapus

Demi kenyamanan bersama, tidak boleh memasang link dalam bentuk apapun, komentar yang berisi link tidak akan diterbitkan
Terimakasih

Direktori

direktori weblogger
Direktori WeBlog Indonesia