Cara Membuat Animasi Berjalan Di Bagian Bawah Blog

 Cara Membuat Animasi Berjalan Di Bagian Bawah Blog - Hai sobat, Selamat berkunjung kembali ke blog KUCOPAS ini. Kali ini saya akan share artikel tips dan trik tutorial blog tentang Cara Membuat Animasi Berjalan Di Blog atau Cara Membuat Animasi Berjalan Di Bagian Bawah Blog.

 Pada posting sebelumnya saya sudah share artikel tentang Cara Buat Foto dan Gambar Bergerak di Blog atau Cara Membuat Gallery Foto Gambar Image Bergerak Atau Berjalan Di Blog, Silahkan sobat klik DISINI jika ingin melihat cara membuatnya.

 Kita kembali lagi pada pokok bahasan, Pernahkah sobat pada suatu saat mengunjungi blog milik orang lain dan sobat melihat ke bawah ada sebuah animasi atau gambar yang bergerak ke kiri lalu ke kanan ataupun sebailknya?

 Dari pada sobat hanya heran dan bingung ataupun penasaran, Sekarang sobat bisa melihat langsung contohnya yang berada di bawah blog DEMO KUCOPAS atau klik DISINI.

 Jika sobat tertarik dan ingin membuat dan memasangnya pada blog sobat, Saya punya tips dan triknya untuk membuat animasi berjalan seperti itu. Cara membuat dan memasangnya di blog sangatlah mudah, Karena sobat hanya memasang kode pada widget blog dan tidak perlu susah-susah edit HTML dalam template blog sobat. Dan tentunya hal itu sangatlah rumit di lakukan oleh para blogger pemula atau newbie seperti saya ini.

DEMO

 Silahkan sobat ikuti langkah-langkahnya untuk membuat Foto dan Gambar Bergerak di Blog atau Cara Membuat Animasi Berjalan Di Bagian Bawah Blog adalah sebagai berikut ini:

1. Silahkan sobat >> "Masuk atau Login" ke blogger.com menggunakan akun sobat.

2. Pada Dashboard tampilan blogger baru, Pilih Menu >> Tata Letak >> Tambah Gadget >> HTML/Javascript. Jangan di beri judul.

3. Kemudian silahkan sobat masukkan Kode Script di bawah ini ke dalam kotak Konten HTML/Javascript. Pilih salah satu kode saja yang sobat sukai.

---

1. Animasi Zombie Berjalan Loncat-Loncat

<div id="DADrun" style="bottom: 0px; left: 0px; position: fixed; right: 0px;"><marquee behavior="left" scrollamount="7">
<a href="http://kuc0pas.blogspot.com/2012/03/cara-buat-animasi-berjalan-di-blog-cara.html" target="_blank"><img border="0" src="http://i1093.photobucket.com/albums/i440/putraeka1/th_avatar2088630_11.gif?t=1295005006" style="cursor: pointer;" /></a></marquee></div>

2. Animasi Alien Berjalan

<div id="DADrun" style="bottom: 0px; left: 0px; position: fixed; right: 0px;"><marquee behavior="left" scrollamount="7">
<a href="http://kuc0pas.blogspot.com/2012/03/cara-buat-animasi-berjalan-di-blog-cara.html" target="_blank"><img border="0" src="http://i1217.photobucket.com/albums/dd384/TauFixers/MyIcon.png?t=1303003796" style="cursor: pointer;" /></a></marquee></div>

3. Animasi Naruto Berjalan Berubah-ubah

<div id="DADrun" style="bottom: 0px; left: 0px; position: fixed; right: 0px;"><marquee direction="right" behavior="left" scrollamount="7">

<a href="http://kuc0pas.blogspot.com/2012/03/cara-buat-animasi-berjalan-di-blog-cara.html" target="_blank"><img border="0" src="http://i446.photobucket.com/albums/qq182/kisot06/Naruto1%20gif/NarutoShippuudden.gif" style="cursor: pointer;" /></a></marquee></div>

4. Animasi Kiba Akamaru Naik Hewan Berlari

