Cara Membuat Tombol Show / Hide Komentar di Blogger

Pada kesempatan kali ini admin akan memberikan sebuah tutorial bagaimana Cara Membuat Tombol Show / Hide Komentar di Blogger yaitu sebuah tombol yang dapat membuka dan menutup kolom komentar pada Blogger. Tombol buka tutup komentar ini memiliki banyak fungsinya, diantaranya adalah memperindah tampilan blog kamu, membuat blog kamu menjadi lebih profesional, meringakan loading blog walaupun hanya sedikit, dan Juga tampilan blog tidak berantakan karena kolom komentar.


Artikel ini terinspirasi dari sebuah blog yang mempunyai kolom kometar yang bisa membuka dengan sebuah tombol dan dengan menekan kembali untuk menutup kolom komentar tersebut. Untuk cara pembuatannya tidak terlalu sulit hanya memerlukan kode CSS dan Javascript pada template blog kalian.

Cara Membuat Tombol Show / Hide Komentar di Blogger

1. Silahkan kamu login di blogger.com dengan menggunakan Gmail kamu.
2. Masuk ke menu TEMA > klik Edit HTML
3. Kemudian kamu cari kode berikut ini dengan menggunakan CTRL + F <div class='comments' id='comments'> biasanya terdapat 2 markup, silahkan kamu ganti kedua kode tersebut dengan kode dibawah 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'/>

4. Kemudian kamu tambahkan kode CSS dibawah ini tepat di ATAS kode ]]></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:#555;border:2px solid;border-radius:5px;text-align:center;margin:30px auto;letter-spacing:1px;transition:all .3s}
#comments a.hiddencontent {background:#fff;color:#555;transition:all .3s}
a.showcontent:hover{background:#fff;color:#555;}
#comments a.hiddencontent:hover{background:#555;color:#fff;}

5. Langkah terakhir adalah dengan menambahkan kode JavaScript dibawah ini tepat di ATAS kode </body> pada template blog kalian.

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

6. Silahkan klik SIMPAN dan Selesai.

Nah, Begitulah Cara Membuat Tombol Show / Hide Komentar di Blogger apabila kamu memiliki kendala dalam mebuat tutorial diatas kamu bisa konsultasi kami lewat komentar dibawah artikel ini atau dengan Contact kami di halaman Contact.
Tampilkan Komentar
Sembunyikan Komentar

1 Response to "Cara Membuat Tombol Show / Hide Komentar di Blogger"

  1. bagus bang langsung saya terapkan. tapi maaf bang saya punya masalah, kenapa show dan hidenya di blog saya bersamaan munculnya yaa..

    Terimakasih

    ReplyDelete

1. Berkomentarlah dengan tata bahasa yang baik agar orang lain tahu sebijak apa karakter anda melalui kata kata.
2. Silahkan tulis komentar anda untuk hal apapun yang masih berhubungan dengan post pada halaman ini.
3. Mohon untuk tidak menyertakan Link Aktif pada kolom komentar.
4. Mohon maaf apabila tidak sempat membalas komentar semua.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel