Menambahkan Show and Hide Comments Blogger dengan Onclick Event

10/13/2015
Menambahkan Show and Hide Comments Blogger dengan Onclick Event

Menambahkan Show and Hide Comments Blogger dengan Onclick Event - Kembali lagi Arlina Design berbagi tutorial blog setelah kemarin membahas tentang Cara Memasang Iklan Melayang Responsive dengan Tombol Close. Kali ini Arlina Design akan berbagi tentang cara menambahkan fungsi show and hide ke dalam area komentar blogger dengan memanfaatkan atribut onclick event.

Tujuan menambahkan fungsi ini yaitu untuk meringankan loading (onload) blog di halaman posting jika di postingan blog sobat sudah terdapat banyak komentar didalamnya. Cara kerja dari script ini cukup sederhana yaitu konten komentar akan tetap tertutup sebelum sobat membuka area komentar dengan menekan tombol show and hide yang akan saya bagikan ini.

Mari kita simak caranya sebagai berikut :

Show and Hide Comments Blogger dengan Onclick Event


1. Buka Blogger > Template editor > Cari markup komentar ini :

<div class='comments' id='comments'>

Catatan : Biasanya terdapat dua markup seperti di atas

Ganti (kedua) kode di atas dengan kode di bawah ini :

<a href="#" id="comments-show" class="showcontent" onclick="showComm('comments');return false;">Show comments</a>
<div class='clear'/>
        <div class='comments hide-content' id='comments'>
<a href="#" id="comments-hide" class="hiddencontent" onclick="showComm('comments');return false;">Hide comments</a>
<div class='clear'/>

2. Tambahkan kode di bawah ini sebelum ]]></b:skin> atau </style>

/* Show and Hide Comments */
.hide-content{display:none;margin:0;padding:0;}
a.showcontent,#comments a.hiddencontent{display:block;text-decoration:none;position:relative;color:#fff;font-weight:700;font-size:15px;padding:12.5px 0;background:#5593f0;border:2px solid;border-radius:5px;text-align:center;margin:30px auto;letter-spacing:1px;transition:all .3s}
#comments a.hiddencontent {background:#fff;color:#acb3b8;transition:all .3s}
a.showcontent:hover{background:#fff;color:#5593f0;}
#comments a.hiddencontent:hover{background:#acb3b8;color:#fff;}

3. Tambahkan kode di bawah ini sebelum </body>

<script type='text/javascript'>
//<![CDATA[
// Show and Hide Comments
function showComm(e){document.getElementById(e)&&("none"!=document.getElementById(e+"-show").style.display?(document.getElementById(e+"-show").style.display="none",document.getElementById(e).style.display="block"):(document.getElementById(e+"-show").style.display="block",document.getElementById(e).style.display="none"))};
//]]>
</script>

4. Terakhir, simpan template.

Silakan lihat demo di bawah ini (Scroll ke area komentar) :


Demikian tutorial sederhana tentang cara Menambahkan Show and Hide Comments Blogger dengan Onclick Event. Jika ada kesulitan silakan tanyakan lewat kolom komentar, terima kasih.

Artikel Terkait

Next Article
« Prev Post
Previous Article
Next Post »
Penulisan markup di komentar
  • Untuk menulis huruf bold gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline gunakan <u></u>.
  • Untuk menulis huruf strikethrought gunakan <strike></strike>.
  • Untuk menulis kode HTML gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silakan parse kode pada kotak parser di bawah ini.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

1 comment

avatar
Anonymous

أحسنت الشرح

Balas

Silakan tambahkan komentar sesuai dengan topik dan komentar dengan link akan dihapus, terima kasih.