✔ Cara Menciptakan Tombol Buka Tutup Komentar Yang Benar Pada Blog

Cara menciptakan tombol buka tutup komentar yang benar pada blog - Hallo sahabat blogger, apa kabar? Semoga selalu sehat dan di lancarkan rezekinya. Sesuai dengan judul artikel kali ini bloggerkampung.com akan memperlihatkan sebuah tutorial Cara menciptakan tombol buka tutup komentar yang benar pada blog, biar dapat bermanfaat bagi sahabat blogger semuanya.

Tombol komentar atau widget komentar pada sebuah blog mempunyai banyak manfaat, selain untuk komunikasi antar pengguna dan admin blog, widget komentar juga menghipnotis performa blog. Seperti widget komentar pada blog ini yang dahulu, aku memakai 3 jenis komentar ialah Disqus, Blogger dan Facebook, dengan kolom komentar menyerupai itu pastinya akan menghipnotis performa blog jadi lambat apalagi jikalau yang komentar ada banyak, kemudian aku mencoba untuk menciptakan tombol komentar tersebut menjadi buka tutup menyerupai kini ini, balasannya blog aku menjadi lebih ringan dan cepat loadingnya.

Bagi sahabat yang ingin memakai cara ini, dapat ikuti tutorial aku di bawah ini, tetapi aku sarankan bagi sahabat yang hanya memakai widget komentar bawaan template atau hanya kolom komentar blogger mending tidak usah di buat buka tutup, sebab widget komentar menyerupai itu tidak terlalu menghipnotis blog. Oke pribadi saja ke tutorialnya berikut

Cara menciptakan tombol buka tutup komentar yang benar pada blog

1. Langkah pertama untuk menciptakan tombol buka tutup komentar, kalian cari arahan menyerupai di bawah ini pada template blogger yang ingin di rubah widget komentarnya

<b:include cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}' data='post' name='comments'/>

2. Jika arahan sudah ketemu, kalian ganti dengan arahan 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>

3. Setelah kalian ganti arahan nya, kemudian simpan templatenya, dan coba cek hasilnya. Tulisan yang sudah aku blog diatas, merupakan arahan warna font dan background dari tombol buka tutup komentarnya, buat kalian yang kurang suka dengan warna nya dapat kalian ganti sesuka hati kalian.

Itulah Cara menciptakan tombol buka tutup komentar yang benar pada blog semoga dapat bermanfaat bagi sahabat blogger semuanya.
Sumber http://www.bloggerkampung.com

Share this post

Berlangganan update artikel terbaru via email: