Cara Membuat Gambar Animasi Sederhana secara Online | Format GIF

Ingin membuat gambar animasi yang bisa bergerak? Caranya gampang, tidak harus menguasai bahasa program khusus animasi. Kini banyak situs penyedia layanan pembuatan banner animasi online. 

Situs penyedia layanan pembuatan banner animasi online bisa kalian searching di Google. Salah satunya picasion.com.

Cara membuatnya:
1. Siapkan foto atau gambar yang akan dibikin animasi (biasanya 2-3).
2. Buka http://picasion.com
3. Klik ‘browse’ dan arahkan ke file yang sudah kalian simpan di komputer. 
4. Proses yang sama (no 3) untuk foto/gambar selanjutnya.
5. Pilih ‘size’ dan ‘speed’ sesuai selera.
6. Klik ‘create animation’ dan tunggu proses upload.
7. Kopi HTML kodenya, lalu pasang di blog kalian.

Read More

Membuat Arsip blog / Daftar isi dengan fungsi scroll

Jika posting terdahulu saya menguraikan cara menambahkan fungsi scroll pada kategori / lebel, namun pada postingan kali ini saya menguraikan cara membuat Arsip blog / Daftar isi dengan fungsi scroll. Caranya sama persis dan script kode nya pun sama, hanya penempatannya saja yang berbada.
Dibawah ini adalah screenshot pada saat posting ini saya tulis:

Bagi sobat yang ingin menampilkan widgat Arsip / Daftar isi dengan fungsi scroll silahkan ikuti tips ngeblog berikut ini:

1. Login terlebih dahulu mengunakan akun bloger
2. Buatlah Arsip blog dengan menambah Gadget pada sidebar, beri nama dengan "Arsip"  ( bisa diganti sesuai keingian )  pilih gaya hierarki
   
3. Simpan/save. sampai disini anda telah membuat Arsip ( tanpa fungsi scroll ).
4. Utuk menambahkan fungsi scroll pada Arsip Sekarang tuju Tata letak -- -->>Edit HTML.
5. Beri tanda centang pada Expand Template Widgets.
6. Cari Arsip yang sudah di buat tadi, dengan CTRL+F dan ketikkan kata “Arsip”, ( biasanya di pojok kanan bawah ). akan muncul kode hatml seperti di bawah ini:
   
   
   <b:widget id='BlogArchive2' locked='false' title='Arsip' type='BlogArchive'>
   <b:includable id='main'>
   <b:if cond='data:title'>
   <h2><data:title/></h2>
   </b:if>
   <div class='widget-content'>
   <div style='overflow:auto; width:ancho;height:200px;'>
   <div id='ArchiveList'>
   <div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
   <b:if cond='data:style == &quot;HIERARCHY&quot;'>
   <b:include data='data' name='interval'/>
   </b:if>
   <b:if cond='data:style == &quot;FLAT&quot;'>
   <b:include data='data' name='flat'/>
   </b:if>
   <b:if cond='data:style == &quot;MENU&quot;'>
   <b:include data='data' name='menu'/>
   </b:if>
   </div>
   </div></div>
   <b:include name='quickedit'/>
   </div>
   </b:includable>
   
   
   
7. Perhatikan tulisan yang berkedip dan berwarna merah di atas, kode itulah yang harus disisipkan kedalam arsip yang telah dibuat, sedangkan tulisan yang berwarna biru pada height:200px; adalah ukuran tinggi pada fungsi scroll ( ganti angka 200 sesuai dengan keinginan )
8. Intinya jangan cepat menyerah....
9. Simpan template dan lihatlah hasilnya 

Selamat mencoba.....

Read More

Cara Membuat Teks Berjalan Ke atas, ke Bawah dan Kesamping

Tutorial berikut kita akan membahas bagaimana cara membuat teks berjalan, baik itu berjalan dari kiri ke kanan dan sebaliknya serta dari bawah ke atas dan juga sebaliknya. Kode perintah HTML yang digunakan untuk membuat teks berjalan ini adalah MARQUEE dan tanpa bertele-tele yuk kita mulai.




1. Teks berjalan dari Kiri ke Kanan , kodenya adalah :

<MARQUEE align="center" direction="right" height="45" scrollamount="2" width="20%">

marquee dari kiri ke kanan

</MARQUEE>

Kode diatas akan menghasilkan tampilan sebagai berikut:

marquee dari kiri ke kanan

Note: Pada huruf yang berwarna merah dapat anda sesuaikan dengan keinginan, contohnya jika tulisan ingin berjalan dari kanan ke kiri maka di ubah menjadi "left" , ukuran height adalah tinggi dari area tulisan yang bergerak, scrollamount adalah kecepatan teks bergerak.Semua teks yang berwarna merah dapat disesuaikan dengan lebar sidebar blog.

2. Teks berjalan menurut sifat, kodenya adalah :

<MARQUEE align="center" direction="left" height="50" scrollamount="3" width="20%" behavior="alternate">

marquee menurut sifat

</MARQUEE>

Kode diatas akan menghasilkan tampilan sebagai berikut:

marquee menurut sifat

3. Teks berjalan / bergulir keatas, kodenya adalah :

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="20%" height="50" align="center">



<a href="http://www.masbugie.com" target="new">Masbugie.com</a><br />


<a href="http://www.masbugie.com/2010/04/daftar-technorati-yuk.html" target="new">Cara Daftar Technorati</a><br />


<a href="http://www.masbugie.com/2010/03/tips-membuat-orang-tersenyum.html" target="new">Manfaat Senyum</a><br />



</marquee>

Kode diatas akan menghasilkan tampilan sebagai berikut:

Masbugie.com


Cara Daftar Technorati


Manfaat Senyum


Note: Jika Anda menginginkan yang berjalan adalah sebuah image/gambar, maka gantilah semua teks yang berwarna hijau dengan sourch image Anda.

4. Teks berjalan dengan background, kodenya adalah :

<div align="left"> <B><MARQUEE BGCOLOR="RED" width="20%" scrollamount="3" behavior="alternate">

dengan background

</MARQUEE></b> </div>

Kode diatas akan menghasilkan tampilan sebagai berikut:

dengan background

Mudah bukan membuat teks berjalan di blog? Selamat mencoba....salam

kalu mau liat klik disini

Read More