CSS Only: Highlight Author Comment Blogger's New Threaded Comments

Setelah beberapa waktu berkutat dengan keruwetan "Bloggers New Threaded Comments", akhirnya ketemu juga sebuah solusi untuk membuat warna background berbeda pada Author Comment di sistem Threaded Comments Blogger yang baru. Jika pada beberapa tutorial yang kini banyak dipostingkan oleh blogger sejagad dibuat menggunakan jQuery (jQuery Highlight Author Comment Blogger's Threaded Comments - dibuat oleh blogger India?), melalui gubhugreyot "Tutorial Blogger | gubhugreyot ini kita akan membuatnya hanya menggunakan kode CSS.

Menggunakan kode CSS untuk membuat "Highlight Author Comment Blogger's New Threaded Comments" tak hanya sekedar untuk membuat warna background berbeda pada author comment. Dengan menggabungkan sebuah image (background image) dapat juga ditampilkan "kata Admin" atau berbagai teks lain seperti misalnya "tanda tangan author", baik dalam bentuk teks ataupun image (melalui background image). Bahkan kode css ini masih bisa dikembangkan lagi dengan menggabungkan css2 dan css3 untuk menciptakan beberapa bentuk animasi melalui hover effect. Satu hal nyata yang membuat penggunaan kode css mempunyai nilai lebih atau keunggulan dibandingkan jika menggunakan jQuery adalah pada pembebanan loading blog. jQuery akan menambah beban blog jauh lebih besar dibandingkan kode css. Diluar hal tersebut "mengembangkan penggunaan kode CSS akan jauh lebih mudah dilakukan siapapun dibandingkan javascript". Dari pertimbangan di atas, kini menjadi hak anda untuk menentukan dan memilih di antara keduanya. Mo pakai jQuery atau yang hanya menggunakan kode CSS?!

Jika anda ingin melihat hasilnya, silahkan coba berikan komentar di posting ini dan untuk selanjutnya akan kita berikan tanggapan komentar agar anda bisa melihat seperti apakah tampilan "Highlight Author Comment Blogger's New Threaded Comments" yang dibuat hanya dengan kode css.

Pada posting pertama yang membahas tentang "membuat background berbeda pada author comment" ini tak akan melibatkan kode css3 karena beberapa blogger lebih menyukai tampilan minimalis.

Kode CSS (icon-blog-author):

.comment-block{
      position:relative;
      padding:8px; /* original code by: http://gubhugreyot.blogspot.com */
      border:1px solid #ddd;
      border-radius:4px;
}
.comment-block:hover{
      background:#e9e9e9;
      border:1px solid #999;
      box-shadow:4px 4px 4px #444;   
}
.comment-block .icon.blog-author{
      position:absolute;        
      right:0; /* original code by: http://gubhugreyot.blogspot.com */
      bottom:0;
      opacity:0.2;
      filter:alpha(opacity=20);
      background-color:lightblue;
      background-position:bottom right;
      width:100% !important;
      height:100% !important;
      margin:0 !important;
}
.comment-block:hover .icon.blog-author{
      background-color:transparent;
      width:20px !important;
      height:20px !important;
      opacity:1.0;
      filter:alpha(opacity=100);
}

Kode CSS (opacity effect):

.comment-block{
      position:relative;
      padding:8px; /* original code by: http://gubhugreyot.blogspot.com */
      border:1px solid #ddd;
      border-radius:4px;
}
.comment-block:hover{
      background:#e9e9e9;
      border:1px solid #eee;
      box-shadow:4px 4px 4px #444;   
}
.comment-block .icon.blog-author{
      position:absolute;        
      right:0; /* original code by: http://gubhugreyot.blogspot.com */
      bottom:0;
      opacity:0.2;
      filter:alpha(opacity=20);
      background:lightblue !important;
      width:100% !important;
      height:100% !important;
      margin:0 !important;
}
.comment-block:hover .icon.blog-author{
      background:none !important;
      z-index:-1;
}

Kode CSS (background rgba):

.comment-block{
      position:relative;
      padding:8px; /* original code by: http://gubhugreyot.blogspot.com */
      border:1px solid #ddd;
      border-radius:4px;
}
.comment-block:hover{
      background:rgba(174,174,174,0.2);
      border:1px solid #eee;
      box-shadow:4px 4px 4px #444;
}
.comment-block .icon.blog-author{
      position:absolute;
      right:0; /* original code by: http://gubhugreyot.blogspot.com */
      bottom:0;
      background:rgba(174,212,251,0.2) !important;
      width:100% !important;
      height:100% !important;
      margin:0 !important;
}
.comment-block:hover .icon.blog-author{
      background:none !important;
      z-index:-1;
}

Cara menggunakan kode css highlight Author Comment :

1. Login ke Blogger.
   
   • Tuliskan "User Name" (gmail) atau tuliskan "Email Address" (non gmail).
   • Tuliskan Password.
   • Klik "Sign in"
2. Beberapa saat setelah klik sign in anda akan menjumpai halaman "Dasbor (Dasboard)".
   Klik "Rancangan (Design)".
3. Kembali halaman baru akan terbuka, klik "Edit HTML".
4. Sebuah halaman baru kembali kita jumpai. Halaman ini berisi 3 (tiga) bagian:
   
   • Backup/Restore Template » berisi fitur untuk melakukan backup template.
     Lakukan Backup template setiap kali akan melakukan penambahan atau pengurangan kode (xHTML, kode CSS dan javascript).
   • Edit Template » berisi sebuah box besar yang di dalamnya berisikan kode html penyusun blog.
   • Old Templates » berisi template lama blogger (Template Tata Letak & Template Klasik.
5. Cari kode ]]></b:skin>.
6. Copy kode css dan letakkan di atas ]]></b:skin>
   Keterangan :
   Pilih salah satu kode css. Anda bisa gunakan yang menggunakan css icon-blog-author, css opacity effect atau css background rgba.
7. Klik "Simpan Template (Save Template)".
8. Buka blog dan coba hasilnya dengan membuat komentar.

Catatan/Keterangan :

1. Highlight Author Comment hanya digunakan pada template/blog yang sudah menggunakan system Threaded Comments.
2. Lakukan perubahan pada background jika diperlukan.
3. Bagi yang ingin merubah blog atau template menjadi threaded comments silahkan buka panduannya melalui link di bawah ini :
   Cara membuat blog menjadi Threaded Comments
4. Untuk menampilkan "Admin" dan/atau tanfa tangan Author di Author Comment silahkan ikuti panduan berikut:
   Menampilkan Admin dan tanda tangan Author di Author Comment
5. Panduan cara Backup Template, Cara cari kode dan berbagai cara menyimpan kode CSS dapat dibuka di Special Tutorials. Lihat di menu sebelah kiri halaman.

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini:

Posting » Setu LEGI, April, 07, 2012

» Happy Blogging - gubhugreyot «