<div id="DADrun" style="bottom: 0px; left: 0px; position: fixed; right: 0px;"><marquee direction="right" behavior="left" scrollamount="7">

<a href="http://kuc0pas.blogspot.com/2012/03/cara-buat-animasi-berjalan-di-blog-cara.html" target="_blank"><img border="0" src="http://i446.photobucket.com/albums/qq182/kisot06/Naruto1%20gif/KibaAkamaru.gif" style="cursor: pointer;" /></a></marquee></div>

5. Animasi Sasuke Berlari

<div id="DADrun" style="bottom: 0px; left: 0px; position: fixed; right: 0px;"><marquee direction="right" behavior="left" scrollamount="7">

<a href="http://kuc0pas.blogspot.com/2012/03/cara-buat-animasi-berjalan-di-blog-cara.html" target="_blank"><img border="0" src="http://th217.photobucket.com/albums/cc54/ivandra79/Naruto/th_SASUKE_GIF.gif" style="cursor: pointer;" /></a></marquee></div>

6. Animasi Deidara Naik Burung

<div id="DADrun" style="bottom: 0px; left: 0px; position: fixed; right: 0px;"><marquee direction="right" behavior="left" scrollamount="7">

<a href="http://kuc0pas.blogspot.com/2012/03/cara-buat-animasi-berjalan-di-blog-cara.html" target="_blank"><img border="0" src="http://i446.photobucket.com/albums/qq182/kisot06/Akatsuki%20gif/DeidaraBird.gif" style="cursor: pointer;" /></a></marquee></div>

7. Animasi Neji Strikes Mainkan Jurus

<div id="DADrun" style="bottom: 0px; left: 0px; position: fixed; right: 0px;"><marquee direction="right" behavior="left" scrollamount="7">

<a href="http://kuc0pas.blogspot.com/2012/03/cara-buat-animasi-berjalan-di-blog-cara.html" target="_blank"><img border="0" src="http://i446.photobucket.com/albums/qq182/kisot06/Naruto1%20gif/NejiStrikes.gif" style="cursor: pointer;" /></a></marquee></div>

8. Animasi Leecombo Beraksi

<div id="DADrun" style="bottom: 0px; left: 0px; position: fixed; right: 0px;"><marquee direction="right" behavior="left" scrollamount="2">

<a href="http://kuc0pas.blogspot.com/2012/03/cara-buat-animasi-berjalan-di-blog-cara.html" target="_blank"><img border="0" src="http://i446.photobucket.com/albums/qq182/kisot06/Naruto1%20gif/Leecombo.gif" style="cursor: pointer;" /></a></marquee></div>

9. Animasi Jurus Andalan

<div id="DADrun" style="bottom: 0px; left: 0px; position: fixed; right: 0px;"><marquee behavior="left" scrollamount="7">

<a href="http://kuc0pas.blogspot.com/2012/03/cara-buat-animasi-berjalan-di-blog-cara.html" target="_blank"><img border="0" src="http://pic60.picturetrail.com/VOL1698/12134860/21582353/355343243.jpg" style="cursor: pointer;" /></a></marquee></div>

10. Animasi Kakashi

<div id="DADrun" style="bottom: 0px; left: 0px; position: fixed; right: 0px;"><marquee direction="right" behavior="left" scrollamount="2">

<a href="http://kuc0pas.blogspot.com/2012/03/cara-buat-animasi-berjalan-di-blog-cara.html" target="_blank"><img border="0" src="http://i446.photobucket.com/albums/qq182/kisot06/Naruto1%20gif/Kakashi.gif" style="cursor: pointer;" /></a></marquee></div>

11. Animasi Jiraiya Summoned Naik kodok Menyembur Api

<div id="DADrun" style="bottom: 0px; left: 0px; position: fixed; right: 0px;"><marquee behavior="left" scrollamount="2">

<a href="http://kuc0pas.blogspot.com/2012/03/cara-buat-animasi-berjalan-di-blog-cara.html" target="_blank"><img border="0" src="http://i446.photobucket.com/albums/qq182/kisot06/Naruto1%20gif/JiraiyaSummoned.gif" style="cursor: pointer;" /></a></marquee></div>

