Cara Membuat Animasi di Blog (Tulisan, Kursor, Banner Bergerak) merupakan ilmu penting bagi seorang blogger, sebab jika kita mampu membuat tulisan bergerak ataupun gambar bergerak di dalam blog maka sama saja kita sudah tahu sedikit tentang animasi dasar dalam menjalankan dan mempercantik tampilan blog kita agar terlihat keren dan menarik. Nah animasi di blog kali ini bukan saja dalam bentuk animasi tulisan, tapi kursor dan banner juga akan kami berikan tutorialnya untuk mempermudah teman-teman dalam mengetahui semua cara buat animasi yang baik dan benar dalam blog.
Sebelum kita bicara jauh tentang Cara Membuat Animasi di Blog (Tulisan, Kursor, Banner Bergerak), maka ada baiknya kita pahami dulu bagaimana dan apa pengertian animasi dalam Wikipedia dan lainnya. Animasi adalah penggabungan beberapa gambar yang disesuaikan dengan alur gerak yang diinginkan mulai dari satu gerakan ke gerakan terakhir yang masing-masing waktunya ditentukan untuk menciptakan gambar yang seakan-akan hidup atau bergerak.
Ada banyak jenis dan cara bikin animasi di blog, untuk itu agar bisa tahu semua cara-caranya ada baiknya mengunjungi satu per satu artikel yang telah saya tulis sebelumnya.
Cara Membuat Animasi di Blog dengan Tulisan Bergerak/Berjalan
1. Buat animasi tulisan berjalan yang disertai link
<div style="background: #FFFFFF; border: 2px solid #ADFF2F; color: black; font-size: 15px; font-weight: bold; letter-spacing: 0.2em; padding: 15px;">
<marquee direction="left" scrollamount="6" align="center"><a href="http://softwaremaniapc.blogspot.com/2013/03/cara-membuat-tulisan-berjalan-di-blog.html"/>Bikin Animasi di Blog</a></marquee>
</div>
Tampilan animasinya :
Silahkan diganti : background: #FFFFFF : untuk backgroundnya, solid #ADFF2F untuk warna garisnya, dan size: 15px untuk ukuran font.
2. Bikin animasi berjalan di blog dengan background
<div style="background: #000000; border: 2px solid #ADFF2F; color: blue; font-size: 15px; font-weight: bold; letter-spacing: 0.5em; padding: 15px;">
<marquee direction="left" scrollamount="6" align="center">Cara membuatTulisanBerjalan di Blog</marquee>
</div>
Tampilan animasinya (Silahkan diganti, tulisan warna merah di atas sesuai dengan yang dimau) :
3. Animasi bergerak di blog dengan tulisan berwarna
<font color="blue"><marquee>Contoh Animasi Berwarna</marquee></font>
Bentuk animasinya :
Keterangan :
4. Animasi tulisan dari bawah ke atas
<marquee direction="up" scrollamount="3" align="center"> Tulisan berjalan dari bawah ke atas</marquee>
Hasil animasinya :
5. Cara membuat animasi di blog dengan tulisan berjalan dari Atas ke Bawah
<marquee direction="down" scrollamount="3" align="center"> Bentuk tulisan dari Atas ke Bawah</marquee>
Tampilan animasinya :
6. Animasi tulisan berjalan dari kanan ke kiri bolak balik di blog
<marquee direction="right" scrollamount="3" align="center" behavior="alternate"> Tulisan Mondar Mandir</marquee>
Hasil animasinya :
7. Animasi di blog dengan tulisan dari kiri ke kanan bolak balik.
<marquee direction="left" scrollamount="3" align="center" behavior="alternate"> Desain Animasi Bolak Balik</marquee>
Bentuk animasinya :
8. Kode animasi di blog dengan tulisan dari kiri ke kanan
<marquee direction="right" scrollamount="3" align="center"> Animasi tulisan dari kiri ke kanan</marquee>
Animasi bergeraknya :
9. Animasi tulisan dari kanan ke kiri
<marquee direction="left" scrollamount="3" align="center"> Animasi dari kanan ke kiri</marquee>
Animasi berjalannya :
Bagaimana cara membuat animasi di blog dengan tulisan bergerak atau berjalan ini? Mudah sekali kan bikinnya? Untuk itu buat teman-teman yang mau mempercanti blognya agar terlihat lebih keren ada baiknya menggunakan trik-trik di atas. Selain lebih responsif juga akan menambah variasi di blogmu. Sebenarnya ada banyak cara untuk memperindah blog kita, tapi biar bagaimana pun indahnya blogmu, kalau tidak bisa masuk halaman pertama Google ya tetap saja tidak ada gunanya, untuk itu silahkan baca artikel ini : Cara Membuat Blog Ranking #1 di Google.
Sebelum kita bicara jauh tentang Cara Membuat Animasi di Blog (Tulisan, Kursor, Banner Bergerak), maka ada baiknya kita pahami dulu bagaimana dan apa pengertian animasi dalam Wikipedia dan lainnya. Animasi adalah penggabungan beberapa gambar yang disesuaikan dengan alur gerak yang diinginkan mulai dari satu gerakan ke gerakan terakhir yang masing-masing waktunya ditentukan untuk menciptakan gambar yang seakan-akan hidup atau bergerak.
 |
