√ Cara Membuat Tombol Buka Tutup Komentar Keren + Gradient Color pada Blog Blogspot - AdityaTekno

Social Items

Cara Membuat Tombol Buka Tutup Komentar Keren + Gradient Color

Cara Terbaru Membuat Tombol Buka Tutup / Show Hide Komentar pada Blog Blogspot dengan Warna Gradasi - Pada postingan kali ini saya akan membagikan tutorial membuat tombol buka tutup komentar blog seperti yang dipake AdityaTekno.com. Widget komentar pada Blog sangat besar manfaatnya, selain untuk melakukan komunikasi ternyata juga dapat meningkatkan performa blog.

Dan satu lagi, blog juga akan terlihat rapi apabila widget komentar disembunyikan. Namun, juga harus ada tombol buka tutupnya. Selain membantu meringankan loading blog cara ini juga bisa memaksimalkan pengunjung saat membaca artikel.

Walau sebenarnya para blogger blogspot masih banyak juga yang menggunakan kotak komentar bawaan dari blog, termasuk saya sendiri. Dan banyak pula yang masih menggunakan komentar di luar bawaan blog, misalnya saja menggunakan kotak komentar disqus, kotak komentar G+ maupun dari kotak komentar facebook. 

Dan mereka pun punya alasan tertentu. Nah, akan tetapi jika penggunaan widget kotak komentar yang bagus saran saya lebih baik menggunakan bawaan Blogger. Selain simpel, juga tidak memberatkan kecepatan loading blog anda. Bukan berarti kotak komentar Disqus, G+ dan Facebook tidak bagus, namun lebih disarankan saja.

Baca Juga: Cara Membuat Komentar Disqus di Blog dengan Tombol Onclick Load

Jika anda penasaran ingin melihat contoh tombol buka tutup komentar, anda bisa mengeceknya langsung tombol komentarnya dibawah. Terlihat rapi dan simpel bukan.

Berikut adalah tutorial cara membuat tombol show hide / buka tutup komentar bawaan blog blogspot.


Cara Terbaru Membuat Tombol Buka Tutup Komentar + Gradient Color pada Blog


