Cara Membuat Tombol Show Hide Komentar Di Blogger




Cara Membuat Tombol Show Hide Komentar Di Blogger
Cara Membuat Tombol Show Hide Komentar Di Blogger : Sudah lama saya tidak membuat artikel, karena jam kerja padat dan tidak ada waktu selama ini untuk blogging. Jadi malam ini saya akan share Cara Membuat Tombol Show Hide Komentar Di Blogge. Mungkin salah satau di antara teman blogger anda yang memilih tampilan blog nya ingin biasa- biasa saja atau simple. khususnya untuk tombol komentar dengan menggunakan show hide komentar. 

Nah dengan kita menggunakan show hide komentar maka halaman postingan menjadi lebih terfokus pada postingan atau conten halaman, Jika blog kita memiliki komentar yang banyak maka halaman komentar tidak akan terlihat. 
Untuk Demo bisa anda lihat video gambar GIF di bawah ini.
Untuk anda yang sudah penasaran, Saya tidak panjang lebar untuk menjelasakannya lagi. Karena pasti di antara kita ada yang suka membaca dan ada juga yang tidak suka membaca, kebayakan mereka yang ingin menerapakan kode-kode Js, css dll pasti akan mengalami kesulitan karena tidak suka membaca, hehe. Namun jika anda yang sudah paham dengan kode-kode untuk peletakannya kedalam template blog anda, maka langsung saja bisa mengikuti langkah-langkah di bawah ini: 

Tombol Show Hide Komentar Di Blogger :

1. Pertama , pastikan anda sudah masuk di dasbhor anda sendiri
2. Kemudian anda masuk pada bagian editor template , caranya pilih Menu Template -> Edit HTML.
3. Temukan kode seperti di bawah ini.
<b:include cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}' data='post' name='comments'/>
4. Jika kode di atas sudah ketemu, maka silahkan anda ganti  saja dengan kode di bawah ini.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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(&quot;comments-box&quot;).style.display=&quot;block&quot;;document.getElementById(&quot;tutup-komen&quot;).style.display=&quot;block&quot;;document.getElementById(&quot;buka-komen&quot;).style.display=&quot;none&quot;' role='button' tabindex='0'>Buka Komentar</div>
<div aria-label='Tutup Komentar' class='tutup-komen' hidden='hidden' id='tutup-komen' onclick='document.getElementById(&quot;comments-box&quot;).style.display=&quot;none&quot;;document.getElementById(&quot;tutup-komen&quot;).style.display=&quot;none&quot;;document.getElementById(&quot;buka-komen&quot;).style.display=&quot;block&quot;' role='button' tabindex='0'>Tutup Komentar</div>
</b:if>
<div id='comments-box'>
        <b:include cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}' data='post' name='comments'/>
          </div>
5. Bila sudah anda ganti kode tersebut, jangan lupa anda klik Save Template dan bisa anda lihat hasilnya.J
Bila anda ingin merubah warna background tombol dan warna tulisannya, maka silahkan anda sesuaikan  saja pada kode background-color:#11589D;color:#fff; seperti di atas yang sudah saya tandai.
Demikian penjelasan singkat pada sore ini, selamat mencoba dan semoga berhasil

Share Google URL Shortener: Get Short URLloading short url

Bila Anda merasa memang artikel-artikel di blog ini bisa bermanfaat, maka Anda bisa membantu memberikan donasi melalui Paypal Dana hasil dari donasi akan digunakan untuk memperpanjang domain mizipedia.com - Terima kasih.



Comment Policy Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments

Peraturan Berkomentar di mizipediacom
1. Berkomentarlah dengan Relevan dan Sopan
2. Jangan Spam
3. Tidak Porn dan Sara
4. Berkomentar dengan link tanpa relevan maka akan otomatis terhapus
5. Semua komentar pasti akan saya baca dan dibalas. Show Emoticon. Klik ==>


Join on this site

with Google Friend Connect