| Buat Animasi di blog |
Ada banyak jenis dan cara bikin animasi di blog, untuk itu agar bisa tahu semua cara-caranya ada baiknya mengunjungi satu per satu artikel yang telah saya tulis sebelumnya.
Cara Membuat Animasi di Blog dengan Tulisan Bergerak/Berjalan
Untuk mengcopy semua kode di bawah silahkan klik ini :
1. Buat animasi tulisan berjalan yang disertai link
<div style="background: #FFFFFF; border: 2px solid #ADFF2F; color: black; font-size: 15px; font-weight: bold; letter-spacing: 0.2em; padding: 15px;">
<marquee direction="left" scrollamount="6" align="center"><a href="http://softwaremaniapc.blogspot.com/2013/03/cara-membuat-tulisan-berjalan-di-blog.html"/>Bikin Animasi di Blog</a></marquee>
</div>
Tampilan animasinya :
Silahkan diganti : background: #FFFFFF : untuk backgroundnya, solid #ADFF2F untuk warna garisnya, dan size: 15px untuk ukuran font.
2. Bikin animasi berjalan di blog dengan background
<div style="background: #000000; border: 2px solid #ADFF2F; color: blue; font-size: 15px; font-weight: bold; letter-spacing: 0.5em; padding: 15px;">
<marquee direction="left" scrollamount="6" align="center">Cara membuatTulisanBerjalan di Blog</marquee>
</div>
Tampilan animasinya (Silahkan diganti, tulisan warna merah di atas sesuai dengan yang dimau) :
3. Animasi bergerak di blog dengan tulisan berwarna
<font color="blue"><marquee>Contoh Animasi Berwarna</marquee></font>
Bentuk animasinya :
Keterangan :
4. Animasi tulisan dari bawah ke atas
<marquee direction="up" scrollamount="3" align="center"> Tulisan berjalan dari bawah ke atas</marquee>
Hasil animasinya :
5. Cara membuat animasi di blog dengan tulisan berjalan dari Atas ke Bawah
<marquee direction="down" scrollamount="3" align="center"> Bentuk tulisan dari Atas ke Bawah</marquee>
Tampilan animasinya :
6. Animasi tulisan berjalan dari kanan ke kiri bolak balik di blog
<marquee direction="right" scrollamount="3" align="center" behavior="alternate"> Tulisan Mondar Mandir</marquee>
Hasil animasinya :
7. Animasi di blog dengan tulisan dari kiri ke kanan bolak balik.
<marquee direction="left" scrollamount="3" align="center" behavior="alternate"> Desain Animasi Bolak Balik</marquee>
Bentuk animasinya :
8. Kode animasi di blog dengan tulisan dari kiri ke kanan
<marquee direction="right" scrollamount="3" align="center"> Animasi tulisan dari kiri ke kanan</marquee>
Animasi bergeraknya :
9. Animasi tulisan dari kanan ke kiri
<marquee direction="left" scrollamount="3" align="center"> Animasi dari kanan ke kiri</marquee>
Animasi berjalannya :
Bagaimana cara membuat animasi di blog dengan tulisan bergerak atau berjalan ini? Mudah sekali kan bikinnya? Untuk itu buat teman-teman yang mau mempercanti blognya agar terlihat lebih keren ada baiknya menggunakan trik-trik di atas. Selain lebih responsif juga akan menambah variasi di blogmu. Sebenarnya ada banyak cara untuk memperindah blog kita, tapi biar bagaimana pun indahnya blogmu, kalau tidak bisa masuk halaman pertama Google ya tetap saja tidak ada gunanya, untuk itu silahkan baca artikel ini : Cara Membuat Blog Ranking #1 di Google.