Ucapan Terima Kasih Untuk Komentar Dengan Hover

Ucapan Terima Kasih Untuk Komentar
Sebelumnya saya sudah pernah mempostingan cara membuat pesan komentar yang kita letakan di bawah editor komentar blog. Nah kali ini kita akan membuat pesan komentar atau ucapan terima kasih untuk komentar dengan menambahkan efek hover.


Ucapan terima kasih ini tidak akan tampak sebelum pengunjung atau komentator meng-hover comment-form. Ketika pengunjung atau komentator meng-hover comment-form, maka ucapan terima kasih ini akan muncul di atas editor komentar dengan slide dari kiri ke kanan.


Bagi yang tertarik untuk mencobanya, silahkan copy kode-kode di bawah ini.

Kode CSS


.comment_thanks{background:#4D90F0;color:#fff;padding:5px 8px;position:absolute;right:300px;top:-6px;opacity:0;transition:all .4s ease-in-out;z-index:999;font-size:12px;font-weight:700;border-radius:2px;border:1px solid #3079ED}
.comment-form:hover .comment_thanks{opacity:1;right:0}
.comment_thanks_box{position:relative}

Langkah 1: Silahkan cari kode di bawah ini


<b:includable id='comment-form' var='post'>

Di bawah kode tadi terdapat 2 buah kode seperti di bawah ini


<data:blogTeamBlogMessage/>

Maka simpan kode di bawah ini tepat di atas kode <data:blogTeamBlogMessage/> yang kedua.


<div class='comment_thanks_box'>
<span class='comment_thanks'>Terima Kasih Sudah Berkomentar</span>
</div>

Langkah 2: Kemudian cari juga kode seperti di bawah ini


<b:includable id='threaded-comment-form' var='post'>

Dan silahkan lakukan seperti langkah 1 di atas kemudian SAVE template dan selesai. Sekarang silahkan cek di postingan blog dengan meng-hover area comment-form.

You Might Also Like:

How to style text in Disqus comments:
  • 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 Hide Parser
Disqus Comments