Membuat Tombol Tampilkan dan Sembunyikan Komentar Dengan Jquery

Membuat Tombol Tampilkan dan Sembunyikan Komentar Dengan Jquery

Bola Hero Gawai

Membuat Tombol Tampilkan dan Sembunyikan Komentar Dengan Jquery

Membuat Tombol Tampilkan dan Sembunyikan Komentar Dengan Jquery


Katou kali ini akan memberikan tutorial yang sudah di uji yaitu tutorial cara membuat tombol untuk menampilkan dan menyembunyikan komentar.

Nanti, jika trik ini sudah berjalan, maka komentar di blog Sobat akan tersembunyi dan hanya akan terbuka jika pengunjung men-klik tombol "Komentar".

Oke, langsung saja ke tutorial-nya.

Silahkan buka blogger dulu (Yaelah, nenek - nenek rocker juga tau :v )

Terus, masuk ke bagian 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, sekarang cari code atau tag div komentar di blog sobat. Contoh code tag div komentar itu seperti ini.


 <div class='comments' id='comments' itemprop='comment' itemscope='itemscope' itemtype='http://schema.org/Comment' style='display: none;'>

Jika sudah ketemu code yang mirip seperti itu, tambahkan code di bawah ini, tepat di atas-nya.


 <div id='flipcmt'><span>Komentar</span></div>

Maka, setelah di tambahkan code-nya akan jadi seperti 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, tepat 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 sobat sudah memiliki Jquery Library berapa pun versinya.

Untuk DEMO silahkan ikuti link di bawah ini.
http://nmaratus.blogspot.com/2015/04/tags-and-styling.html

Terima kasih dan Selamat ber-kreasi :D
Postingan ini dikirim oleh:
Megumi Katou

Saya adalah admin blog megumi-katou.blogspot.com.

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×