Membuat Tombol Tampilkan Dan Sembunyikan Komentar Dengan Jquery
Katou kali ini akan memperlihatkan tutorial yang sudah di uji yaitu tutorial cara menciptakan tombol untuk menampilkan dan menyembunyikan komentar.
Nanti, kalau trik ini sudah berjalan, maka komentar di blog Sobat akan tersembunyi dan hanya akan terbuka kalau pengunjung men-klik tombol "Komentar".
Oke, eksklusif saja ke tutorial-nya.
Silahkan buka blogger dulu (Yaelah, nenek - nenek rocker juga tau :v )
Terus, masuk ke bab EDIT HTML dan tambahkan code berikut di dalam CSS Comment Sobat.
Jika sudah, kini cari code atau tag div komentar di blog sobat. Contoh code tag div komentar itu menyerupai ini.
Jika sudah ketemu code yang menyerupai mirip itu, tambahkan code di bawah ini, sempurna di atas-nya.
Maka, sesudah di tambahkan code-nya akan jadi menyerupai ini.
Terakhir, tambahkan code Javascript di bawah ini, sempurna di atas code
Selesai, Sekarang Save template Sobat dan lihat hasilnya. Namun harap dipastikan bahwa blog teman sudah mempunyai Jquery Library berapa pun versinya.
Untuk DEMO silahkan ikuti link di bawah ini.
https://komporajaibku.blogspot.com//search?q=tags-and-styling
Terima kasih dan Selamat ber-kreasi :D Sumber https://www.kompiajaib.com/
Nanti, kalau trik ini sudah berjalan, maka komentar di blog Sobat akan tersembunyi dan hanya akan terbuka kalau pengunjung men-klik tombol "Komentar".
Oke, eksklusif saja ke tutorial-nya.
Silahkan buka blogger dulu (Yaelah, nenek - nenek rocker juga tau :v )
Terus, masuk ke bab EDIT HTML dan tambahkan code berikut di dalam CSS Comment Sobat.
#flipcmt{color:#999;font-size:20px;line-height:normal;margin-bottom:0;text-align:center;text-transform:uppercase;background:#fff;cursor:pointer;padding:10px 0;margin:15px 0;border:1px solid #d9d9d9;}
#flipcmt:hover,#flipcmt:focus {background:#fcfcfc;}
#comments {display:none;}
Jika sudah, kini cari code atau tag div komentar di blog sobat. Contoh code tag div komentar itu menyerupai ini.
<div class='comments' id='comments' itemprop='comment' itemscope='itemscope' itemtype='http://schema.org/Comment' style='display: none;'>
Jika sudah ketemu code yang menyerupai mirip itu, tambahkan code di bawah ini, sempurna di atas-nya.
<div id='flipcmt'><span>Komentar</span></div>
Maka, sesudah di tambahkan code-nya akan jadi menyerupai ini.
<div id='flipcmt'><span>Komentar</span></div>
<div class='comments' id='comments' itemprop='comment' itemscope='itemscope' itemtype='http://schema.org/Comment' style='display: none;'>
Terakhir, tambahkan code Javascript di bawah ini, sempurna di atas code
</body>
<script type='text/javascript'>
//<![CDATA[
//Comments Show
$("#flipcmt").click(function(){
$("#comments").slideToggle("fast");
});
//]]>
</script>
Selesai, Sekarang Save template Sobat dan lihat hasilnya. Namun harap dipastikan bahwa blog teman sudah mempunyai Jquery Library berapa pun versinya.
Untuk DEMO silahkan ikuti link di bawah ini.
https://komporajaibku.blogspot.com//search?q=tags-and-styling
Terima kasih dan Selamat ber-kreasi :D Sumber https://www.kompiajaib.com/
0 Response to "Membuat Tombol Tampilkan Dan Sembunyikan Komentar Dengan Jquery"
Posting Komentar