Cara Memasang Gambar Animasi Pada Blog

Cara menampilkan gambar animasi di pojok blog. Terkadang untuk menghias blog agar tampak lebih menarik maka bisa memasang gambar animasi di blog.Bisa ditempatkan di pojok atas (kiri dan kanan), pojok bawah kiri dan kanan, atau semua pojok diisi gambar lucu-lucu.

Untuk menampilkan gambar lucu, cukup copy salah satu script html di bawah ini kemudian masukkan ke dalam gadget html. Script ini saya buat menggunakan kode html ditambah gambar animasi lucu.

Contoh dan scriptnya bisa dilihat di bawah ini :

1.Gajah lompat

Script:

<div style="position: fixed; bottom: 0px; left: 20px;width:120px;height:160px;"><a href="http://zidni-smk-gondang.blogspot.com/2012/03/cara-memasang-gambar-animasi-di-blog.html" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4lME3CgDpnTOigyEdbO_MeTKg-1UhzzrLGr4_2glTqVTr53Ehi3Zv6b24BwgTDFEwqKC6UlHZxLci-X8DDujIa2PmiRp61SLFaHw4Pj1QiamiUaKxnvAqTcru5Rs1Krg0wFVdR4imzPE/s1600/001-gajah-lompat.gif" title="Click to get more." /></a><small><center><a href="http://zidni-smk-gondang.blogspot.com/2012/03/cara-memasang-gambar-animasi-di-blog.html" target="_blank">Widget-Animasi</a></center></small></div>

2. Emotion Boring



Script :

<div style="position: fixed; bottom: 0px; left: 20px;width:80px;height:120px;"><a href="http://zidni-smk-gondang.blogspot.com/2012/03/cara-memasang-gambar-animasi-di-blog.html" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-KUHWnFkn8IumGOVRit5X2UYQdEEFAeZBmcef4gjlKuhmz3NdF3qjwUnfzEIsGvoZDM3vYwwFuW19IXGnvWk_v4_BRujD99h9tH7PA6yibvsHrHQ_X99_e_UCE2w4mgr83vizbceFHmM/s1600/002-boring.gif" border="0" /></a><small><center><a href="http://zidni-smk-gondang.blogspot.com/2012/03/cara-memasang-gambar-animasi-di-blog.html" target="_blank">Widget-Animasi</a></center></small></div>

3.Bayi Lucu Tertawa


Script:

<div style="position: fixed; bottom: 0px; right: 20px;width:82px;height:160px;"><a href="http://zidni-smk-gondang.blogspot.com/2012/03/cara-memasang-gambar-animasi-di-blog.html" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEjLvzy219i8PpUSwnv-m3tVrELNnP4hgBsged8wZYQsyLVq1iLUSMx1V9KGl3mmLPEgcc4rWwm1xNoL_CBz1fiTMJmfWl_CoWILzFfNMbxGmf_GcJ3FOhMAxyKy0cBxI6IkmQNfrdGI8/s1600/003-bayi-tertawa.gif" border="0" /></a><small><center><a href="http://zidni-smk-gondang.blogspot.com/2012/03/cara-memasang-gambar-animasi-di-blog.html" target="_blank">Widget-Animasi</a></center></small></div>

4.Boneka joget


Script :

<div style="position: fixed; bottom: 0px; left: 20px;width:82px;height:160px;"><a href="http://zidni-smk-gondang.blogspot.com/2012/03/cara-memasang-gambar-animasi-di-blog.html" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiG3gBkORMEmC1JSuYnsPWA-P6rm5ZBwqYA8-btO4vLLhrpewycbbM4FTgRKhkIMgELHDWyP_peJIryUhj3idQnCG1qepYC8Rn4uxgAccnEdIxevqB-pji4_xw_V_-sRhy9OCpuaQZ_Yk/s1600/004-boneka+joget.gif" border="0" /></a><small><center><a href="http://zidni-smk-gondang.blogspot.com/2012/03/cara-memasang-gambar-animasi-di-blog.html" target="_blank">Widget-Animasi</a></center></small></div>