---

KETERANGAN:

• Silahkan sobat pilih salah satu Kode saja di atas.

• Kode berwarna BIRU adalah Kode Alamat URL Image atau gambar. Bisa sobat ganti dengan Alamat URL Image atau gambar milik sobat sendiri.

• Kode warna PINK (direction="right") adalah Kode Marquee berjalan dari kiri ke kanan. Silahkan di hapus, Jika sobat ingin merubah arah dari kanan ke kiri.

• Kode warna MERAH (scrollamount="7") adalah Kode Marquee Kecepatan Berjalan atau melintas. Silahkan sobat atur nilainya sesuai dengan keinginan sobat.

 Semua kode diatas sudah pernah saya uji dalam blog demo kucopas, Jadi semua trik diatas dapat di pastikan berhasil 100%. Jika sobat masih mengalami kesulitan dalam pemasangan kode, Silahkan bertanya pada form komentar yang tersedia. Bila ada waktu, Sebisa mungkin saya akan membantu memecahkan permasalahan sobat dalam memasang kode animasi berjalan pada blog.

 Namun jika sobat sudah berhasil membuat dan memasang animasi berjalan di blog sobat, Itu artinya tips dan trik saya berhasil dengan sempurna. Jangan lupa di like dan juga di follow blog KUCOPAS ini.

 Semoga artikel tips dan trik yang saya share ini, Yaitu tentang Cara Buat Animasi Berjalan di Blog atau Cara Membuat Animasi Berjalan Di Bagian Bawah Blog, Bisa sangat bermanfaat untuk sobat KUCOPAS semua.

Selamat Berkarya

---

| Supported by http://kuc0pas.blogspot.com |

---

Cara Membuat Foto Dan Gambar Bergerak Slide Di Blog

 Cara Membuat Foto dan Gambar Bergerak Slide di Blog - Salam hangat buat sobat-sobat blog KUCOPAS semua, Kemarin saya sudah share artikel tentang Cara Buat Teks Berjalan dan Berkedip di Blog, dan Kali ini saya akan share Tips dan trik lagi tentang Cara Buat Gallery Foto Bergerak slide di Blog atau Cara buat foto atau gambar berjalan di blog, Bahasa gaulnya ya Script Marquee Bikin Image Lebih Dinamis.

 Pada dasarnya membuat image atau foto bergerak slide di blog, Caranya terbilang sangat mudah. Karena kita hanya memberi atau menambahkan script marquee pada image atau foto yang ingin kita tampilkan dalam blog kita. Namun cara penerapannya haruslah benar dan sesuai dengan perintah dari script marquee tersebut. Sobat bisa melihat cara penerapan Script Marquee yang benar DISINI.

 Maka dari itu, Pada artikel saya kali ini akan menerangkan secara detail tentang bagaimana cara menambahkan script marquee dalam image agar bisa bergerak slide dalam blog dengan sempurna dan tidak ada masalah saat blog kita di kunjungi oleh para visitor dan pelanggan pembaca berita terbaru pada blog kita.

DEMO

 Oke sobat, Kita kembali lagi pada tutorial untuk Cara Membuat Foto Dan Gambar Bergerak Slide Di Blog, Silahkan sobat ikuti cara-caranya sebagai berikut:

1. Silahkan >> "Login atau Masuk" ke blog menggunakan akun sobat.

2. Setelah itu sobat pilih >> menu "Tata Letak".

3. Kemudian klik >> "Tambah Gadget".

4. Pilih >> "HTML/JavaScript".

5. Isi kotak judul dengan judul gallery sobat, contoh "My Foto Gallery".

6. Kemudian pada kotak "Konten", Silahkan sobat masukkan semua kode Marquee di bawah ini.

---

<marquee direction="up" onmouseover="this.stop()" scrollamount="5" onmouseout="this.start()"><img src="alamat_gambar_sobat.jpg" width="120" height="70"></marquee>

---

*Catatan:

• Ganti alamat URL gambar "src" yang saya drag berwarna HIJAU pada kode script <img src="alamat_gambar_sobat.jpg" width="120" height="70"> dengan alamat URL gambar image sobat. Kalau belum mempunyai alamat gambar image, Silahkan upload dulu ke FhotoBucket, Picasa, dan lain sebagainya, Kemudian sobat ambil Alamat URL nya dan tempelkan pada tulisan yang saya drag berwarna HIJAU.

• scrollamount="5" adalah Kecepatan Marquee atau image yang berjalan. Silahkan sobat atur nilai kecepatanya, Agar sesuai dengan keinginan sobat.

• Kode "width" dan "height" adalah untuk mengatur ukuran lebar dan tinggi gambar image. Silahkan sobat atur nilainya agar sesuai dengan selera sobat.

• Kode "up" adalah kode arah foto gambar image yang akan bergerak atau berjalan ke atas. Silahkan sobat ganti dengan "down" untuk arah ke bawah, Atau bisa juga diganti kode yang lainya, Agar sesuai dengan keinginan sobat.

• Contoh diatas adalah hanya untuk satu gambar image foto saja. Jika sobat ingin lebih dari satu foto gambar image, Silahkan sobat tambah lagi kode script image tersebut sebanyak gambar image atau foto yang sobat inginkan.

Contoh penerapan kode script marquee yang tepat adalah seperti dibawah ini.

<marquee direction="up" onmouseover="this.stop()" scrollamount="5" onmouseout="this.start()">
<img src="alamat_gambar_1_sobat.jpg" width="120" height="70">
<img src="alamat_gambar_2_sobat.jpg" width="120" height="70">
<img src="alamat_gambar_3_sobat.jpg" width="120" height="70">
<img src="alamat_gambar_4_sobat.jpg" width="120" height="70">

<img src="alamat_gambar_5_sobat.jpg" width="120" height="70">
<img src="alamat_gambar_6_sobat.jpg" width="120" height="70">
<img src="alamat_gambar_7_sobat.jpg" width="120" height="70">
<img src="alamat_gambar_8_sobat.jpg" width="120" height="70">

<img src="alamat_gambar_9_sobat.jpg" width="120" height="70">

<!-- dan seterusnya..., SupPort By KUCOPAS -->  
</marquee>

7. Untuk menyimpan gadget yang baru sobat buat, Ikuti cara berikut ini.

• Setelah semua kode marquee sudah sobat masukkan pada kotak Konten HTML/JavaScript, Silahkan sobat klik tombol >> Simpan.

• Selesai dan lihat hasilnya.

 Untuk mengetahui tentang Cara Membuat Widget Gallery Foto Gambar Image Bergerak Berjalan Di Blog yang terbaru atau ter-update dan lebih dinamis, Silahkan sobat bisa lihat DISINI.

 Semoga artikel posting yang saya share ini, Yaitu tentang Cara Membuat Gallery Foto Bergerak Di Blog atau Cara Membuat Foto Berjalan Di Blog, Bisa sangat bermanfaat untuk sobat KUCOPAS semua.

HapPy Blog9inG...

---

| Supported by http://kuc0pas.blogspot.com |

---

Cara Membuat Teks Berjalan Dan Berkedip Di Blog

 Cara Membuat Teks Berjalan Dan Berkedip Di Blog - Selamat bejumpa lagi sobat, dengan blog KUCOPAS yang ndeso dan katroxs ini. hahahaha... Pada kesempatan yang sebelumnya saya sudah share artikel tips dan trik tentang Cara pasang tombol like facebook di blog, Dan kali ini saya akan share tips dan trik Cara Membuat Teks Berjalan Dan Berkedip Di Blog.

 Sedikit pengetahuan untuk sobat, Bahwasannya "Teks berjalan dan berkedip" pada bahasa html disebut dengan marquee behavior. Bayak sekali macamnya kode-kode marquee yang bisa sobat pasang dan di terapkan pada blog sobat. Salah satu contoh kode marquee berikut ini adalah kode marquee yang default tanpa tambahan kode fungsi yang lain. <marquee>Teks Sobat</marquee> Dan jika di pasang atau di terapkan dalam blog, Maka akan menghasilkan efek marquee atau teks berjalan normal dari arah  kanan ke arah kiri.

 Oke sobat, Mungkin artikel yang saya share ini memang sudah tak asing lagi bagi para bloggers mania yang sudah malang melintang dalam menjelajah dan mengutak-atik blognya. Namun bila mungkin di antara sobat semua ada yang belum tahu mengenai artikel sederhana ini, Yang menerangkan tentang cara membuat teks berjalan dan berkedip pada blog, wordpress, blogspot, joomla dan pada blog dengan css yang lain. Silahkan sobat simak baik-baik postingan yang saya share ini, Sebab cara ini juga bisa di terapkan pada website dengan desain sendiri yang berformat html.

