Cara Membuat Buka Tutup (Spoiller) Pada Kotak Komentar Blogspot

Cara Membuat Buka Tutup (Spoiller) Pada Kotak Komentar Blogspot

Untuk membuat tombol buka tutup atau istilah lainnya spoiller pada kotak komentar blogspot,bisa sobat baca pada artikel ini. Kemudian silahkan untuk langsung memasangnya pada blog sobat, xi…xi..xi… itu juga jika sobat berkenan dan memang ingin memasang tombol buka tutup pada kotak komentar blognya.! Yang pasti dengan adanya spoiller atau tombol buka tutup pada kotak komentar ini akan menjadikan tampilan komentar pada blog sobat menjadi ringkas dann tidak terurai menurun hingga ke bawah . bagai mana… tertarik untuk mencobanya sob?

Ok.! Adapun cara membuat tombol buka tutup (spoiller) pada kotak komentar blogspot cara mudahnya adalah sebagai berikut.
Lakukan Login kedalam dasbor blog sobat,

kemudian pilih template,
pilih lagi edit HTML.
Berikan tanda centang pada kotak expand template widget,
setelah itu silahkan cari kode </head> Dalam template, jika sudah menemukannya, kemudian copy dan pastekanlah kode script berikut ini tepat di atas kode </head> 

</script>
<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='http://ceritangeblog.googlecode.com/files/spoillercomment.js.txt' type='text/javascript'/>

Jika sudah silahkan klik simpan.!

Sekarang lanjut lagi dengan pencarian kode seperti ini ]]></b:skin> Di dalam template blog sobat, jika sudah menemukannya silahkan copy kembali serta memastekan kode script berikut ini tepat di atas kode ]]></b:skin>

}
     a.openpanel {display:block;width:100%;height:40px;padding:0px 0px;text-align:center;font-weight:bold;line-height:30px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL2PRlne18EfJC_-7UwCJbtXW0srKMeGKGyYVU-JaqSDmQ2cNp-N1myZdFlkxvouCyK_ucklwPuzi_U7QGHt55KalSnJ09i8MuBQ524zRVtj1n77Iid_0UZqcDHstunE-zzj5Poi_zypef/s1600/page-wrapper-bg.png)repeat-x;-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:#000;}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.hompiPanel {padding:10px 20px 20px;margin:0px 0px !important;}

Cukup, pencarian kode dalam template sudah selesai.! Klik simpan template dan silahkan buka salah satu postingan sobat untuk melihat hasilnya. Demikian saja cara membuat buka tutup (spoiller) pada kotak komentar blogspot, kurang lebih hasilnya akan terlihat seperti pada kotak komentar CERITA NGEBLOG ini. Selamat mencoba dan bye-bye…

Updates:
Sebelumnya mohon maaf karena ada beberapa diantara sobat yang gagal menerapkan cara membuat buka tutup pada kotak komentar blogspot ini, semua ini dikarenakan keterburu-buruan serta ketidak telitian Admin dalam mempersembahkan kedua kode Script diatas. Baik itu kode CCS maupun script HTML. Untuk itu berikut ini aku lampirkan kembali kedua kode tersebut. Semoga berkenan. Jika dengan cara ini juga belum bisa coba sobat cari kode seperti ini dalam temlate sobat.

 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

Jika ada script seperti di atas, hapus dulu saja, agar pembuatan spoiler buka tutu untuk komentar ini berhasil.

Kode CCS berikut ini simpan diatas kode ]]></b:skin>

a.openpanel {display:block;width:100%;height:40px;padding:0px 0px;text-align:center;font-weight:bold;line-height:30px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL2PRlne18EfJC_-7UwCJbtXW0srKMeGKGyYVU-JaqSDmQ2cNp-N1myZdFlkxvouCyK_ucklwPuzi_U7QGHt55KalSnJ09i8MuBQ524zRVtj1n77Iid_0UZqcDHstunE-zzj5Poi_zypef/s1600/page-wrapper-bg.png)repeat-x;-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:#000;}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.hompiPanel {padding:10px 20px 20px;margin:0px 0px !important;}

Dan kode script berikut ini harap simpan di atas kode </head>

 <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='http://ceritangeblog.googlecode.com/files/spoillercomment.js.txt' type='text/javascript'/>

Last, simpan template
Dan semoga berhasil.!!!