5. Panda bermain bola


Script :

<div style="position: fixed; bottom: 0px; right: 30px;width:160px;height:160px;"><a href="http://zidni-smk-gondang.blogspot.com/2012/03/cara-memasang-gambar-animasi-di-blog.html" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjycLTLAEs-0OXGvnvHXkOLvUHsYONXNczVtFN-W7cIzrbzbtGNcniBkKsIovwE_VMuBtdswlhBcTfCn4tKSEkTFt_tl4-bV7R6AUNAJvvAuWL3tiaughwzkAdo1jFXNv-t5RA4NgoIlJA/s1600/005-panda-main-bola.gif" border="0" /></a><small><center><a href="http://zidni-smk-gondang.blogspot.com/2012/03/cara-memasang-gambar-animasi-di-blog.html" target="_blank">Widget-Animasi-Blog</a></center></small></div>

6. Bayi Berbaring Tertawa


Script :

<div style="position: fixed; bottom: 0px; left: 20px;width:120px;height:100px;"><a href="http://zidni-smk-gondang.blogspot.com/2012/03/cara-memasang-gambar-animasi-di-blog.html" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhstObRQahBmkkM8QZtbvvjnL3cjw_qZjLbeym_ohhyphenhyphenG9r3u8FvFY3GION1u39Rfw2J66tAHbNZUpJSjvZZeAgq53dAX4KUGLjrMKGxIbCvlr6E6xWznvX_XTiuM2HF6Ogl8c7nnYdzLyo/s1600/006-bayi-baring.gif" title="Click to get more." /></a><small><center><a href="http://zidni-smk-gondang.blogspot.com/2012/03/cara-memasang-gambar-animasi-di-blog.html" target="_blank">Free-Widget-Animasi</a></center></small></div>

7. Panda biru


Script

<div style="position: fixed; bottom: 0px; left: 20px;width:100px;height:100px;"><a href="http://zidni-smk-gondang.blogspot.com/2012/03/cara-memasang-gambar-animasi-di-blog.html" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZONrEqCMmrZgbs3gmrFoyCG3xCd3ijF-VW5WzVlU1YgF8cZbjl5nYgFbcONWVxpv3L6DdEfd_PAv4rd4Z1veg5QLkDzMg6OnqjffVQs8Miq1nJQXuZuX_kbDbs8xlssLrblW3RzHbxHA/s1600/007-panda-biru.gif" title="Click to get more." /></a>
<small><center><a href="http://zidni-smk-gondang.blogspot.com/2012/03/cara-memasang-gambar-animasi-di-blog.html" target="_blank">Free-Widget-Animasi</a></center></small></div>

8. Panah

Script:

<div style="position: fixed; bottom: 0px; left: 10px;width:210px;height:120px;"><a href="http://zidni-smk-gondang.blogspot.com/2012/03/cara-memasang-gambar-animasi-di-blog.html" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjkXTuD9aj570UdHXj5IYIVV-BHe3eR39ys2p2UqohGNvlEpUSnkdC6Agx5W84oO43fX904VSVomlf69Rlct8Eekkw9P_mPlyL17K_g6PtDjKNr1KqtMNWvZTYK5pofLgQykYUyVpKtHs/s1600/008-panah.gif" title="Click to get more." /></a><small><center><a href="http://zidni-smk-gondang.blogspot.com/2012/03/cara-memasang-gambar-animasi-di-blog.html" target="_blank">Widget Animasi</a></center></small></div>

9. Bunga




Script :

<div style="position: fixed; bottom: 0px; left: 10px;width:100px;height:160px;"><a href="http://zidni-smk-gondang.blogspot.com/2012/03/cara-memasang-gambar-animasi-di-blog.html" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIaKELBbagAyWcP37maDb3n6lFiP4SQo8BG4dKsSKnIYzR6VDcY30SEUbJrdECllHLI4bux99__5bEnS6p5w3ceEFBLGTQVvKvsTgiKlm7IQYd8tmgjZGiCuTW-twmF6FncrHmhp9z-jE/s1600/009-bunga.gif" title="Click to get more." /></a><small><center><a href="http://zidni-smk-gondang.blogspot.com/2012/03/cara-memasang-gambar-animasi-di-blog.html" target="_blank">Widget Animasi</a></center></small></div>

