CSS Hack buat komentar Admin tampil beda di Blogger Threaded CommentClick here to get more tutorials!

Klik untuk perbesar gambar!Hanya dengan kode css! Trik yang sama sekali berbeda dengan apa yang selama ini anda jumpai diberbagai tutorial (berbahasa Inggris atau Indonesia). Blogger hack kali ini akan mengetengahkan sebuah trik memanfaatkan sedikit celah yang ada dalam kode html blogger di New Blogger Threaded Comment. Anda hanya perlu menambah beberapa kode css. Ya... hanya kode css dan sama sekali tak ada secuilpun javascript. Sangat aman untuk loading blog!
Cara membuat tampilan berbeda pada author comment memang dikenal dengan dua cara:

• Menggungkan javascript:
  Trik ini dengan mudah akan anda jumpai karena hampir semua tutorial untuk membuat komentar admin berbeda sudah mengupasnya secara tuntas. Semua tutorial memanfaatkan jQuery untuk membuat sebuah background baru untuk komentar author/admin. Background yang berbeda dengan komentar pengunjung ini juga disertai border yang style dan warna serta ukuran tebalnya bisa dirubah.
• Menggunakan kode css:
  Trik yang belum banyak digunakan dan sementara ini tutorialnya hanya ada di gubhugreyot. Sebuah trik yang teramat sederhana dengan mengekplorasi kemampuan kode css serta celah yang ada. Bagi anda yang blognya tidak/belum menggunakan jQuery, akan lebih menguntungkan jika menggunakan trik ini. Anda tak perlu menggunakan jQuery hanya sekedar untuk background komentar admin!

D E M O

Lihat di kotak komentar (di bawah posting)!

Kode CSS

.comments .comment-block{
      position:relative;
      padding:5px 10px !important;
      background:#eee url(http://www.blogblog.com/1kt/ethereal/bird-2toned-blue-fade.png) top left repeat-x;
      border:1px solid rgba(178,178,178,.2);
      border-radius:5px;
}
.comments .comment-block .icon.blog-author{
      position:absolute;
      right:-1px; /* code by - http://gubhugreyot.blogspot.com - 25 Juli 2012*/
      bottom:2px;
      display:block;
      width:100%;
      height:100%;
      border:1px solid rgba(178,178,178,.4);
      border-radius:5px;
      background-color:rgba(178,178,178,.2);
      background-position:95% 5px;
      transition:opacity 2s ease-out,background-position 1s linear;
      -o-transition:opacity 2s ease-out,background-position 1s linear;
      -ms-transition:opacity 2s ease-out,background-position 1s linear;
      -moz-transition:opacity 2s ease-out,background-position 1s linear;
      -webkit-transition:opacity 2s ease-out,background-position 1s linear;
}
.comments .comment-block:hover{
      background:rgba(178,178,178,.2);
}
.comments .comment-block:hover .icon.blog-author{
      width:20px; /* code by - http://gubhugreyot.blogspot.com - 25 Juli 2012*/
      height:20px;
      background-color:transparent;
      background-position:bottom right;  
      border:1px solid transparent;
      opacity:0.6;
      filter:alpha(opacity=60);
}

Cara menggunakan kode css

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 .comment-block{
      position:relative;
      ...
      ... dst
}
.comments .comment-block .icon.blog-author{
      position:absolute;
      right:-1px;
      ...
      ... dst
}
.comments .comment-block:hover{
      background:rgba(178,178,178,.2);
}
.comments .comment-block:hover .icon.blog-author{
      width:20px; /* code by - http://gubhugreyot.blogspot.com - 25 Juli 2012*/
      ...
      ... dst
}

]]></b:skin>