MENAMBAH ANIMASI PADA BLOG
pada postingan kali ini ,wildan berusaha mencari widget-widget lucu bergerak dan
menarik dari berbagai situs, setelah mondar-mandir ga karuan di mbah
google ,akhirnya ketemu juga widget-widget yang lucu dan unik yang
pastinya bergerak atau berformat gif ,pada kumpulan widget animasi
bergerak inipun ada juga animasi seperti naruto dan onepiece,
mungkin di antara kalian ada juga yang senang dengan animasi onepice
serta naruto yang bergerak ini untuk di paasang ke blog kalian. tapi
tentu saja di setiap situs-situs tersebut tidak semua animasi bergerak
sama oleh karena itu dalam postingan kali ini wildan akan memberikan
kumpulan postingan animasi bergerak seperti naruto dan onepiece dari
berbagai situs yang telah wildan kunjungi .silakan kalian kalau mau copas kode-kode script berikut di blog kalian .
sebelum kalian meng copas kode kode tersebut .. sebaiknya kalian mengikuti tutorial cara memasang animasi pada blog berikut ini . untuk memasang widget widget animasi bergerak seperti naruto dan onepiece pada blog kalian ..( tepatnya animasi- animasi bergerak naruto tersebut akan ada di sudut pojok bawah pada blog kalian ).dan kalian dapat merubah lokasi penempatannya/ukuran gambarnya sesuai dengan tempat/ukuran favorit anda .!!!
- masuk atau login ke blog kalian
- klik Rancangan / Design kemudian klik Elemen laman / page Elements
- Lalu klik tambah gadget / add gadget , setelah di klik akan muncul banyak pilihan ..
- pilih HTML/JAVA SCRIPT
- lalu copy pastekan script-script berikut ini ( sebaiknya jangan di beri judul )
- silakan copas :<div style="position: fixed; bottom: 0px; left: 10px;width:110px;height:130px;"><a href="http://zengbogel.blogspot.com/2011/11/cara-pasang-animasi-lucu-pada-blog.html" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/00020389.gif" title="widget animasi lucu bergerak atau gif" alt="animasi bergerak naruto dan onepiece"/></a><small><center><a href="http://zengbogel.blogspot.com/2011/11/cara-pasang-animasi-lucu-pada-blog.html" target="_blank">animasi bergerak helikopter</a></center></small></div>
=>untuk mengedit animasi apa yang kalian ingin gunakan silakan edit "Tulisan berwarna
biru "( ubah alamat animasi favorit yang anda suka)
=> untuk mengedit tinggi animasi silakan edit : "hegiht : 130px"
( angka dapat kalian atur sesuai dengan kebutuhan)
=> untuk mengedit panjang gambar : "width : 110px"
( angka dapat kalian atur sesuai dengan kebutuhan)
=> untuk mengedit/ mengatur lokasi sesuai kebutuhan misal animasi bergerak ini dapat di
buat agar tidak ada di pojok/sudut blog . melainkan diam / berada pada posisi
yang kalian ingin kan , jika kalian tertarik untuk mengeditnya .
silakan kalian edit "position : fixed ; bottom:0px;left:10px"
position fixed : maksudnya adalah posisi animasi akan selalu bergerak . jika anda ingin
posisi animasi tersebut hanya diam pada satu posisi maka silakan
hapus
position : fixed ini
bottom : 0px : maksud bottom 0px ini adalah jarak antara animasi dengan sisi bawah .
jika kalian ingin membuat animasi tersebut tidak berada di bawah ,
misalkan kalian ingin animasi berada di atas silakan kalian edit bottom
menjadi top
left : 10px : maksud left :10px ini adalah jarak antara animasi dengan sisi kiri .
jika kalian ingin membuat animasi tersebut tidak berada di kiri,
misalkan kalian ingin animasi berada di kanan silakan kalian edit left
menjadi right.
saran ..!!!!
jika anda ingin mengedit animasi menjadi di kanan dan di atas sebaiknya edit saja seperti ini
"position : fixed ; top:0px;right:10px"
untuk keterangan lebih lanjut cek aja langsung ke sumbernya : http://zengbogel.blogspot.com/2011/11/cara-pasang-animasi-lucu-pada-blog.html
Cara menambah lagu di blog (memasang lagu di blog)
Awalnya saya tidak tertarik membuat postingan ini,karena menurut saya tidak efektif jika memasang lagu di blog dan jauh lebih baik memutar winamp di komputer sambil buat blog daripada memutar lagu secara online. tetapi karena ada beberapa teman yang menanyakan cara memasang lagu ke blog, akhirnya saya buat juga postingan tentang cara tambah lagu menjadi background di blog blogspot.Tetapi sebagai pertimbangan buat teman-teman sebelum menambah lagu ke blog:
1. Blog akan menjadi lebih berat, sehingga waktu loading atau membuka halaman lebih lambat
2. Robot google tidak suka dengan blog yang berat loadingnya, jadi jika tujuan anda untuk optimasi seo maka jangan tambah atau pasang lagu di blog anda.
Buat yang tertarik pasang lagu di blog bisa lakukan prosedur berikut:
1. Buka situs layanan widet mp3 player online , gunakan link berikut mp3 mixpod
Klik tombol Sign Up untuk mendaftar menjadi member di mixpod
Setelah mengisi form pendaftaran , gunakan tombol Login untuk masuk ke member area (jika tidak bisa login silahkan cek email, biasanya ada link dari mixpod.com untuk verifikasi member)
Saya menganggap anda sudah login ke meber area
Di menu Bar Pilih Create Playlist
Di bagian tabulasi Add Music , pada kotak search ketik nama artis yang akan dicari lagunya , Klik Search
Pada search result akan muncul lagu-lagu yang bisa dipilih /dimasukkan ke palylist
Klik tanda plus (+) untuk menambahkan lagu ke dalam playlist
Tambahkan lagu sesuai kebutuhan (dalam contoh ini saya menambahkan sekitar 30-an lagu ke playlist.
Di Preview player akan terlihat deretan lagu yang telah terpilih
2. Di bagian tabulasi Save Playlist
Pilih Genre musik , dan isi tag musik
Klik Tombol "Save and Get Code"
2. Copy kode html yang tersedia untuk platform Blogger
3. Logn ke account blogger anda
Pilih Dashboard -> tata letak -> elemen halaman
Pilih Tambah Gadget

4. Pilih html/java script

5. Masukkan kode yang anda perleh dari website layanan lagu online ke kotak teks html/javascript
Klik Simpan

6. Buka blog anda, jika sukses maka akan muncul widget mp3 player di blog anda. Untuk memulai lagu anda bisa tekan tombol play seperti di winamp. Contohnya bisa dilihat di bawah ini
Create a playlist at MixPod.com
Kumpulan Cursor Keren Untuk Blog
- Chrome Pointer Cursor
<style
type="text/css">body, a:hover {cursor:
url(http://cur.cursors-4u.net/cursors/cur-11/cur1054.cur),
progress;}</style><a
href="http://www.cursors-4u.com/cursor/2012/02/11/chrome-pointer.html"
target="_blank" title="Chrome Pointer"><img
src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Chrome
Pointer" style="position:absolute; top: 0px; right: 0px;"
/></a>
Screenshots
- Blue Fire Pointer Cursor
<style
type="text/css">body, a:hover {cursor:
url(http://cur.cursors-4u.net/cursors/cur-11/cur1058.ani),
url(http://cur.cursors-4u.net/cursors/cur-11/cur1058.png),
progress;}</style><a
href="http://www.cursors-4u.com/cursor/2012/03/03/blue-fire-pointer.html"
target="_blank" title="Blue Fire Pointer"><img
src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Blue Fire
Pointer" style="position:absolute; top: 0px; right: 0px;"
/></a>
Screenshots
- Wavy Cursor Tail 10 Cursor
<style
type="text/css">body, a:hover {cursor:
url(http://cur.cursors-4u.net/cursors/cur-1/cur62.ani),
url(http://cur.cursors-4u.net/cursors/cur-1/cur62.png),
progress;}</style><a
href="http://www.cursors-4u.com/cursor/2006/04/23/cur62.html"
target="_blank" title="Wavy Cursor Tail 10"><img
src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Wavy Cursor
Tail 10" style="position:absolute; top: 0px; right: 0px;"
/></a>
Screenshots
- The Alien Cursor
<style
type="text/css">body, a:hover {cursor:
url(http://cur.cursors-4u.net/cursors/cur-9/cur815.ani),
url(http://cur.cursors-4u.net/cursors/cur-9/cur815.png),
progress;}</style><a
href="http://www.cursors-4u.com/cursor/2011/03/29/the-alien-15.html"
target="_blank" title="The Alien"><img
src="http://cur.cursors-4u.net/cursor.png" border="0" alt="The Alien"
style="position:absolute; top: 0px; right: 0px;" /></a>
Screenshots
- Cool Blue Outer Glow Cursor
<style
type="text/css">body, a:hover {cursor:
url(http://cur.cursors-4u.net/cursors/cur-2/cur116.cur),
progress;}</style><a
href="http://www.cursors-4u.com/cursor/2008/12/17/cool-blue-outer-glow-pointer.html"
target="_blank" title="Cool Blue Outer Glow Pointer"><img
src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Cool Blue
Outer Glow Pointer" style="position:absolute; top: 0px; right: 0px;"
/></a>
Screenshots
- Animated Cool Shiny Blue Pointer Cursor
<style
type="text/css">body, a:hover {cursor:
url(http://cur.cursors-4u.net/games/gam-11/gam1090.ani),
url(http://cur.cursors-4u.net/games/gam-11/gam1090.png),
progress;}</style><a
href="http://www.cursors-4u.com/cursor/2010/02/24/animated-cool-shiny-blue-pointer.html"
target="_blank" title="Animated Cool Shiny Blue Pointer"><img
src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Animated Cool
Shiny Blue Pointer" style="position:absolute; top: 0px; right: 0px;"
/></a>
Screenshots
- Perfect World Online Spear Thingy Cursor
<style
type="text/css">body, a:hover {cursor:
url(http://cur.cursors-4u.net/games/gam-13/gam1229.ani),
url(http://cur.cursors-4u.net/games/gam-13/gam1229.png),
progress;}</style><a
href="http://www.cursors-4u.com/cursor/2011/03/03/perfect-world-online-spear-thingy.html"
target="_blank" title="Perfect World Online Spear Thingy"><img
src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Perfect World
Online Spear Thingy" style="position:absolute; top: 0px; right: 0px;"
/></a>
Screenshots
- Rave Cursor
<style
type="text/css">body, a:hover {cursor:
url(http://cur.cursors-4u.net/cursors/cur-4/cur320.ani),
url(http://cur.cursors-4u.net/cursors/cur-4/cur320.png),
progress;}</style><a
href="http://www.cursors-4u.com/cursor/2009/11/25/rave-2.html"
target="_blank" title="Rave"><img
src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Rave"
style="position:absolute; top: 0px; right: 0px;" /></a>
Screenshots
- Psychedelic Pointer Cursor
<style
type="text/css">body, a:hover {cursor:
url(http://cur.cursors-4u.net/cursors/cur-2/cur197.ani),
url(http://cur.cursors-4u.net/cursors/cur-2/cur197.png),
progress;}</style><a
href="http://www.cursors-4u.com/cursor/2009/04/22/psychedelic-pointer.html"
target="_blank" title="Psychedelic Pointer"><img
src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Psychedelic
Pointer" style="position:absolute; top: 0px; right: 0px;"
/></a>
Screenshots
- Animated Fire Cursor
<style
type="text/css">body, a:hover {cursor:
url(http://cur.cursors-4u.net/special/spe-1/spe19.ani),
url(http://cur.cursors-4u.net/special/spe-1/spe19.png),
progress;}</style><a
href="http://www.cursors-4u.com/cursor/2005/10/18/spe19.html"
target="_blank" title="Animated Fire"><img
src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Animated
Fire" style="position:absolute; top: 0px; right: 0px;" /></a>
Screenshots
- Flame Cursor
<style
type="text/css">body, a:hover {cursor:
url(http://cur.cursors-4u.net/cursors/cur-1/cur15.ani),
url(http://cur.cursors-4u.net/cursors/cur-1/cur15.png),
progress;}</style><a
href="http://www.cursors-4u.com/cursor/2005/07/26/cur15.html"
target="_blank" title="Flame"><img
src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Flame"
style="position:absolute; top: 0px; right: 0px;" /></a>
Screenshots
- Heartless Background Cursor
<style
type="text/css">body, a:hover {cursor:
url(http://cur.cursors-4u.net/symbols/sym-6/sym549.ani),
url(http://cur.cursors-4u.net/symbols/sym-6/sym549.png),
progress;}</style><a
href="http://www.cursors-4u.com/cursor/2010/12/20/heartless-background.html"
target="_blank" title="Heartless Background"><img
src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Heartless
Background" style="position:absolute; top: 0px; right: 0px;"
/></a>
Screenshots
- X-Steel Cursor
<style
type="text/css">body, a:hover {cursor:
url(http://cur.cursors-4u.net/cursors/cur-11/cur1028.ani),
url(http://cur.cursors-4u.net/cursors/cur-11/cur1027.png),
progress;}</style><a
href="http://www.cursors-4u.com/cursor/2012/01/22/x-steel-wait.html"
target="_blank" title="X-Steel - Wait"><img
src="http://cur.cursors-4u.net/cursor.png" border="0" alt="X-Steel -
Wait" style="position:absolute; top: 0px; right: 0px;" /></a>
Screenshots
- Defender Blue Cursor
<style
type="text/css">body, a:hover {cursor:
url(http://cur.cursors-4u.net/cursors/cur-4/cur395.ani),
url(http://cur.cursors-4u.net/cursors/cur-4/cur395.png),
progress;}</style><a
href="http://www.cursors-4u.com/cursor/2010/09/08/defender-black-blue.html"
target="_blank" title="Defender Black Blue"><img
src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Defender
Black Blue" style="position:absolute; top: 0px; right: 0px;"
/></a>
Screenshots
- Shiny Flashy Green Matrix Cursor
<style
type="text/css">body, a:hover {cursor:
url(http://cur.cursors-4u.net/cursors/cur-3/cur201.ani),
url(http://cur.cursors-4u.net/cursors/cur-3/cur201.png),
progress;}</style><a
href="http://www.cursors-4u.com/cursor/2009/04/22/shiny-flashy-green-matrix.html"
target="_blank" title="Shiny Flashy Green Matrix"><img
src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Shiny Flashy
Green Matrix" style="position:absolute; top: 0px; right: 0px;"
/></a>
Screenshots
- Batman Begins - Help Select Cursor
<style
type="text/css">body, a:hover {cursor:
url(http://cur.cursors-4u.net/cursors/cur-10/cur949.ani),
url(http://cur.cursors-4u.net/cursors/cur-10/cur949.png),
progress;}</style><a
href="http://www.cursors-4u.com/cursor/2011/12/26/batman-begins-help-select.html"
target="_blank" title="Batman Begins - Help Select"><img
src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Batman Begins
- Help Select" style="position:absolute; top: 0px; right: 0px;"
/></a>
Screenshots
Cara Memasangnya :
- Login ke Blogger, atau klik disini
- Tata Letak --> Tambahkan Gadget --> HTML/JavaScript
- Copy Paste salah satu kode kursor diatas ke kolom HTML/JavaScript
- Simpan dan Lihat hasilnya.




Tidak ada komentar :
Posting Komentar