10.Anjing laut


Script:

<div style="position: fixed; bottom: 0px; left: 10px;width:110px;height:160px;"><a href="http://zidni-smk-gondang.blogspot.com/2012/03/cara-memasang-gambar-animasi-di-blog.html" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnxURkzbe3m1mehw_SHZa2BmqzhttLxLylFhD36Khzw8UOa4MjGwwmfD3JiR1PGhEI9UbWf65-k8hnZ6-KGQ8ZtX9tnROGfg3wiRfrs-1vymeWoosUvyx79MxbVwmVWHHMIyr_ZgmAztk/s1600/010-anjing-laut.gif" title="Click to get more." /></a><small><center><a href="http://zidni-smk-gondang.blogspot.com/2012/03/cara-memasang-gambar-animasi-di-blog.html" target="_blank">Widget Animasi</a></center></small></div>

11.Lumba-lumba


Script :

<div style="position: fixed; bottom: 0px; left: 10px;width:110px;height:160px;"><a href="http://zidni-smk-gondang.blogspot.com/2012/03/cara-memasang-gambar-animasi-di-blog.html" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0EaT3rMVOqlzUKdmFs9AA8aOMN3GiiEKkSmR7dTZU831jIU6A0SdWmmhvMgWmAIL1oPp7rypNx-L0UBkUqdRfxs5-5efdDJoq-FubJVmSC6X4-ytu1mrdtFfXo_vG1lyjMbJzrtdlWN4/s1600/011-lumba-lumba.gif" title="Click to get more." /></a><small><center><a href="http://zidni-smk-gondang.blogspot.com/2012/03/cara-memasang-gambar-animasi-di-blog.html" target="_blank">Widget Animasi</a></center></small></div>

12.Kucing tidur



Script :

<div style="position: fixed; bottom: 0px; left: 10px;width:110px;height:140px;"><a href="http://zidni-smk-gondang.blogspot.com/2012/03/cara-memasang-gambar-animasi-di-blog.html" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgneOQHhbYoe2G3dh8O-N_ruLle0gcwu0HXJyDg3Xz67GBejmx8rF4NlWoBRbAZ9fW4_TkV1DRGjR8rfE5TYJe5gDWW4No_42wnvug8oy0waOmyWO5C2mJ-metd9HdDWp28NiTiNL3MG5I/s1600/012-kucing-tidur.gif" title="Click to get more." /></a><small><center><a href="http://zidni-smk-gondang.blogspot.com/2012/03/cara-memasang-gambar-animasi-di-blog.html" target="_blank">Widget Animasi</a></center></small></div>

13.Kelinci


Script :

<div style="position: fixed; bottom: 0px; left: 10px;width:125px;height:160px;"><a href="http://zidni-smk-gondang.blogspot.com/2012/03/cara-memasang-gambar-animasi-di-blog.html" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3jmsziEMXswt72SApJWsZy8afc8QT9YLWc6D3TAmXn_KrRtWSQdfu9kmzJTcb5oAzKslY_-LpPNIllbsuUtuSo5aSdjLMa2uaxtuWrxPtnXnMTLFqVbUImjC5b7rMlHBIw_cZg6iqyXA/s1600/013-kelinci.gif" title="Click to get more." /></a><small><center><a href="http://zidni-smk-gondang.blogspot.com/2012/03/cara-memasang-gambar-animasi-di-blog.html" target="_blank">Widget Animasi</a></center></small></div>

14.Dragon


Script:

