Trik membuat Button Reply Comment css3 di Blogger Threaded CommentClick here to get more tutorials!

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.

Kode CSS

Amda bisa melihatnya di kotak komentar. Silahkan gulung halaman hingga ujung terbawah!

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/AVvXsEgvgxiLGct1M-RkJ_r_cv_dfcjGv3LpfnpIViOdurcbH8P-yazaY7ShVJFMscVr7DPbDNrnnnZMfRHarGD_JPGhrmFPwfl3C5JKZBjuRlN68QxDslLu2WDH_SNhyphenhyphenMNkmMdApe50UaJp_X0/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/AVvXsEgvgxiLGct1M-RkJ_r_cv_dfcjGv3LpfnpIViOdurcbH8P-yazaY7ShVJFMscVr7DPbDNrnnnZMfRHarGD_JPGhrmFPwfl3C5JKZBjuRlN68QxDslLu2WDH_SNhyphenhyphenMNkmMdApe50UaJp_X0/h120/GR_blue-fade-2x40.png) bottom repeat-x;
}

Cara membuat

1. Login ke BloggerAnda bisa klik disini untuk login ke blogger!
2. Template
3. Backup/Restore Template. Panduannya bisa dibuka disiniKlik untuk mengikuti panduan cara melakukan backup/restore template.
4. Edit HTML
   

   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
5. Selesai...
6. Buka blog di halaman posting, kemudian buat sebuah komentar untuk melihat hasilnya.

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

.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>