26 Jul 2012

CSS Hack buat komentar Admin tampil beda di Blogger Threaded CommentCSS Hack buat komentar Admin tampil beda di Blogger Threaded Comment

CSS Hack buat komentar Admin tampil beda di Blogger Threaded Comment
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!

25 Jul 2012

Trik membuat Button Reply Comment css3 di Blogger Threaded CommentTrik membuat Button Reply Comment css3 di Blogger Threaded Comment

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.

Trik membuat Icon Blogger Comments berbentuk bulat di Blogger Threaded ComentTrik membuat Icon Blogger Comments berbentuk bulat di Blogger Threaded Coment

Trik membuat Icon Blogger Comments berbentuk bulat di Blogger Threaded Coment
Menampilkan setiap icon pemberi komentar dalam bentuk bulat yang diberi border ternyata membuat tampilan semakin menarik. Dengan menambah sedikit kode css yang diletakkan di atas kode ]]></b:skin>, maka icon di blogger comments yang sebelumnya berbentuk kotak (bujur sangkar) akan terlihat berbeda dengan bentuk barunya. Akan lebih manis jika anda juga menambahkan efek shadow melalui kode css box-shadow property.

Trik merubah icon Author Comment jadi teks berjalan di Blogger Threaded CommentTrik merubah icon Author Comment jadi teks berjalan di Blogger Threaded Comment

Trik merubah icon Author Comment jadi teks berjalan di Blogger Threaded Comment
Blogger hack kali ini mencoba merubah icon blog author yang terletak di kotak komentar (di atas teks komentar author/penulis) yang bertanda "Icon blog author yang digunakan di blogger threaded comment. Icon berukuran 18px x 18px dan digunakan sebagai penanda bahwa si pemberi komentar adalah author atau penulis." menjadi sebuah teks berjalan memanfaatkan kode css3 animation. Efek teks berjalan pada icon blog author blogger threaded comment tak memungkinkan untuk dibuat menggunakan kode html marquee sehingga kita gunakan css3 animation. Fungsinya akan tak berbeda karena dengan css3 animation ini maka teks akan berjalan dari kanan ke kiri dengan kecepatan yang dapat diatur juga.

Ganti Icon Author Comment di Blogger Threaded CommentGanti Icon Author Comment di Blogger Threaded Comment

Ganti Icon Author Comment di Blogger Threaded Comment
Icon blog author di blogger threaded comment berfungsi sebagai penanda bahwa si pembuat komentar adalah author/penulis. Bentuk icon tersebut seperti ini "Icon blog author yang digunakan di blogger threaded comment. Icon berukuran 18px x 18px dan digunakan sebagai penanda bahwa si pemberi komentar adalah author atau penulis.". Icon blog author akan terlihat di kotak komentar, tepatnya di atas teks komentar dan hanya akan muncul ketika komentar dibuat oleh author. Jika melihat icon ini mungkin beberapa orang masih "bingung" dengan maksud symbol tersebut, sehingga mungkin akan lebih menarik dan lebih mudah dipahami jika anda menggantinya dengan icon profil author sesungguhnya. Agar bisa merubah icon ini menjadi icon author, anda harus membuat sebuah icon bergambar profil anda dalam ukuran kecil sebesar 18px s/d 30p (dibatasi maksimal 30px agar tidak terlalu besar).