<div style="position: fixed; bottom: 0px; left: 10px;width:150px;height:130px;"><a href="http://zidni-smk-gondang.blogspot.com/2012/03/cara-memasang-gambar-animasi-di-blog.html" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgnmjPwhOk0gAYIpDT9aPOPGLML6_6yoEsARdgvpFyLrqXZzR566-w51GnwV358F0MZn-R7WfrrZ0RkV_014Mfd0ELmS6Exh4f-qi44GhmjzqQwwYInkf5S_Db5-mNtIXF5rim-eXB_ko/s1600/014-dragon.gif" title="Click to get more." /></a><small><center><a href="http://zidni-smk-gondang.blogspot.com/2012/03/cara-memasang-gambar-animasi-di-blog.html" target="_blank">Widget Animasi</a></center></small></div>

15.Ikan


Script :

<div style="position: fixed; bottom: 0px; left: 10px;width:100px;height:130px;"><a href="http://zidni-smk-gondang.blogspot.com/2012/03/cara-memasang-gambar-animasi-di-blog.html" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV9uStd3tfUouB_h6vYGF0RAgvFQcSgK88vE_A8vuBAo9pdf8MORu0ZBMV-ZBgaHwtTtsw2McFMGa8WWyKAiMV2OHgVPkCAAD18enQ0VG-DKMo1U-_BJA7AX8pTbORzHHlV8bBfeBdDe0/s1600/015-ikan.gif" title="Click to get more." /></a><small><center><a href="http://zidni-smk-gondang.blogspot.com/2012/03/cara-memasang-gambar-animasi-di-blog.html" target="_blank">Widget Animasi</a></center></small></div>

16.Pinguin


Script :

<div style="position: fixed; bottom: 0px; left: 10px;width:110px;height:130px;"><a href="http://zidni-smk-gondang.blogspot.com/2012/03/cara-memasang-gambar-animasi-di-blog.html" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8NnLt4s_u10ulkn_CajMN7Wr0xfdSV-7VDDxL2tl2joiBmnntCylG5iATTzWxZRSJMxCa7BgHzdTPt8HJL3PideWdkzaFj-VaiGex3v9zFIoap-T-SBuYZv-sFs9R2H7uZSyguzUIHhY/s1600/016-pinguin.gif" title="Click to get more." /></a><small><center><a href="http://zidni-smk-gondang.blogspot.com/2012/03/cara-memasang-gambar-animasi-di-blog.html" target="_blank">Widget Animasi</a></center></small></div>

17. Helikopter


Script :

<div style="position: fixed; bottom: 0px; left: 10px;width:110px;height:130px;"><a href="http://zidni-smk-gondang.blogspot.com/2012/03/cara-memasang-gambar-animasi-di-blog.html" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVfHzbK20vI0UBAwHzsDtBEjuB1AWyoLSgGb-mlxbkcb3BVO7XmjwW6dob_9_sLFlSls9NwcpMvomYmVIKa4WnhqPjn6tRI-axnjPom9UBdYUE_sIwCmAC4mbMUnwFWIKBOaozig5jxpA/s1600/017-helikopter.gif" title="Click to get more." /></a><small><center><a href="http://zidni-smk-gondang.blogspot.com/2012/03/cara-memasang-gambar-animasi-di-blog.html" target="_blank">Widget Animasi</a></center></small></div>

18. Telur Menetas

Script :

<div style="position: fixed; bottom: 0px; left: 10px;width:110px;height:130px;"><a href="http://zidni-smk-gondang.blogspot.com/2012/03/cara-memasang-gambar-animasi-di-blog.html" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcKZf8UfWrUpNGSAK3_YO-uTxjIqDyXekleCuNRDSF8m6CLLHXFcHZ_gFy1TiJkeAE_1KYXmfmK02bhLvvwWjGOebFQsUSkUjf1pXpE4C9KmsS1_2eQdTCHImGM2zG0FM-tAa9ZpWYv0U/s1600/018-telur-menetas.gif" title="Click to get more." /></a><small><center><a href="http://zidni-smk-gondang.blogspot.com/2012/03/cara-memasang-gambar-animasi-di-blog.html" target="_blank">Widget Animasi</a></center></small></div>

