Trik membuat Button Reply Comment css3 di Blogger Threaded Comment

Button replay comment css3 untuk blogger threaded comment bukan sekedar button replay comment biasa karena button replay comment ini akan memperlihatkan animasi perubahan warna background dan warna teks ketka cursor diarahkan di atasnya. Untuk mendapatkan efek animasi pada button replay digunakan property css3 transition yang memungkinkan terjadinya transisi perubahan warna, background serta background position. Agar button reply comment terlihat lebih menarik, sebuah background image gradasi yang transparan dengan format file png kita manfaatkan.

1. Cara membuat.
   • Login ke Blogger
   • Template
   • Backup/Restore Template.
   • Edit HTML
   • Procced (Lanjutkan)
   • Cari Kode : ]]></b:skin>
   • Gunakan Ctrl + F untuk mempermudah & mempercepat pencarian.
   • Copy dan paste-kan kode css di atas kode ]]></b:skin>
   • Simpan Template/Save Template

Kode CSS

.comments .continue a,.comment-block .comment-actions a,.comment-block .comment-actions .item-control.blog-admin a{
      font-family:Verdana;
      font-size:10px;
      text-transform:uppercase;
      padding:1px 10px !important;
      margin-right:10px;
      font-weight:normal;
      text-decoration:underline !important;
      display:inline-block; 
      border:1px solid rgba(0,0,0,.3);
      color:#900 !important;
      text-align:center;
      text-shadow:-1px -1px 1px #eee;
      border-radius:3px;
      background:#ddd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnteR8O3ryGx9VuFxR1aNoW1pLTRR27mosmbbU59bxGhuspbL-LaAVfjnZTdBT3JxkymkTxPZpGv_Y_T410Ei6pNEPcQAaDRu-azHGV40T9NiQqSzbnFFWfSpC0NVjm96PL73uSQT8mvM/h120/GR_blue-fade-2x40.png) top repeat-x;      
      transition:0.6s linear;
      -o-transition:0.6s linear;
      -ms-transition:0.6s linear;
      -moz-transition:0.6s linear;
      -webkit-transition:0.6s linear;
}
.comments .continue a:hover,.comment-block .comment-actions a:hover,.comment-block .comment-actions .item-control.blog-admin a:hover{
      text-decoration:blink !important;  
      color:#fff !important;
      text-shadow:-1px -1px 1px #000;
      background:red url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnteR8O3ryGx9VuFxR1aNoW1pLTRR27mosmbbU59bxGhuspbL-LaAVfjnZTdBT3JxkymkTxPZpGv_Y_T410Ei6pNEPcQAaDRu-azHGV40T9NiQqSzbnFFWfSpC0NVjm96PL73uSQT8mvM/h120/GR_blue-fade-2x40.png) bottom repeat-x;
}

Contoh posisi kode css terhadap ]]></b:skin>

Kode

.comments .continue a,.comment-block .comment-actions a,.comment-block .comment-actions .item-control.blog-admin a{
      font-family:Verdana;
      ....
      .... dst
}
.comments .continue a:hover,.comment-block .comment-actions a:hover,.comment-block .comment-actions .item-control.blog-admin a:hover{
      text-decoration:blink !important;  
      ... dst
}
]]></b:skin>