Membuat Tombol Show/Hide di Kotak Komentar

Banyak sekali artikel yang membahas tombol show/hide di kotak komentar, tetapi banyak pula cara yang dilakukan. Salah satunya adalah yang akan saya share berikut ini. Sebelumnya saya akan membahas keuntungan dari tombol ini. Adapun keuntungannya adalah meringkas blog agar terlihat rapi dan juga dengan adanya tombol ini bisa membuat tampilan blog menjadi lebih menarik. Setelah mengetahui fungsinya saya akan share langkah demi langkah.


1.  Seperti biasa masuk kedalam Edit Html dan cari kode

]]></b:skin>, kemudian pastekan kode berikut tepat diatas kode ]]></b:skin>

a.openpanel {display:block;width:900px;height:30px;padding:0px 0px;text-align:center;font-weight:bold;line-height:30px;background:#FFD700;font-size:20px;font-family:Comic Sans MS;color:#0099FF;border:2px solid #000000;text-shadow:0 1px 0 #CCC;-moz-border-radius: 3px;-webkit-border-radius:3px;border-radius: 3px;-moz-box-shadow: 0 1px 3px #C6C6C6, 1px 1px 0 rgba(255, 255, 255, 0.4) inset;-webkit-box-shadow: 0 1px 3px #C6C6C6, 1px 1px 0 rgba(255, 255, 255, 0.4) inset;box-shadow: 0 1px 3px #C6C6C6, 1px 1px 0 rgba(255, 255, 255, 0.4) inset;}

    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:#FFD700;}

    a.openpanel.active em {top:6px;border color:#ffffff;}

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

2. Cari kode </head> dan masukan kode berikut tepat 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 = "Tampilkan Komentar",
    closePanelText = "Tutup Komentar",
    slideDownPanelSpeed = 600,
    slideUpPanelSpeed = 400;
    //]]>
    </script>
    <script type='text/javascript'>
    </script>
    <script src='http://membuatgempar.net23.net/comment.js' type='text/javascript'/>

 

4. Lalu simpan template dan lihat hasilnya.

Semoga membantu.