19. Ayam Bertelur

Script :

<div style="position: fixed; bottom: 0px; left: 10px;width:110px;height:130px;"><a href="http://zidni-smk-gondang.blogspot.com/2012/03/cara-memasang-gambar-animasi-di-blog.html" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6z3UTGR1W781n6NxDEc3yiQry8UAMl2Gj03s6w4nA3DzYGUxT1x0LZqf4dYe8ys8i9fF_lOLAU6aG0yL-aWkaYC1YygfyZ_gT719whr21zvSLcQ9rHvIHxHSKbYTJta3RGUnP0NdLMoE/s1600/019-ayam-bertelur.gif" title="Click to get more." /></a><small><center><a href="http://zidni-smk-gondang.blogspot.com/2012/03/cara-memasang-gambar-animasi-di-blog.html" target="_blank">Widget Animasi</a></center></small></div>

20. Beruang Mancing

Script :

<div style="position: fixed; bottom: 0px; left: 10px;width:110px;height:130px;"><a href="http://zidni-smk-gondang.blogspot.com/2012/03/cara-memasang-gambar-animasi-di-blog.html" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6ThASwAS4v2Pzanz_hFNltSu9LmgBXZfNJkic3OsW61KlMBCX5CjkMMGAhuIP7Dy2ltvgNcN401Ym1BmUS7xWupesQS_R2Z73Orvg6daS3m5I7r7Rr-CKqO1K5jxyv97sAEoZ-ztF8Oo/s1600/020-beruang-mancing.gif" title="Click to get more." /></a><small><center><a href="http://zidni-smk-gondang.blogspot.com/2012/03/cara-memasang-gambar-animasi-di-blog.html" target="_blank">Widget Animasi</a></center></small></div>

21. Penjaga Gawang

Script :

<div style="position: fixed; bottom: 0px; left: 10px;width:110px;height:130px;"><a href="http://zidni-smk-gondang.blogspot.com/2012/03/cara-memasang-gambar-animasi-di-blog.html" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidfOkLEXvhn4DuinFi5FVN6Pp0Lq3gqufXi1FTMgPRmotKnGGnB_WFLY0q1Tcv8qwYzqI_1ZuqBWDx_pSMDcBl-_j8arqkzzRrixAw_5YZKmqMuUsm10Gw3PHKdNoHFXicQiHgLEvaTaY/s1600/021-penjaga-gawang.gif" title="Click to get more." /></a><small><center><a href="http://zidni-smk-gondang.blogspot.com/2012/03/cara-memasang-gambar-animasi-di-blog.html" target="_blank">Widget Animasi</a></center></small></div>

Anda bisa memilih salah satu script di atas kemudian masukkan ke gadget html/javascript. Jika menggunakan blog wordpress gratisan / blogdetik bisa copy script di atas ke widget text html.

Cara memasang widget animasi ke blog :
1. Pilih script yang tersedia

2. Di Dashboard blogger pilih Tata Letak

3. Pilih Tambah Gadget

4. Pilih HTML/Javascript

5. Masukkan script animasi ke dalam kotak kontent HTML/Javascript

Catatan:
Untuk mengganti posisi widget dari sebelah kiri ke kanan ganti tag left menjadi right
Untuk mengubah posisi dari kiri ke kanan ganti tag right menjadi left
Contohnya bisa dilihat di bawah ini

<div style="position: fixed; bottom: 0px; left: 30px;width:160px;height:160px;"><a href="http://zidni-smk-gondang.blogspot.com/2012/03/cara-memasang-gambar-animasi-di-blog.html" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjkXTuD9aj570UdHXj5IYIVV-BHe3eR39ys2p2UqohGNvlEpUSnkdC6Agx5W84oO43fX904VSVomlf69Rlct8Eekkw9P_mPlyL17K_g6PtDjKNr1KqtMNWvZTYK5pofLgQykYUyVpKtHs/s1600/008-panah.gif" border="0" /></a><small><center><a href="http://zidni-smk-gondang.blogspot.com/2012/03/cara-memasang-gambar-animasi-di-blog.html" target="_blank">Widget-Animasi-Blog</a></center></small></div>

