Cara Membuat Show-Hide Komentar Blog ~ Tutorial Bangsat

Cara Membuat Show-Hide Komentar Blog. Berikut ini Tutorial Bangsat tentang Cara Membuat komentar blog Show and Hide, jadi maksudnya disini adalah membuat komentar blogger tersembunyi dan menunjukannya kembali.

Pada waktu yang lalu ketika membagikan template Blogger Responsive Valid Html5 Mini Hitamz, ditemplate itu saya memasang kode dibawah untuk menyembunyikan dan menunjukan kembali komentar blog, atau yang lebih populernya "Show Hide komentar". Selain untuk menghemat ruang yang terpakai di Postingan Blog, ini juga misalnya karena komentar Blog yang banyak dan memanjang kebawah ini dapat meringankan loading blog yang komentarnya menumpuk, atau juga dapat mempercantik tampilan blog.

Ok sob Tertarik ingin Membuat Show-Hide Komentar Blog ?

LIVE DEMO ( Masuk ke artikel untuk demonya )

1. Klik Template dan klik Edit HTML
2. Sebelumnya save dulu template yang anda gunakan untuk menghindari hal yang tidak diinginkan misalnya salah edit dll. ( simpan saja semua kode template anda ke Notepad )
3. Cari atau klik ctrl+F ]]></b:skin>
4. Copy dan Paste kode di bawah dan letakkan di atas ]]></b:skin>

a.openpanel {display:block;width:100%;height:40px;padding:0px 0px;text-align:center;font-weight:bold;line-height:30px;background:#222; 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:10px solid transparent;border-top-color:#222;
}a.openpanel.active {background-color:#d32301;}a.openpanel.active em {top:13px;border color:#d32301;
}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;}

5. Kemudian cari kode </head>
6. Copy dan Paste kode di bawah dan letakkan 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 = "Berikan Komentar",
closePanelText = "Sembunyikan Komentar",
slideDownPanelSpeed = 800,
slideUpPanelSpeed = 300;
//]]>
</script>
<script type='text/javascript'>
</script>
<script src='https://googledrive.com/host/0B2J42XkvLqFoN2dOdEZOOHJ5U0E' type='text/javascript'>
</script>

7. Simpan template dan lihat Hasilnya

Keterangan:

Kode yang berwarna merah tidak perlu dipasang jika suadah ada kode Jquery yang sejenis di template anda.
Angka 800 kecepatan untuk menutup kotak komentar
Angka 300 kecepatan untuk membuka kotak komentar
Silahkan anda atur warna panel kotak show hide sesuai keinginan pada kode CSS

Bagaiman sobat mudah bukan? dan semoga sobat berhasil dalam membuat dan memasang show-hide komentar di template Blogger sobat.

Terima Kasih telah membaca artikel tentang Cara Membuat Show-Hide Komentar Blog . Silahkan baca artikel lainnya di daftar isi.

Unknown

Judul : Cara Membuat Show-Hide Komentar Blog .
Ditulis oleh : Unknown .
Pada hari : Saturday 2 August 2014 .
Rating Blog : 5 dari 5

Follow me on: Facebook | Twitter | Google+

Cara Membuat Show-Hide Komentar Blog

Related Post