Membuat Foto dengan efek Animasi

Dalam kesempatan kali ini akan coba di bahas tentang bagaimana cara membuat animasi gambar ataupun foto. Bagi para sobat (mulai sekarang saya akan membiasakan diri menyebut anda menjadi sobat, biar lebih familier ya) yang sudah terbiasa menggunakan program animasi semisal MacroMedia Flash Player ataupun teman-temannya sudah barang tentu bukan hal yang wah ataupun aneh, tapi bagi sekelompok orang seperti saya ini, membuat animasi foto adalah suatu hal yang sangat sulit sekali.

Adakah diantara para sobat blogger yang seperti saya? jika jawabannya ada ya kita emang senasib (hiduplah senasib), tapi jangan dulu patah semangat sobat blogger, pepatah bilang banyak jalan menuju rhoma (irama).. dalam hal inipun sama ada jalannya yakni kita bisa menggunakan jasa situs-situs pembuat animasi. Di internet buaanyak sekali situs pembuat animasi foto, jumlahnya ribuan atau bahkan jutaan. Nah sebagai contoh yaitu http://www.slide.com. Untuk membuat sebuah foto animasi di slide.com, silahkan ikuti langkah-langkah berikut :
1.    Silahkan buka situs www.slide.com
2.    Langkah pertama yaitu sobat harus daftar dahulu pada situs tersebut
3.    Klik tulisan Sign Up untuk melakukan pendaftaran (daftar gratis)
4.    Masukan alamat email sobat pada kolom yang disediakan. isi juga password yang diinginkan
5.    Jika sudah, silahkan klik tombol sign Up, dan otomatis sobat sudah masuk ke halaman account sobat
6.    Langkah selanjutnya adalah melakukan pembuatan animasi
7.    Klik style, untuk memilih gaya dari animasi
8.    klik skin, untuk memilih bingkai animasi
9.    klik Size untuk memilih ukuran
10.    Klik Tombol Select Image, lalu masukan foto/image yang ingin sobat masukan
11.    klik tombol Upload untuk melakukan proses upload foto
12.    Jika proses upload selesai, klik tombolSave
13.    Copy kode HTML yang di berikan, lalu paste pada program notepad
14.    Klik tulisan Log Out untuk keluar dari situs tersebut. Silahkan tutup halaman browser
15.    Langkah selanjutnya adalah memasukan kode HTML animasi tersebut ke dalam blog sobat.
Contoh Gambar Animasi :
 


Ada satu lagi cara untuk membuat Spoiller (show/Hide). Ikuti Langkah-langkah berikut ini :

LANGKAH 1
·    Login ke Blogger Account Anda, pilih "Layout/Tata Letak" --> edit HTML --> jangan lupa centang "Expand Template Widget"
·    Copy Code Script Berikut ini :
·    Cari ]]></b:skin>, copy script dibawah ini dan letakkan sebelum ]]></b:skin>
.commenthidden {display:none;}
.commentshown {display:inline;}
* Kemudian cari ]]></b:skin> dan masukkan kode berikut diantara ]]></b:skin> dan </head>
<script type='text/Javascript'>function togglecomments (postid) {var whichpost = document.getElementById(postid);if (whichpost.className=="commentshown") {whichpost.className="commenthidden"; } else { whichpost.className="commentshown"; }} </script>
·    Kemudian Save Template....

LANGKAH 2
·    Pilih "Layout/Tata Letak" --> pilih "Add a Gadget", pilihlah "HTML/JavaScript",
·    Kemudian copy Script dibawah ini :
<a aiotitle="click to expand" href="javascript:togglecomments('Nama_Spoiler')"><img src="http://i831.photobucket.com/albums/zz233/qcux80/Logo%20Tukar%20Link/button1.gif" /></a><div class="commenthidden" id="Nama_Spoiler"><br />Ganti Dengan yang Mau di Show/Hide</div><br />

<br />
<div style="text-align: center;"><br />
<span style=" ;font-family:Verdana,Arial,Helvetica,Georgia;font-size:10px;color:red;"><br />
<a href="http://andresahan.blogspot.com/2010/04/membuat-spoiller-2.html">widget by</a> <a href="http://andresahan.blogspot.com/2010/04/membuat-spoiller-2.html">Ruang Blogger</a></span></div>
·    Selesai dan Simpan
Selamat Mencoba....

Buat anda yang suka memajang foto anda di blog enggak ada salahnya anda coba trik kali ini.

Contohnya bisa anda lihat di teman saya silahkan masuk untuk melihat contohnya klik disini

Mau menerapkannya di blog? Silahkan ikuti langkah berikut ini,
Pertama
buatlah gambar dengan ukuran 125x125 (ukuran gambar bisa anda sesuaikan dengan template anda) kalau gambar sudah siap kemudian upload lah gambar yang anda buat tersebut, pingin tau tempat hosting gambar gratis baca juga tempat hosting gambar gratis jika gambar sudah di ambil alamat url gambar anda, simpan dulu di notepad atau wordpad biarkan dulu sekarang kembali lagi ke blogger

>> Login di Blogger
>> Design/Rancangan
>> Edit Html
kemudian cari kode seperti ini : ]]</b:skin> kemudian kode di bawah ini tepat di atas kode ]]</b:skin>

#rdl_image{
position:fixed;
_position:absolute;
bottom:5px;
left:5px;
clip:inherit;
_top:expression(document.documentElement.scrollTop + document.documentElement.clientHeight-this.clientHeihgt);
_left:expression(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);
}

Kemudian cari lagi kode seperti ini <body> copy paste lagi kode di bawah ini tepat di bawah kode <body>

<div id='rdl_image'>
<img src='http://lh4.ggpht.com/_pt7i0nbIOCY/SUywgmXlLWI/AAAAAAAAAmk/J7_3znQLYqo/Doraemon_thumb.gif'/>
</div>

Yang berwarna merah silahkan anda ganti dengan alamat/url gambar anda. Kemudian simpan template anda.

Untuk mengatur template posisi gambar anda bisa mengedit-nya, coba anda perhatikan yang berwarna biru di bawah ini

#rdl_image{
position:fixed;
_position:absolute;
bottom:5px;
left:5px;
clip:inherit;
_top:expression(document.documentElement.scrollTop + document.documentElement.clientHeight-this.clientHeihgt);
_left:expression(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);
}

nah yang berwarna biru itu adalah posisi gambar anda bisa menggantinya menjadi kanan bawah atau atas bawah.

Untuk pojok kanan atas kodenya seperti ini :

top:5px;
right:5px;

Untuk pojok kanan bawah :

bottom:5px;
right:5px;

Pojok kiri bawah :

bottom:5px;
left:5px;

Pojok kiri atas :

top:5px;
left:5px;

Selamat mencoba n semoga bermanfaat...