Cara Membuat Judul Blog Berada Bi tengah

 menengahkan judul blog pada Blogspot -- Pada template Blogspot yang biasa (default) judul blog  ditempatkan di sisi kiri. Jadinya agak monoton, ya sobat?  Untungnya, pihak blogger sendiri sudah mengantisipasi kesukaan pengguna blogspot.
Blogger memberitahukan cara untuk membuat judul atau header itu agar terletak di tengah.

Caranya mudah sekali. Silakan salin kode cara menengahkan judul bog pada Blogspot di bawah ini:

.Header {
text-align: center;
}

Paste (untuk sementara) di notepad. Setelah itu, silakan masuk dashboard, lalu klik template designer atau rancangan. Tentu kita akan dibawa masuk ke template designer. Nah, pada kolom di sisi kiri atas, ada tulisan "Advanced" atau "Lanjut" atau mungkin "Tingkat Lanjut". Klik tulisan itu.

Nanti akan muncul subkolom "laman/page" dan seterusnya hingga ke bawah. Gulirkan mouse Anda ke bawah, lalu klik "Add CSS" (atau mungkin "Tambahkan CSS"). Setelah itu paste kode yang tadi dipaste sementara di notepad. Paste di kolom putih yang luas dan lebar itu. Lalu klik "Apply to Blog" di sisi kanan atas. Selesai.

Buka blogspot Anda dan judul blog Anda sudah berada di tengah (seperti pada blog saya)

Update: bila Anda sudah paste kode cara menengahkan judul bog pada Blogspot di atas namun ternyata judul blog masih tetap di sisi kiri, coba Anda tekan spasi beberapa kali atau tekan enter setelah tanda } (penutup). Lalu simpan perubahan yang Anda lakukan.

Disclaimer: saya sudah mengganti header blog ini, namun kode cara menengahkan judul bog pada Blogspot ini tetap berlaku.

membuat tulisan berputar

Cara membuat tulisan mengikuti kursor

Sudah pernah lihat tulisan yang berputar-putar mengelilingi Cursor dan selalu mengikuti Cursor di blog blogger?

Tadi saya baru saja berkunjung ke salah satu blog teman, di sana saya melihat sebuah tulisan yang berputar-putar mengelilingi Cursor dan selalu mengikuti kemanapun arah cursor tersebut.

Setelah melihat itu saya jadi ingin untuk menuliskan caranya, siapa tahu ada yang ingin  menghias blog nya dengan tulisan berputar mengelilingi cursor blognya.

Panduan Cara Membuat Animasi Tulisan Berpuatar Mengelilingi Cursor

1. Login ke dashboard blogger
2. Klik Tata Letak

3. Setelah itu klik Tambah Gadget

4. Pilih Gadget / Widget HTML/JavaScript

5. Klik Edit HTML

Kemudian masukkan semua script / kode tulisan mengikuti cursor berikut pada widget tadi.

<style type='text/css'>

/* Circle Text Styles */

#outerCircleText {

/* Optional - DO NOT SET FONT-SIZE HERE, SET IT IN THE SCRIPT */

font-style: italic;

font-weight: bold;

font-family: 'comic sans ms', verdana, arial;

color: #999;

/* End Optional */

/* Start Required - Do Not Edit */

position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}

#outerCircleText div {position: relative;}

#outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}

/* End Required */

/* End Circle Text Styles */

</style>

<script type='text/javascript'>

//<![CDATA[

/* Circling text trail- Tim Tilton

Website: http://www.tempermedia.com/

Visit: http://www.dynamicdrive.com/ for Original Source and tons of scripts

Modified Here for more flexibility and modern browser support

Modifications as first seen in http://www.dynamicdrive.com/forums/

username:jscheuer1 - This notice must remain for legal use

*/

