Menampilkan Avatar (Thumbnail) di Depan Post Author

Jika sebelumnya telah terpostingkan Cara Menampilkan Photo Blogger melalui Post Author yang terletak di bawah judul posting, dalam posting :
Memanfaatkan Post Author untuk Menampilkan Photo Blogger/Image dengan Animasi Menggunakan CSS3
maka kali ini kita akan mencoba menampilkan avatar atau thumbnail yang berupa photo blogger dalam ukuran yang amat kecil sebagai penghias post author yang terletak di bawah posting atau di atas kolom komentar. Photo dalam sekitar 15px x 20px (width x height) akan kita letakkan tepat di depan post author dalam bentuk seperti gambar di bawah (perhatikan tanda panah!):

Untuk membuat tampilan avatar lebih menarik, kembali kita akan manfaatkan kode CSS3 yang berupa CSS3 transition dan CSS3 transformation untuk membentuk sebuah animasi serta merubah ukuran avatar ketika mouse/cursor berada/disentuhkan pada avatar tersebut. Dengan kode CSS3 ini, maka apabila pengunjung membuka blog dengan browser yang support terhadap CSS3 (Mozzila 4 Beta, Opera 10.63, Safari dan Google Chrome) sebuah penampilan yang semakin berbeda dan lebih atraktif akan terlihat.

Jika sampeyan masih penasaran untuk melihat wujud nyata dari desain menarik ini (tidak hanya berupa gambar tetapi yang telah diaplikasikan dalam blog), silahkan klik link berikut dan Lihat di atas kolom komentar!:

D E M O

Cara Membuat

• Login ke blogger.
• KLIK "Design/Rancangan".
• KLIK "Edit HTML".
• Lakukan Back-up Templates. Untuk mengetahui cara back-up templates, silahkan buka Special Tutorials di menu sebelah kiri.
• KLIK "Expand Widget Templates".
• Cari kode ]]></b:skin> kemudian copy-paste kode CSS tepat di atasnya.
• Cari kode <span class='post-author vcard'> .
• Letakkan xHTML tepat di bawahnya.
• KLIK "SAVE Templates/Simpan Template.
• Buka blog dan lihat hasilnya!

Kode CSS

.posting-author {
      width:15px;
      height:19px;
      float:left;
      background:url(https://sites.google.com/site/gubhugreyot/images/AvatarGR.png) left center no-repeat;
      display:block;
      margin:0;
      margin-right:8px;
      border:1px solid #555;
      border-radius:2px;
      -moz-border-radius:2px;
      -webkit-border-radius:2px;
      -o-transition:all 1s ease-in;
      -moz-transition:all 1s ease-in;
      -webkit-transition:all 1s ease-in;
}
.posting-author:hover{
      -o-transform:scale(2) rotate(-10deg);
      -moz-transform:scale(2) rotate(-10deg);
      -webkit-transform:scale(2) rotate(-10deg);
}

]]></b:skin>

xHTML

Kode HTML yang digunakan adalah: <span class='posting-author'></span>


Cara menyimpannya seperti berikut ini:

<span class='post-author vcard'>

<span class='posting-author'></span>

Catatan/Keterangan:

Avatar dibuat dengan ukuran width=15px, height=19px. Jika gambar sudah dibuat segera upload difile hosting dan gunakan URL gambar tersebut untuk menggantikan URL pada kode CSS yang berfungsi sebagai background image.

Background pada kode CSS yang harus diganti supaya photo sampeyan yang terlihat adalah :

https://sites.google.com/site/gubhugreyot/images/AvatarGR.png

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

• 
• 

» Happy Blogging - gubhugreyot «