Search here

Type a word related to the post, then click the search button !

Memuat...
English
Bru masuk angin!

Arsip...

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

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!:

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 «


2 komentar:

 
GR | Edited by | gubhug reyot