Menambahkan Perlihatkan Dan Sembunyikan Komentar Blogger dengan Onclick Event

Menambahkan Perlihatkan Dan Sembunyikan Komentar Blogger dengan Onclick Event

CSS HTML JavaScript

Menambahkan Perlihatkan Dan Sembunyikan Komentar Blogger dengan Onclick Event - Halo Sobat! Di postingan pertama ini saya akan memberikan tutorial cara menambahkan perlihatkan dan sembunyikan komentar blogger dengan Onclick Event

Menurut saya fungsi ini akan membuat loading blog sobat lebih ringan jika pada halaman posting banyak sekali komentar yang ada

Penasaran?Yuk simak Caranya!

Perlihatkan Dan Sembunyikan Komentar Blogger dengan Onclick Event

1.Buka Blogger > Template Editor > Cari Markup Komentar Ini (bisa menggunakan Ctrl + F)

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

Catatan: Biasanya terdapat 2 kode seperti diatas
Ganti Kedua Kode Diatas Dengan Kode Dibawah ini:

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

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

/* Perlihatkan Dan Sembunyikan Komentar */
.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[
// FERARI-ART
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 Dan Lihat Tampilan Blog Anda

"Untuk Demo Dapat Dilihat pada Kotak Komentar Di Blog Ini"

Demikian Tutorial Menambahkan Perlihatkan Dan Sembunyikan Komentar Blogger dengan Onclick Event Jika Ada Kesulitan Bisa Ditanyakan Pada Kolom Komentar Dibawah,Terimakasih!

Ditulis Unknown Pada 22.04 1 Komentar