Cara Membuat Teks Berjalan dan Berkedip di Blog

 Sekarang kita menuju ke TKP, Berikut panduan dan tutorial cara membuat teks berjalan dan berkedip pada blog, wordpress, joomla, blogspot, dan blog yang lain :

Cara Penerapan atau pemasangan dalam blog.

• Silahkan sobat pilih beberapa kode Marquee di bawah ini, Kemudian tempelkan kode pada Mode HTML/JavaScript.
• Kode Marquee bisa di terapkan pada Template, Sidebar, Footer, Widget, maupun postingan blog. Dengan catatan, Kode di terapkan pada Mode HTML.

Silahkan Sobat pilih Kode Marquee yang sobat inginkan.

1. Cara buat Teks berjalan secara default dari kanan ke kiri.

    <marquee>Teks Sobat</marquee>

Teks Sobat

2. Cara buat Teks berjalan dari Kiri ke kanan.

 <marquee direction="right">Teks Sobat</marquee>
Teks Sobat

3. Teks akan berhenti jika mouse diarahkan pada Teks.

    <marquee onmouseover="this.stop()" onmouseout="this.start()">Teks Sobat</marquee>

4. Marquee 2.0.0 ini mempunyai kelebihan bolak-balik dari ruang kotak yang tidak terlihat oleh mata.

    <marquee behavior="alternate">Teks Sobat</marquee>

Teks Sobat

5. Marquee 2.0.1 adalah pengembangan dari marquee sebelumnya, Dengan fungsi scrollamount dia menjadi sangat agresif dan cepat.

    <marquee behavior="alternate" scrollamount="25">Teks Sobat</marquee>

Teks Sobat

6. Cara buat Teks berjalan dari Bawah ke Atas.

    <marquee direction="up">Teks Sobat</marquee>

Teks Sobat

7. Marquee 3.0.1 adalah pengembangan dari marquee sebelumnya yang tidak mempunyai batas ruang, Marquee ini kita batasi ruang kasatnya sehingga memiliki ukuran height 100 saja. Demikian dengan kemampuan scrollamountnya kita perlambat. Dan kita tambahkan on mouse stop/start juga.

    <marquee direction="up" onmouseover="this.stop()" width="100%" scrollamount="2" onmouseout="this.start()" height="100">Teks Sobat</marquee>

Teks Sobat

8. Marquee 3.0.2 masih merupakan pengembangan dari marquee sebelumnya, Hanya saja teks berada di tengah ruang.

    <marquee direction="up" width="100%" scrollamount="2" height="100" align="center">Teks Sobat</marquee>

Teks Sobat

9. Cara buat Teks berjalan dari Atas ke Bawah.

    <marquee direction="down" width="100%" height="100">Teks Sobat</marquee>

Teks Sobat

10. Cara Membuat teks berkedip

    <blink>Teks Sobat</blink>

11. Selesai. dan lihat hasil nya.

Catatan:

• Tidak semua kode Marquee di atas bisa di terapkan pada Template blog sobat. Jadi pilihlah kode Marquee yang sesuai untuk blog sobat.

 Semoga artikel yang saya share ini yaitu trik dan tips tentang Cara Membuat Teks Berjalan Dan Berkedip Di Blog, Bisa sangat bermanfaat untuk sobat KUCOPAS semua.

Selamat Berkarya.

---

| Supported by http://kuc0pas.blogspot.com |

---