2 Cara Memasang Show/Hide Komentar Blogger - Onclick Event
Tutorial: Tips & Trik Cara Membuat, Menampilkan dan Memasang Show/Hide di Komentar Blogger
Yang dimaksud "Show/Hide Komentar Blogger" yaitu sebuah fitur yang berfungsi membuka atau menyembunyikan (menutup) widget komentar yang ada di situs web kamu.
Tutorial ini memakai Onclick Event, artinya ada penambahan JavaScript (Js) khusus biar fitur ini bekerja dengan baik.
Oh iya, tujuan pemasangan Show/Hide di komentar blogger ini untuk mempercepat loading blog; sayangnya... ada penambahan arahan JavaScript (Js) khusus yang bertugas mengaktifkan fitur ini -- yang mana penambahan arahan JS ini memperberat kecepatan loading blog.
Untungnya, JavaScript (Js) ini tidak terlalu berat, bahkan terkesan sangat ringan; apabila dibandingkan dengan widget komentar default blogger yang usang termuat (loading).
Sampai ini ketika ini, setidaknya ada 2 cara yang dapat kau implementasikan sebagaimana kondisi template blogger yang kau gunakan.
Cari arahan ini:
Ada 3 atau lebih arahan yang sama (diatas), yang perlu kau ubah (ganti) yaitu arahan yang KEDUA dengan arahan ini:
Simpan arahan CSS di bawah ini, sempurna di atas arahan ]]></b:skin> atau </style>
Untuk JavaScript (Js) nya sendiri, silakan Salin (Copy) arahan JS di bawah ini, Paste (Tempel) di atas arahan </body>
Apabila tidak berfungsi, coba simpan JavaScript (Js) di atas, sempurna di atas arahan </head> kemudian ketuk tombol Save Template.
Jika ternyata tutorial No. 1 di atas gagal diterapkan di template blogger yang kau gunakan, coba ikuti tutorial No. 2 di bawah ini.
Cari arahan di bawah ini:
Copy (salin) arahan di bawah ini:
Pasang di antara kedua arahan yang kau temukan tadi, dengan hasil sebagai berikut:
Ketuk tombol Simpan Template, dan lihat hasilnya.
Nah itu ia tutorial cara menciptakan dan memasang fitur Show/Hide di widget kolom komentar blogger/blogspot.
Source:
candysweet-aina.blogspot.com/search?q=cara-menyembunyikan-kotak-komentar / candysweet-aina.blogspot.com/search?q=cara-menyembunyikan-kotak-komentar / candysweet-aina.blogspot.com/search?q=cara-menyembunyikan-kotak-komentar / candysweet-aina.blogspot.com/search?q=cara-menyembunyikan-kotak-komentar
Sumber http://addbloggerthemes.blogspot.com
Yang dimaksud "Show/Hide Komentar Blogger" yaitu sebuah fitur yang berfungsi membuka atau menyembunyikan (menutup) widget komentar yang ada di situs web kamu.
Tutorial ini memakai Onclick Event, artinya ada penambahan JavaScript (Js) khusus biar fitur ini bekerja dengan baik.
Baca Juga
Pic: EXEIdeas
Oh iya, tujuan pemasangan Show/Hide di komentar blogger ini untuk mempercepat loading blog; sayangnya... ada penambahan arahan JavaScript (Js) khusus yang bertugas mengaktifkan fitur ini -- yang mana penambahan arahan JS ini memperberat kecepatan loading blog.
Untungnya, JavaScript (Js) ini tidak terlalu berat, bahkan terkesan sangat ringan; apabila dibandingkan dengan widget komentar default blogger yang usang termuat (loading).
2 Cara Membuat & Memasang Show/Hide Komentar Blogger - Onclick Event
Sampai ini ketika ini, setidaknya ada 2 cara yang dapat kau implementasikan sebagaimana kondisi template blogger yang kau gunakan.
Cari arahan ini:
<div class='comments' id='comments'>
Ada 3 atau lebih arahan yang sama (diatas), yang perlu kau ubah (ganti) yaitu arahan yang KEDUA dengan arahan 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'/> Simpan arahan CSS di bawah ini, sempurna di atas arahan ]]></b:skin> atau </style>
/* Show and Hide Comments Blogger */ .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;} Untuk JavaScript (Js) nya sendiri, silakan Salin (Copy) arahan JS di bawah ini, Paste (Tempel) di atas arahan </body>
<script type='text/j4vascript'> //<![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> Apabila tidak berfungsi, coba simpan JavaScript (Js) di atas, sempurna di atas arahan </head> kemudian ketuk tombol Save Template.
Jika ternyata tutorial No. 1 di atas gagal diterapkan di template blogger yang kau gunakan, coba ikuti tutorial No. 2 di bawah ini.
Cari arahan di bawah ini:
</article> </b:includable>
Copy (salin) arahan di bawah ini:
<b:if cond='data:blog.pageType == "item"'> <style type='text/css'> /* Click to comment */ #hide{display:none} #buka-komentar,.buka-komentar{margin:25px auto 0;display:block;overflow:hidden;padding:0;position:relative;text-align:center} #show{margin:0 auto;width:320px;text-align:center;position:relative} .buka_disqus{display:block;max-width:320px;color:#0b84d8;border-radius:5px;margin:0 auto;cursor:pointer;font-weight:700;text-transform:uppercase;font-size:15px;text-align:center;height:45px;line-height:45px;border:1px solid #0b84d8} .buka_disqus:hover{background:#0b84d8;color:#fff;} </style> <div class='buka-komentar' id='buka-komentar'> <div id='show'><span class='buka_disqus' href='j4vascript:void(0)' onclick='document.getElementById('comments').style.display='block';document.getElementById('hide').style.display='block';document.getElementById('show').style.display='none''>click to comment</span></div><div id='hide'><span class='tutup_disqus' href='j4vascript:void(0)' onclick='document.getElementById('comments').style.display='none';document.getElementById('show').style.display='block''/> <b:include data='post' name='comments'/> </div> </div> </b:if> Pasang di antara kedua arahan yang kau temukan tadi, dengan hasil sebagai berikut:
</article> <b:if cond='data:blog.pageType == "item"'> <style type='text/css'> /* Click to comment */ #hide{display:none} #buka-komentar,.buka-komentar{margin:25px auto 0;display:block;overflow:hidden;padding:0;position:relative;text-align:center} #show{margin:0 auto;width:320px;text-align:center;position:relative} .buka_disqus{display:block;max-width:320px;color:#0b84d8;border-radius:5px;margin:0 auto;cursor:pointer;font-weight:700;text-transform:uppercase;font-size:15px;text-align:center;height:45px;line-height:45px;border:1px solid #0b84d8} .buka_disqus:hover{background:#0b84d8;color:#fff;} </style> <div class='buka-komentar' id='buka-komentar'> <div id='show'><span class='buka_disqus' href='j4vascript:void(0)' onclick='document.getElementById('comments').style.display='block';document.getElementById('hide').style.display='block';document.getElementById('show').style.display='none''>click to comment</span></div><div id='hide'><span class='tutup_disqus' href='j4vascript:void(0)' onclick='document.getElementById('comments').style.display='none';document.getElementById('show').style.display='block''/> <b:include data='post' name='comments'/> </div> </div> </b:if> </b:includable> Ketuk tombol Simpan Template, dan lihat hasilnya.
Nah itu ia tutorial cara menciptakan dan memasang fitur Show/Hide di widget kolom komentar blogger/blogspot.
Source:
candysweet-aina.blogspot.com/search?q=cara-menyembunyikan-kotak-komentar / candysweet-aina.blogspot.com/search?q=cara-menyembunyikan-kotak-komentar / candysweet-aina.blogspot.com/search?q=cara-menyembunyikan-kotak-komentar / candysweet-aina.blogspot.com/search?q=cara-menyembunyikan-kotak-komentar
Sumber http://addbloggerthemes.blogspot.com
0 Response to "2 Cara Memasang Show/Hide Komentar Blogger - Onclick Event"
Posting Komentar