Cara Membuat Gambar Animasi sebagai Profil Blogger

Panduan BloGGeR dan Tutorial BloGGeR Animasi :

Bagaimana menampilkan sebuah inovasi baru yang oleh Blogger tidak disediakan fasilitasnya merupakan sebuah tantangan dan keasyikan tersendiri. Upaya ini adalah sebuah ungkapan kepedulian dan usaha untuk memperkaya penampilan Blogger sehingga diharapkan mampu semakin meningkatkan daya saing dan popularitas. Sebuah hal yang sederhana sebenarnya, akan tetapi semoga dapat kita nikmati sebagai sebuah imajinasi yang dapat semakin menambah keindahan dan sekaligus "keanehan" bagi pembaca blog. Bagaimana sebenarnya bentuk Profil animasi ini ? Ya..., demo memang sangat perlu karena acapkali kita kecewa dengan bentuk tutorial yang "muluk" tapi tanpa bisa kita saksikan bentuk sebenarnya. Ya .. karena kadang-kadang juga setelah kita dengan amat telaten dan "lelah" mencoba tutorial yang diberikan, eee .... ternyata
sama sekali nggak bisa kita gunakan untuk template kita. Kecewa !! Benar-benar membuat kecewa plus "emulsi". Ketika saat ini demo yang kuberikan hanya dalam bentuk "simulasi", bukan berarti aku ingin membuat kecewa juga. Kurasa kalian juga harus maklum bila setiap saat harus menggunakan demo kadang-kadang menjadi problem tersendiri juga. Bukankan jika semua harus melalui demo blog jadi super "berjejalan" yang buat loading jadi "lemot" ?! Percayalah ... Semua yang aku sampaikan ini sudah aku coba di blog tersendiri yang biasa aku buat nyoba. Hasilnya ?! So ... menarik pokoknya !

Klo mo lihat bentuk akhirnya kira-kira seperti ini :

Mengenai Saya


Lihat profil lengkapku

Ini adalah contoh model yang pertama. Untuk model yang kedua lebih menarik lagi karena menggunakan efek opacity dan efek hover, sehingga ketika mouse berada di atas gambar profil maka akan muncul dua buah gambar profil. Satu gambar sebagai background dan gambar yang lain merupakan gambar baru.

Langkah yang harus dilakukan untuk membuat profil baru :

1. Login ke Blogger.
2. Amankan template. 

3. Tetap di Edit HTML.
4. KLIK Expand Template Widget.
5. Gunakan Ctrl+F untuk cari KODE seperti di bawah ini :

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

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

.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);
}

xHTML

<br/><br/>
<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 !!!