Cara Terbaru Membuat Buka Tutup Komentar Bawaan Blogspot

Sebagian pengguna blogspot tentu nya masih banyak yang menggunakan kotak komentar bawaan dari blogspot tersebut.Dan banyak pula yang menggunakan di luar dari bawaan blog, seperti menggunakan kotak komentar disqus maupun dari kotak komentar facebook. Dan masing - masing mereka pun punya alasan tertentu. Seperti blog saya yang masih menggunakan kotak komentar bawaan blog yang saya rasa sangat simple dan tidak membuat berat blog. Tapi tidak menuntut kemungkinan bila entah kapan atau bila rasa saya sudah bosan mungkin akan berpindah menggunakan kotak komentar di luar dari bawaan blog.

Membahas masalah kotak komentar, kali ini saya ingin berbagi tutorial Cara membuat buka tutup komentar bawaan blogspot meskipun tutorial kali ini jauh dari harapan saya untuk bisa masuk Page One. Karena kalian tau kata kunci untuk tutorial ini sudah mencapai Sekitar 1.350.000 hasil (0,42 detik) . Dan saya pun juga tidak terlalu pandai untuk membuat artikel Super Seo.

Oke sobat blogger saya rasa cukup perbincangan sederhana nya. Dan sekarang kita mulai tutorial nya, simak baik - baik tutorial yang saya berikan di bawah ini.

Cara membuat Buka Tutup Komentar Bawaan Blogspot

Cara nya sangat mudah, kalian cukup copy code di bawah ini dan letakan code tersebut di atas code </style> atau </b:skin> pada template kalian.

.buka-komen,.tutup-komen{font-family:inherit;background-color:#256475;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}

Untuk code CSS di atas silahkan kalian atur lagi margin dan padding nya sesuai dengan lebar bentuk template kalian.

Lalu yang terakhir silahkan kalian cari code seperti di bawah 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>

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

Pokonya kalian cari yang setidak nya hampir sama menyerupai code di atas. Bila kalian menemukan code yang sama misalkan code tersebut waktu kalian cari ada 2 code yang sama, kalian pilih code 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'>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>

Lalu save template kalian bila di rasa sudah yakin. Dan lihat hasil nya. Jangan lupa selalu backup template kalian sebelum memulai tutorial yang saya berikan.

Mungkin itu saja tutorial yang bisa saya bagikan kali ini, bila ada pertanyaan silahkan komentar di bawah. Dan untuk contoh tampilan nya seperti apa kalian bisa lihat kotak komentar buka tutup pada blog ini (kalau belum di ganti). Selamat mencoba!

Share this post