;(function(){

// Your message here (QUOTED STRING)

var msg = "ernawati";

/* THE REST OF THE EDITABLE VALUES BELOW ARE ALL UNQUOTED NUMBERS */

// Set font's style size for calculating dimensions

// Set to number of desired pixels font size (decimal and negative numbers not allowed)

var size = 24;

// Set both to 1 for plain circle, set one of them to 2 for oval

// Other numbers & decimals can have interesting effects, keep these low (0 to 3)

var circleY = 0.75; var circleX = 2;

// The larger this divisor, the smaller the spaces between letters

// (decimals allowed, not negative numbers)

var letter_spacing = 5;

// The larger this multiplier, the bigger the circle/oval

// (decimals allowed, not negative numbers, some rounding is applied)

var diameter = 10;

// Rotation speed, set it negative if you want it to spin clockwise (decimals allowed)

var rotation = 0.4;

// This is not the rotation speed, its the reaction speed, keep low!

// Set this to 1 or a decimal less than one (decimals allowed, not negative numbers)

var speed = 0.3;

////////////////////// Stop Editing //////////////////////

if (!window.addEventListener && !window.attachEvent || !document.createElement) return;

msg = msg.split('');

var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,

ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],

o = document.createElement('div'), oi = document.createElement('div'),

b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement : document.body,

mouse = function(e){

e = e || window.event;

ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position

xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position

},

makecircle = function(){ // rotation/positioning

if(init.nopy){

o.style.top = (b || document.body).scrollTop + 'px';

o.style.left = (b || document.body).scrollLeft + 'px';

};

currStep -= rotation;

for (var d, i = n; i > -1; --i){ // makes the circle

d = document.getElementById('iemsg' + i).style;

d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) + 'px';

d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';

};

},

drag = function(){ // makes the resistance

y[0] = Y[0] += (ymouse - Y[0]) * speed;

x[0] = X[0] += (xmouse - 20 - X[0]) * speed;

for (var i = n; i > 0; --i){

y[i] = Y[i] += (y[i-1] - Y[i]) * speed;

x[i] = X[i] += (x[i-1] - X[i]) * speed;

};

makecircle();

},

init = function(){ // appends message divs, & sets initial values for positioning arrays

if(!isNaN(window.pageYOffset)){

ymouse += window.pageYOffset;

xmouse += window.pageXOffset;

} else init.nopy = true;

for (var d, i = n; i > -1; --i){

d = document.createElement('div'); d.id = 'iemsg' + i;

d.style.height = d.style.width = a + 'px';

d.appendChild(document.createTextNode(msg[i]));

oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;

};

o.appendChild(oi); document.body.appendChild(o);

setInterval(drag, 25);

},

ascroll = function(){

ymouse += window.pageYOffset;

xmouse += window.pageXOffset;

window.removeEventListener('scroll', ascroll, false);

};

o.id = 'outerCircleText'; o.style.fontSize = size + 'px';

if (window.addEventListener){

window.addEventListener('load', init, false);

document.addEventListener('mouseover', mouse, false);

document.addEventListener('mousemove', mouse, false);

if (/Apple/.test(navigator.vendor))

window.addEventListener('scroll', ascroll, false);

}

else if (window.attachEvent){

window.attachEvent('onload', init);

document.attachEvent('onmousemove', mouse);

};

})();

//]]>

</script>

Keterangan :

// Your message here (QUOTED STRING)

var msg = "ernawati";

silakah ganti tulisan ernawati dengan tulisan yang anda inginkan, karena tulisan itulah yang nantinya akan berputar-putar mengeliligi cursor.

Bagaimana cara merubah warna tulisan yang mengikuti cursor tersebut ?

Karena ada beberapa teman kita yang menanyakan hal tersebut maka akan saya tuliskan caranya.

Silakan lihat pada bagian atas kode script tulisan mengikuti cursor tersebut, maka kamu akan menemukan kode

color: #999;

Silakan ganti #999 dengan kode warna lainnya yang kamu suka (ingat hanya kode #999  yang diganti). silakan temukan kode warna yang kamu suka di Daftar Kode Warna