Cara Membuat Buka Tutup / Auto Hide Kotak Komentar di Blog

Published by Iman Saiman Rabu, 08 April 2015

SimBale

Selamat siang sobat SimBale, rasanya masih ngantuk karena admin masih liburan kali ini. Di sela-sela liburan saya akan memposting sebuah tips seo yang berguna bagi sobat. Tips kali ini adalah Cara Membuat Buka Tutup / Auto Hide Kotak Komentar di Blog. Jadi dengan adanya auto hide ini blog kita akan terlihat ramping dan tidak terlalu panjang karena komentar yang terlalu banyak. Oke sobat senkarang kita coba sau persatu tutorialnya.

Langkah - Langkah :

• Sobat terlebih dahulu login ke akun blogger sobat
• Kemudian masuk ke dasbor blogger sobat
• Pilih blog yang akan sobat pasang Auto Hide Komentar
• Lalu masuk ke Templates => Edit HTML
• Cari kode </head> (dengan CTRL + F agar lebih mudah mencarinya)
• Lalu paste kode dibawah ini diatas 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 = "<center><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJvE7GXwLo5eR86UOl0PSMxeAPIwj4Tlco-7XVoF1UCcfqbMre3f6SFNKv3nghMHBCz2vt832bQLwW0dNECxzSkngrdWmg9VA_PjfEQPNEliTtlyO7u5CHvalh_zRpG23T-R9HPdV054vC/s1600/View+Comment.png'/></a></center>",
closePanelText = "<center><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiJqJF3xedhhRZ33LV3qTC8D1ES5pzy8OBhSGF9ekHZ72MBtxMCKvsRJomuwIT3af6epyP-h-f30taWJL7KOf7pyrQ2s6RVaptYaDTizgqlwhlIIE2K8Tb5jE_c68u13NspPeT4Y3S4s7d/s1600/Hide+Comment.png'/></a></center>",
slideDownPanelSpeed = 800,
slideUpPanelSpeed = 300;
//]]>
</script>
<script type='text/javascript'>
</script>
<script src='http://misbahudin-dcaesga.googlecode.com/files/show-hide.js' type='text/javascript'/> 

• Setelah itu cari lagi kode ]]></b:skin> 
• Kemudian paste kode dibawah ini tepat 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:#ffffff; url()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:#ffffff;}a.openpanel.active em {top:6px;border color:#222222;
}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;}   

• Lalu klik "Save Template"
• Selesai.

NB : Ganti url yang berwarna orange dengan URL Gambar sobat.

Semoga bermanfaat
Best Regards
Admin - Aditya