Cara Membuat Gambar Animasi sebagai Profil Blogger

Langkah yang harus dilakukan untuk membuat profil baru :

1. Login ke Blogger.
2. Amankan template. Klo blom tahu, lihat caranya di sini !
3. Tetap di Edit HTML.
4. KLIK Expand Template Widget.
5. Gunakan Ctrl+F untuk cari KODE seperti di bawah ini :

Kode script:

<a class='profile-link' expr:href='data:userUrl'><data:viewProfileMsg/></a>
</b:if>

6. Copy paste KODE di bawah ini dan letakkan persis di bawahnya :

Kode CSS:

<br/><br/><div align='center' style='width:102px;height:107px;border:2px solid red;background:#666 url(https://sites.google.com/site/gubhugreyotprojects/image-posting/mart-2010/bg_RasterBlackTransV8H8-gubhugreyot.png) repeat; padding:5px;'><a href='http://gubhugreyot.blogspot.com/' title='Tuliskan title di sini !'><img alt='Tuliskan teks di sini !' src='image_profil-animasi.gif' style='height:94px;width:87px;padding:3px;border:2px solid #444; display:block; background:#999;'/></a></div>

Catatan :Gunakan gambar profil berukuran tidak terlalu besar.

7. KLIK Simpan Template.
8. Lihat hasilnya di blog.

Untuk model yang ke dua, silahkan copypaste KODE CSS di bawah ini dan letakkan di atas kode ]]></b:skin> , sedang xHTML-nya diletakkan seperti model yang pertama.

Kode script:

profil{
      float:left;
      border:2px solid red;
      background:#666 url(https://sites.google.com/site/gubhugreyotprojects/image-posting/mart-2010/bg_RasterBlackTransV8H8-gubhugreyot.png) repeat; 
      padding:5px;
      display:block;
}
.profil a{
      text-decoration:none;
      background:transparent;
      height:106px;
      width:99px;
      margin:0;
      display:block; }
.profil img{
      height:96px;
      width:89px;
      padding:3px;
      border:2px solid #444; 
      background:#999;
      display:block;
}
.profil img:hover{
      opacity:0.3;
      filter:alpha(opacity:30);
}
.profil a:hover{
      background:#fff url(https://3288785158770787760-a-1802744773732722657-s-sites.googlegroups.com/site/gubhugreyotprojects/image-posting/mart-2010/LatemBleding-gubhugreyot.gif);

Kode xHTML:

<div class="profil"><a href="http://gubhugreyot.blogspot.com" target="_blank" title="Tuliskan teks title di sini !"><img src="image_profile.gif" /></a></div>

Keterangan/Catatan :

1. Gunakan link image ini untuk bahan percobaan sebagai gambar profil kamu :

Contoh URL gambar profil -->
https://3288785158770787760-a-1802744773732722657-s-sites.googlegroups.com/site/gubhugreyotprojects/image-posting/mart-2010/ManusiaPurba-gubhugreyot.gif

2. Gunakan gambar profil untuk hover dengan ukuran : di bawah 100px x 100px.

3. Selamat berkarya. Sukses selalu untuk anda !!!