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

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

gubhugreyot
Lihat profil lengkapku

Hua ... Ha .. Ha.. U...huk

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

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

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:

  1. ko gambarnya ga muncul om?
    caranya gimana supaya pengen ganti gambar ga ngerti saya

    BalasHapus

 
GR | Edited by | gubhug reyot