Seperti biasa, langkah pertama Buka Dashboard Blogger >> Pilih Menu Tema >> Klik tombol Edit HTML,kemudian copy kode dibawah ini dan letakan diatas kode </style> atau ]]></b:skin>. Kalian pilih salah satu mana yang cocok ditemplate blog anda.
/* CSS Tombol Buka Tutup Komen */
.buka-komen,.tutup-komen{font-family:inherit;background: linear-gradient(to right, #38b3e0, #e53bb2);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:10px 5px 5px 5px;cursor:pointer;}
.buka-komen{display:block;margin-bottom:20px}
#comments-box{display:none}

Code CSS di atas bisa diatur lagi margin dan padding nya sesuai dengan lebar bentuk template anda. Dan untuk kode warna gradasi #38b3e0, #e53bb2  anda juga bisa mengubahnya sesuai warna yang diinginkan.

Baca Juga: Kumpulan Kode Warna HTML Lengkap Beserta Namanya

Langkah terakhir, cari kode seperti dibawah ini
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
          <b:if cond='data:post.showThreadedComments'>
            <b:include data='post' name='comments'/>
          <b:else/>
            <b:include data='post' name='comments'/>
          </b:if>
        </b:if>

Biasanya kode di atas letak nya berada di bawah kode <b:include data='post' name='post'/>

Pokonya anda cari kode yang mirip seperti di atas. Jika anda menemukan kode yang sama, anda pilih kode yang ke dua dan ganti dengan code di bawah ini.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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'>Click to Comment!</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'>Close Comment!</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>

Kemudian simpan Tema. Dan lihat hasilnya.

Demikian tutorial Cara Membuat Tombol Buka Tutup Komentar Keren + Gradient Color pada Blog Blogspot. Semoga bisa bermanfaat bagi anda. Good luck! dan sampai jumpa dipostingan selanjutnya. Salam AdityaTekno.com.

Cara Membuat Tombol Buka Tutup Komentar Keren + Gradient Color pada Blog Blogspot

Cara Membuat Tombol Buka Tutup Komentar Keren + Gradient Color

Cara Terbaru Membuat Tombol Buka Tutup / Show Hide Komentar pada Blog Blogspot dengan Warna Gradasi - Pada postingan kali ini saya akan membagikan tutorial membuat tombol buka tutup komentar blog seperti yang dipake AdityaTekno.com. Widget komentar pada Blog sangat besar manfaatnya, selain untuk melakukan komunikasi ternyata juga dapat meningkatkan performa blog.

Dan satu lagi, blog juga akan terlihat rapi apabila widget komentar disembunyikan. Namun, juga harus ada tombol buka tutupnya. Selain membantu meringankan loading blog cara ini juga bisa memaksimalkan pengunjung saat membaca artikel.

Walau sebenarnya para blogger blogspot masih banyak juga yang menggunakan kotak komentar bawaan dari blog, termasuk saya sendiri. Dan banyak pula yang masih menggunakan komentar di luar bawaan blog, misalnya saja menggunakan kotak komentar disqus, kotak komentar G+ maupun dari kotak komentar facebook. 

Dan mereka pun punya alasan tertentu. Nah, akan tetapi jika penggunaan widget kotak komentar yang bagus saran saya lebih baik menggunakan bawaan Blogger. Selain simpel, juga tidak memberatkan kecepatan loading blog anda. Bukan berarti kotak komentar Disqus, G+ dan Facebook tidak bagus, namun lebih disarankan saja.

Baca Juga: Cara Membuat Komentar Disqus di Blog dengan Tombol Onclick Load

Jika anda penasaran ingin melihat contoh tombol buka tutup komentar, anda bisa mengeceknya langsung tombol komentarnya dibawah. Terlihat rapi dan simpel bukan.

Berikut adalah tutorial cara membuat tombol show hide / buka tutup komentar bawaan blog blogspot.


Cara Terbaru Membuat Tombol Buka Tutup Komentar + Gradient Color pada Blog


Seperti biasa, langkah pertama Buka Dashboard Blogger >> Pilih Menu Tema >> Klik tombol Edit HTML,kemudian copy kode dibawah ini dan letakan diatas kode </style> atau ]]></b:skin>. Kalian pilih salah satu mana yang cocok ditemplate blog anda.
/* CSS Tombol Buka Tutup Komen */
.buka-komen,.tutup-komen{font-family:inherit;background: linear-gradient(to right, #38b3e0, #e53bb2);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:10px 5px 5px 5px;cursor:pointer;}
.buka-komen{display:block;margin-bottom:20px}
#comments-box{display:none}

Code CSS di atas bisa diatur lagi margin dan padding nya sesuai dengan lebar bentuk template anda. Dan untuk kode warna gradasi #38b3e0, #e53bb2  anda juga bisa mengubahnya sesuai warna yang diinginkan.

Baca Juga: Kumpulan Kode Warna HTML Lengkap Beserta Namanya

Langkah terakhir, cari kode seperti dibawah ini
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
          <b:if cond='data:post.showThreadedComments'>
            <b:include data='post' name='comments'/>
          <b:else/>
            <b:include data='post' name='comments'/>
          </b:if>
        </b:if>

Biasanya kode di atas letak nya berada di bawah kode <b:include data='post' name='post'/>

Pokonya anda cari kode yang mirip seperti di atas. Jika anda menemukan kode yang sama, anda pilih kode yang ke dua dan ganti dengan code di bawah ini.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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'>Click to Comment!</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'>Close Comment!</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>

Kemudian simpan Tema. Dan lihat hasilnya.

Demikian tutorial Cara Membuat Tombol Buka Tutup Komentar Keren + Gradient Color pada Blog Blogspot. Semoga bisa bermanfaat bagi anda. Good luck! dan sampai jumpa dipostingan selanjutnya. Salam AdityaTekno.com.
Load Comments

Dapatkan Artikel Tips AdSense, Blogging, SEO setiap harinya.

Notifications

Disqus Logo