Cara Membuat Tombol Buka Tutup Komentar Di Blogger

Metode membuat tombol buka tutup komentar ialah inti dari artikel ini. Widget kolom komentar memang sangat bermanfaat baik bagi blog secara SEO atau bagi pemilik blog sendiri.

Sebab, pembaca belum tentu paham kan dengan tulisan yang anda tulis. Nah, dengan adanya kolom komentar tersebut, pembaca bisa menanyakan perihal yang tidak ia pahami.

Namun, tampilan komentar blogger memang tidak memanjakan mata. Selain itu, tampilan komentar blogger ini juga terlihat berantakan. Oleh karena itu, tujuan dari cara membuat tombol buka tutup komentar blogger ini ialah agar tampilan widget komentar terlihat rapi dan enak dipandang.

Pengguna Template Viomaqz juga bisa mengikuti tutorial membuat kenop buka tutup komentar blogger seperti artikel ini. Penasaran bagaimana cara membuatnya?simak berikut ini.

Cara Membuat Tombol Buka Tutup Komentar Blogger

Membuat tombol buka tutup komentar blogger ada 2 cara. Cara yang pertama bisa kamu terapkan pada semua Template. Sedangkan cara yang kedua khusus untuk pengguna Template Viomaqz.

Prosedur Membuat Tombol Buka Tutup Komentar Blogger

1.Login Ke Akun Blogger kamu » Tema » Edit Html.

2.Taruh kode CSS Berikut ini sebelum kode ]]></b:skin> atau </style>.

<style type='text/css' >

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

</style>

3.Letakkan Kode Javascript berikut ini sebelum kode </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.Kemudian temukan kode <div class=’comments’ id=’comments’>. Kebanyakan Template memiliki 2 kode ini, ganti keduanya dengan kode berikut.

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

5.Klik Simpan tema!

Prosedur Membuat Tombol Buka Tutup Komentar Blogger Pada Template Viomaqz

1.Login ke akun blogger kalian » Tema » Edit Html.

2.Cari kode <b:includable id='commentPicker' var='post'>. Template Linkmaqz mempunyai 2 kode tersebut, silahkan ganti pada kode yang kedua.

3.Apabila kode tersebut sudah ketemu, silahkan hapus kode dibawahnya. Biasanya kode nya seperti ini:

<b:if cond='data:post.showThreadedComments'>

<b:include data='post' name='threadedComments'/>

<b:else/>

<b:include data='post' name='comments'/>

</b:if>

4.Silahkan hapus kode tersebut.

5.Cari kode : <b:include data='post' name='comments'/>, kemudian ganti kode tersebut dengan kode dibawah ini:

<b:if cond='data:blog.pageType == "item"'>

<style>

.buka-komen,.tutup-komen{font-family:inherit;background-color:#11589D;color:#fff;font-size:16px;line-height:1.3em;padding:8px 10px;text-align:center;font-weight:700;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;-webkit-transition:all 218ms;-moz-transition:all 218ms;-o-transition:all 218ms;transition:all 218ms;-webkit-user-select:none;-moz-user-select:none;margin:20px 0 0;cursor:pointer;}

.buka-komen{display:block;margin-bottom:20px}

#comments-box{display:none}

</style>

<div aria-label='Buka Komentar' class='buka-komen' id='buka-komen' onclick='document.getElementById("comments-box").style.display="block";document.getElementById("tutup-komen").style.display="block";document.getElementById("buka-komen").style.display="none"' role='button' tabindex='0'>Buka Komentar</div>

<div aria-label='Tutup Komentar' class='tutup-komen' hidden='hidden' id='tutup-komen' onclick='document.getElementById("comments-box").style.display="none";document.getElementById("tutup-komen").style.display="none";document.getElementById("buka-komen").style.display="block"' role='button' tabindex='0'>Tutup Komentar</div>

</b:if>

<div id='comments-box'>

<b:include cond='data:blog.pageType in {"static_page","item"}' data='post' name='comments'/>

</div>

6.Klik simpan tema, dan lihat hasilnya!

Demo

Bagaimana? Mudah kan cara membuat tombol buka tutup komentar blogger. Semoga bisa kamu terapkan dan tidak mengalami masalah pada saat proses penerapan. Demikian artikel dari MasHabibi, semoga bermanfaat.

Sumber kode: