1 MEMBUAT KOTAK KOMENTAR DENGAN TOMBOL BUKA / TUTUP

                       Dengan membuat atau memasang kotak / form komentar buka tutup di blog yang pasti difungsikan untuk merapikan tempat komentar dari para komentator blog anda supaya tampilannya tidak memanjang atau melorot kebawah. bagaimana kalau komentarnya sampai ribuan, kan makin memanjang ke bawah tuh. Sebenarnya istilah buka tutup / show hide pada kotak komentar ini sering disebut dengan spoiler, jika diklik maka akan terbuka dan tertutup tombol spoiler tersebut. Tampilan tombol show hide / buka tutup kotak komentar, seperti terlihat dibawah ini. Simak bagaimana Cara Membuat Kotak Komentar Dengan Tombol Buka / Tutup.

Cara Membuat Show Hide / Spoiler Pada Kotak Komentar di Blogspot :
1. Login ke Blogger
2. Pilih Template => Edit HTML
3. Lalu Cari kode ]]></b:skin> dan letakkan kode berikut diatasnya

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.rudyhartonoPanel {padding:10px 20px 20px;margin:0px 0px !important;}

5. Selanjutnya cari lagi kode </head> dan letakkan kode berikut diatasnya

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/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 type='text/javascript'>
</script>
<script src='https://sites.google.com/site/blogrudyhartono/js/bukatutup.js' type='text/javascript'/> 

Keterangan :

1. Warna merah menunjukkan panjang dan lebar dan background tombol buka tutup
2. Apabila di dalam template anda sudah ada kode jquery warna hijau, maka tidak perlu dicantumkan lagi.

6. Selesai, simpan template

Selamat mencoba membuat / memasang tombol buka tutup komentar di blog, semoga bermanfaat.

Komentar →