Minggu, 28 April 2013
Rabu, 03 April 2013
Cara membuat spoiler di blog seperti kaskus di postingan
Tombol spoiler sendiri berfungsi untuk memperpendek dan memperingkas tempat. Maka dari itu ikuti terus tutorial saya dalam membuat tombol spoiler seperti pada forum forum ternama.
Anda bisa menggunakan cara membuat spoiler ini pada postingan biasa ataupun pada widget sidebar blog. Baiklah berikut ini cara untuk membuat spoiler.
Langkah pertama yaitu seperti biasanya anda saat menulis postingan pindah ke mode >> HTML >> lalu masukkan kode spoiler dibawah ini.
<div style="margin-bottom: 2px;">Klik Show Untuk Membuka Spoiler
<div style="margin-top: 5px; text-align: center;"><input value="Show" style="margin-top: 5px; width: 60px; font-size: 10px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"> </div>
<div style="border: 1px inset ; margin: 0px; padding: 6px;"><div style="display: none;">Memasang spoiler di blog sangat mudah Inilah kode untuk membuat spoiler dengan teks indralaya tecnology community - copy right 2013 </div></div></div>
SEMOGA BERMANFAAT
TUTORIAL :
TUTORIAL :
Minggu, 03 Februari 2013
Cara membuat tulisan berjalan di blog
Cara Membuat Tulisan Berjalan di Blog
1. Tulisan bergerak dari kanan ke kiri
2. Tulisan bergerak dari kiri ke kanan
3. Teks bergerak bolak balik ( mondar - mandir ) dari kiri ke kanan
4. Teks bergerak bolak balik ( mondar - mandir ) dari kanan ke kiri
5. Teks bergerak dari atas ke bawah
6. Teks bergerak dari bawah ke atas
7. Teks bergerak mondar- mandir dari atas ke bawah
8. Teks bergerak zig - zag ( diagonal ) memantul
9. Teks bergerak zig - zag ( diagonal ) tembus
Contoh Tulisan Berjalan
Cara memasang :
1. Login ke akun blog sobat
2. Klik rancangan --> Elemen laman --> Tambah gadget --> HTML/Javascript
3. Masukkan kode marquee dari salah satu tulisan berjalan diatas
4. Klik save dan lihat hasilnya.
tambahan :
hasilnya :
Contoh Tulisan Berjalan
Sekian posting cara bikin tulisan berjalan nya....
1. Tulisan bergerak dari kanan ke kiri
<marquee direction="left" scrollamount="2" align="center">Contoh Tulisan Berjalan</marquee>
hasilnya2. Tulisan bergerak dari kiri ke kanan
<marquee direction="right" scrollamount="2" align="center"> Contoh Tulisan Berjalan </marquee>
hasilnya3. Teks bergerak bolak balik ( mondar - mandir ) dari kiri ke kanan
<marquee direction="left" scrollamount="2" align="center" behavior="alternate"> Contoh Tulisan Berjalan </marquee>
hasilnya4. Teks bergerak bolak balik ( mondar - mandir ) dari kanan ke kiri
<marquee direction="right" scrollamount="2" align="center" behavior="alternate"> Contoh Tulisan Berjalan </marquee>
hasilnya5. Teks bergerak dari atas ke bawah
<marquee direction="down" scrollamount="2" align="center"> Contoh Tulisan Berjalan </marquee>
hasilnya6. Teks bergerak dari bawah ke atas
<marquee direction="up" scrollamount="2" align="center"> Contoh Tulisan Berjalan </marquee>
hasilnya7. Teks bergerak mondar- mandir dari atas ke bawah
<marquee direction="up" scrollamount="2" align="center" behavior="alternate"> Contoh Tulisan Berjalan </marquee>
hasilnya8. Teks bergerak zig - zag ( diagonal ) memantul
<center><marquee
direction="up" scrollamount="2" align="center" behavior="alternate"
width="90%"><marquee direction="right" behavior="alternate">
Contoh Tulisan Berjalan </marquee></marquee></center>
hasilnya9. Teks bergerak zig - zag ( diagonal ) tembus
<center><marquee
direction="up" scrollamount="2" align="center" behavior="alternate"
width="90%"><marquee direction="right"> Contoh Tulisan Berjalan
</marquee></marquee></center>
hasilnyaCara memasang :
1. Login ke akun blog sobat
2. Klik rancangan --> Elemen laman --> Tambah gadget --> HTML/Javascript
3. Masukkan kode marquee dari salah satu tulisan berjalan diatas
4. Klik save dan lihat hasilnya.
tambahan :
- Direction : untuk mengatur pola gerakan teks (left, right, up dan down)
- Scrollamount : untuk mengatur kecepatan gerakan teks. Naikkan angkanya ( dari 2 menjadi 3 ) untuk mempercepat gerakan dan sebaliknya.
- Behavior ( scroll/slide/alternate ): untuk mengatur prilaku gerakan.
- Untuk menambahkan background, padding, border, color, dll pada marquee, silahkan sisipkan kode marquee antara kode berikut
<div style="background: #000000; border: 2px solid #FF0000; color: white; font-size: 20px; font-weight: bold; letter-spacing: 0.5em; padding: 15px;">
<marquee direction="left" scrollamount="6" align="center">Contoh Tulisan Berjalan</marquee>
</div>
hasilnya :
- Untuk menyisipkan link pada marquee, gunakan kode berikut :
<div style="background: #FFFFFF; border: 2px solid #FF0000; color: black; font-size: 20px; font-weight: bold; letter-spacing: 0.2em; padding: 15px;">
<marquee direction="left" scrollamount="6" align="center"><a href="http://rezha-str.blogspot.com/2013/02/kumpulan-animasi-untuk-blog.html/"/>kumpulan animasi untuk blog</a></marquee>
</div>
catatan :hasilnya :
ganti tulisan yang berwana biru dengan Url yang di inginkan.
- Contoh lain penggunaan link pada marquee yaitu dengan menggunakan kode berikut :
<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="100%" height="100" align="center">
<a href="http://rezha-str.blogspot.com/2013/02/kumpulan-animasi-untuk-blog.html/">kumpulan animasi</a><br/>
<a href="http://rezha-str.blogspot.com/2013/02/cara-membuat-efek-salju-pada-blog-itc.html">cara membuat Efek salju</a><br/>
<a href="http://rezha-str.blogspot.com/2013/02/cara-membuat-link-berwarna-saat-di.html">cara membuat tulisan berwarna-warni</a><br/>
</marquee>
catatan :Hasilnya :
kode yang di cetak tebal adalah perintah pada teks untuk terhenti ketika di lewati pointer
Sekian posting cara bikin tulisan berjalan nya....
Jumat, 01 Februari 2013
cara membuat screen sever ..::I.T.C::..
Cara Pemasangan di Blog
1.
Silahkan sobat >> Masuk/Login >> Ke blog sobat.
2.
Pada "Dashboard" tampilan blogger baru, Pilih dan klik menu
>> Tata
Letak >> klik
>> Tambah Gadget >> Pilih dan klik >> HTML/JavaScript.
3.
Kemudian Masukkan semua Kode CSS berikut pada kotak HTML/JavaScript.
<style type="text/css">body .saving{position:
fixed;width: 100%;top: 0;left:0;height: 100%;opacity: 0.98;filter:
alpha(opacity=98);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=98)";background:
#000;border-bottom: 3px solid transparent;z-index: 999999;-o-transition: all 3s
ease-in-out 10s;-moz-transition: all 3s ease-in-out 10s;-webkit-transition: all
3s ease-in-out 10s;}body:hover .saving {opacity: 0.0;height:0.001%;filter:
alpha(opacity=0);-ms-filter:
"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";background:
#0a7f01;border-bottom: 5px solid #333;-o-transition: opacity 2s ease-in-out
2.5s, background-color 3s linear 0.5s, height 1s ease-in 1.8s;-moz-transition:
opacity 2s ease-in-out 2.5s, background 3s linear 0.5s, height 1s ease-in
1.8s;-webkit-transition: opacity 2s ease-in-out 2.5s, background 3s linear
0.5s, height 1s ease-in 1.8s;}body .saving p.esm1{margin: 0;padding: 0;width:
92%;background: transparent;font-size: 100px;font-family: "Serif",
Times New Roman;color: #FF0000;text-shadow: 0 0 2px #ccc, 0 -5px 4px #ff3, 2px
-6px 6px #fd3, -2px -8px 9px #f40, 2px -10px 10px #f10;position:
relative;margin-top: 200px;line-height: 20px;font-weight: bold;text-align:
center;border: 30px solid transparent;border-radius: 20px;-moz-border-radius:
20px;-webkit-border-radius: 20px;-o-transition: -o-transform 5s ease-out 8s,
background-color 4s ease-out 12s;-moz-transition: -moz-transform 5s ease-out
8s, background 4s ease-out 12s;-webkit-transition: -webkit-transform 5s
ease-out 8s, background 4s ease-out 12s;}body:hover .saving p.esm1{font-size:
10px;color: red;width: 25%;margin: 340px 0 0 300px;padding: 25px;background:
#aaa;border: 20px solid #888;border-radius: 170px;-moz-border-radius:
170px;-webkit-border-radius: 170px;-o-transform:translate(600px,-500px) rotate(360deg)
scale(0.2);-moz-transform:translate(600px,-500px) rotate(360deg)
scale(0.2);-webkit-transform:translate(600px,-500px) rotate(360deg)
scale(0.2);-o-transition: font 1.1s 0.1s, width 1.3s 0.4s, margin-left 0.8s
1.2s, -o-transform 1.2s linear 1.5s, background-color 0.6s ease-in 0.6s,
margin-top 1.2s ease-in 0.5s, border 3s ease-in;-moz-transition: font 1.1s
0.1s, width 1.3s 0.4s, margin-left 0.8s 1.2s, -moz-transform 1.2s linear 1.5s,
background 0.6s ease-in 0.6s, margin-top 1.2s ease-in 0.5s, border 3s
ease-in;-webkit-transition: font 1.1s 0.1s, width 1.7s 0s, margin-left 0.8s
1.2s, -webkit-transform 1.2s linear 1.5s, background 0.6s ease-in 0.6s,
margin-top 1s ease-in 0.5s, border 3s ease-in, -webkit-border-radius 3s
ease-in;}.saving p span.esm2{font-size: 18px;opacity: 0.5;filter:
alpha(opacity=50);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";display:
block;text-align: center;width: 300px;margin: -10px auto; font-weight:
normal;padding: 2px 8px;background: #000;border: 1px solid #333;border-radius:
0;-moz-border-radius: 0;-webkit-border-radius: 0;color: #0000FF;text-shadow:
none;font-family: Arial, Helvetica, sans-serif;-o-transition: 1s
ease-out;-moz-transition: 1s ease-out;-webkit-transition: 1s
ease-out;}.saving:hover p span.esm2{font-size: 10px;width: 200px;padding:
0;}.saving p span.esm3{color: #ccc;font-family: "Tahoma", Arial,
Helvetica;display: block;margin:10px auto;background: url
http://i964.photobucket.com/albums/ae124...) left center repeat-x;background:
-moz-linear-gradient(top,#666,#111);background: -webkit-gradient(linear,0%
top,0% bottom,from(#111),to(#666));opacity: 0.6;filter:
alpha(opacity=60);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";width:
250px;text-shadow: 1px 1px 1px #000;border: 1px solid #333;border-radius:
4px;padding:2px 10px;-moz-border-radius: 4px;-webkit-border-radius:
4px;font-size: 12px;font-weight: normal;line-height: 16px;}.saving .by_kucopas
{margin-left: 30px;text-align: center;color: #015828;font-size:
12px;font-weight: normal;position: absolute;bottom: 30px;width: 100%;height:
20px;left: 0;}.saving .by_kucopas span.esm4 {color:
#aaa;font-style:italic;font-size:14px;font-weight:bold;text-transform:uppercase;}#recpost
{width:210px;overflow: hidden;height: 327px;float: right;margin-top:
10px;padding: 4px 2px;background: transparent;border: 1px solid
transparent;border-radius: 10px;-moz-border-radius: 10px;-webkit-border-radius:
10px;-o-transition: all 1.5s ease-out;-moz-transition: all 1.5s
ease-out;-webkit-transition: all 1.5s ease-out;}</style>
<div class='saving'>
<p class='esm1'>Rezha I.T.C<br/>
<span class='esm2'>Energy Saving Mode using
CSS3</span><br/><br/>
<span class='esm3'>Move your mouse to go back to the page!<br/>Gerakkan mouse anda dan silahkan baca kembali posting kami!</span></p>
<div class='by_kucopas'>Support design by:
<span class='esm4'>Indralaya taechnology community</span> -
CopyRight 2013</div>
</div>
Keterangan:
- Sobat bisa mengedit kode CSS tersebut dengan catatan
bila sudah mahir mengenai kode CSS.
- Warna HIJAU silahkan sobat ganti dengan Nama sobat atau Nama blog sobat.
- Warna MERAH silahkan
sobat ganti dengan kata-kata atau tulisan sesuai dengan keinginan sobat.
4. Setelah sobat selesai
mengganti dan mengedit kode CSS diatas, Jangan lupa kilk >> Simpan dan nikmati hasilnya screensaver yang sudah
terpasang di blog, Pada semua halaman blog sobat.
MUDAH BANGET KOK :D
Kumpulan Animasi Untuk Blog
Cara Memasang Animasi di Blog
1.Tuyul ketawa
Script:
<div style="position: fixed; bottom: 0px; right: 20px;width:82px;height:160px;"><a href="http://content.sweetim.com/sim/cpie/emoticons/0002031F.gif" target="_blank"><img src="http://content.sweetim.com/sim/cpie/emoticons/0002031F.gif" alt="animasi blog" /></a><small><center><a href="http://rezha-str.blogspot.com" target="_blank">Animasi Blog</a></center></small></div>
2. Tuyul baring
Script :
<div style="position: fixed; bottom: 0px; left: 20px;width:120px;height:100px;"><a href="http://content.sweetim.com/sim/cpie/emoticons/0002031E.gif" target="_blank"><img alt="animasi blog" src="http://content.sweetim.com/sim/cpie/emoticons/0002031E.gif" title="Click to get more." /></a><small><center><a href="http://rezha-str.blogspot.com" target="_blank">Animasi Blog</a></center></small></div>
3. Helikopter
Script :
<div style="position: fixed; bottom: 0px; left: 10px;width:110px;height:130px;"><a href="http://content.sweetim.com/sim/cpie/emoticons/00020389.gif" target="_blank"><img alt="animasi blog" src="http://content.sweetim.com/sim/cpie/emoticons/00020389.gif" title="Click to get more." /></a><small><center><a href="http://rezha-str.blogspot.com" target="_blank">Animasi Blog</a></center></small></div>
4.Gajah loncat
Script:
<div style="position: fixed; bottom: 0px; left: 20px;width:120px;height:160px;"><a href="http://content.sweetim.com/sim/cpie/emoticons/000203BC.gif" target="_blank"><img alt="animasi blog" src="http://content.sweetim.com/sim/cpie/emoticons/000203BC.gif" title="Click to get more." /></a><small><center><a href="http://rezha-str.blogspot.com" target="_blank">Animasi Blog</a></center></small></div>
5. Boring
Script :
<div style="position: fixed; bottom: 0px; left: 20px;width:80px;height:120px;"><a href="http://content.sweetim.com/sim/cpie/emoticons/0002016B.gif" target="_blank"><img src="http://content.sweetim.com/sim/cpie/emoticons/0002016B.gif"alt="animasi blog" /></a><small><center><a href="http://rezha-str.blogspot.com" target="_blank">Animasi Blog</a></center></small></div>
6.Boneka joget
Script :
<div style="position: fixed; bottom: 0px; left: 20px;width:82px;height:160px;"><a href="http://content.sweetim.com/sim/cpie/emoticons/0002013F.gif" target="_blank"><img src="http://content.sweetim.com/sim/cpie/emoticons/0002013F.gif" alt="animasi blog" /></a><small><center><a href="http://rezha-str.blogspot.com" target="_blank">Animasi Blog</a></center></small></div>
7. Panda main bola
Script :
<div style="position: fixed; bottom: 0px; right: 30px;width:160px;height:160px;"><a href="http://content.sweetim.com/sim/cpie/emoticons/0002032D.gif" target="_blank"><img src="http://content.sweetim.com/sim/cpie/emoticons/0002032D.gif" alt="animasi blog" /></a><small><center><a href="http://rezha-str.blogspot.com" target="_blank">Animasi Blog</a></center></small></div>
8. Panda biru
Script
<div style="position: fixed; bottom: 0px; left: 20px;width:100px;height:100px;"><a href="http://content.sweetim.com/sim/cpie/emoticons/0002033D.gif" target="_blank"><img alt="animasi blog" src="http://content.sweetim.com/sim/cpie/emoticons/0002033D.gif" title="Click to get more." /></a>
<small><center><a href="http://rezha-str.blogspot.com" target="_blank">Animasi Blog</a></center></small></div>
9.Pinguin
Script :
<div style="position: fixed; bottom: 0px; left: 10px;width:110px;height:130px;"><a href="http://content.sweetim.com/sim/cpie/emoticons/00020484.gif" target="_blank"><img alt="animasi blog" src="http://content.sweetim.com/sim/cpie/emoticons/00020484.gif" title="Click to get more." /></a><small><center><a href="http://rezha-str.blogspot.com" target="_blank">Animasi Blog</a></center></small></div>
10. Panah
Script:
<div style="position: fixed; bottom: 0px; left: 10px;width:210px;height:120px;"><a href="http://content.sweetim.com/sim/cpie/emoticons/00020236.gif" target="_blank"><img alt="animasi blog" src="http://content.sweetim.com/sim/cpie/emoticons/00020236.gif" title="Click to get more." /></a><small><center><a href="http://rezha-str.blogspot.com" target="_blank">Animasi Blog</a></center></small></div>
11.Dragon
Script:
<div style="position: fixed; bottom: 0px; left: 10px;width:150px;height:130px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img alt="animasi blog" src="http://content.sweetim.com/sim/cpie/emoticons/00020478.gif" title="Click to get more." /></a><small><center><a href="http://rezha-str.blogspot.com" target="_blank">Animasi Blog</a></center></small></div>
12.Kucing tidur
Script :
<div style="position: fixed; bottom: 0px; left: 10px;width:110px;height:140px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img alt="animasi blog" src="http://content.sweetim.com/sim/cpie/emoticons/000203C0.gif" title="Click to get more." /></a><small><center><a href="http://rezha-str.blogspot.com" target="_blank">Animasi Blog</a></center></small></div>
13. Bunga
Script :
<div style="position: fixed; bottom: 0px; left: 10px;width:100px;height:160px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img alt="animasi blog" src="http://content.sweetim.com/sim/cpie/emoticons/00020322.gif" title="Click to get more." /></a><small><center><a href="http://rezha-str.blogspot.com" target="_blank">Animasi Blog</a></center></small></div>
14.Anjing laut
Script:
<div style="position: fixed; bottom: 0px; left: 10px;width:110px;height:160px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img alt="animasi blog" src="http://content.sweetim.com/sim/cpie/emoticons/000203B5.gif" title="Click to get more." /></a><small><center><a href="http://rezha-str.blogspot.com" target="_blank">Animasi Blog</a></center></small></div>
15.Lumba-lumba
Script :
<div style="position: fixed; bottom: 0px; left: 10px;width:110px;height:160px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img alt="animasi blog" src="http://content.sweetim.com/sim/cpie/emoticons/000203BA.gif" title="Click to get more." /></a><small><center><a href="http://rezha-str.blogspot.com" target="_blank">Animasi Blog</a></center></small></div>
16.Kelinci
Script :
<div style="position: fixed; bottom: 0px; left: 10px;width:125px;height:160px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img alt="animasi blog" src="http://content.sweetim.com/sim/cpie/emoticons/000203A0.gif" title="Click to get more." /></a><small><center><a href="http://rezha-str.blogspot.com" target="_blank">Animasi Blog</a></center></small></div>
17.Ikan
Script :
<div style="position: fixed; bottom: 0px; left: 10px;width:100px;height:130px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img alt="animasi blog" src="http://content.sweetim.com/sim/cpie/emoticons/00020479.gif" title="Click to get more." /></a><small><center><a href="http://rezha-str.blogspot.com" target="_blank">Animasi Blog</a></center></small></div>
18. Pintu
Script:
<div style="position: fixed; bottom: 0px; left: 10px;width:125px;height:160px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img alt="animasi blog" src="http://content.sweetim.com/sim/cpie/emoticons/000203D1.gif" title="Click to get more." /></a><small><center><a href="http://rezha-str.blogspot.com" target="_blank">Animasi Blog</a></center></small></div>
19.Berteriak
Script:
<div style="position: fixed; bottom: 0px; left: 10px;width:125px;height:160px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img alt="animasi blog" src="http://content.sweetim.com/sim/cpie/emoticons/00020309.gif" title="Click to get more." /></a><small><center><a href="http://rezha-str.blogspot.com" target="_blank">Animasi Blog</a></center></small></div>
20.Terkurung
Script:
<div style="position: fixed; bottom: 0px; left: 10px;width:125px;height:160px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img alt="animasi blog" src="http://content.sweetim.com/sim/cpie/emoticons/0002020A.gif" title="Click to get more." /></a><small><center><a href="http://rezha-str.blogspot.com" target="_blank">Animasi Blog</a></center></small></div>
21.Sincelery
Script:
<div style="position: fixed; bottom: 0px; left: 10px;width:125px;height:160px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img alt="animasi blog" src="http://content.sweetim.com/sim/cpie/emoticons/000201C3.gif" title="Click to get more." /></a><small><center><a href="http://rezha-str.blogspot.com" target="_blank">Animasi Blog</a></center></small></div>
22.Menangis
Script:
<div style="position: fixed; bottom: 0px; left: 10px;width:125px;height:160px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img alt="animasi blog" src="http://content.sweetim.com/sim/cpie/emoticons/00020461.gif" title="Click to get more." /></a><small><center><a href="http://rezha-str.blogspot.com" target="_blank">Animasi Blog</a></center></small></div>
23.Champion Ship
Script:
<div style="position: fixed; bottom: 0px; left: 10px;width:125px;height:160px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img alt="animasi blog" src="http://content.sweetim.com/sim/cpie/emoticons/0002068C.gif" title="Click to get more." /></a><small><center><a href="http://rezha-str.blogspot.com" target="_blank">Animasi Blog</a></center></small></div>
24. Sundul Bola
Script:
<div style="position: fixed; bottom: 0px; left: 10px;width:125px;height:160px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img alt="animasi blog" src="http://content.sweetim.com/sim/cpie/emoticons/000203CF.gif" title="Click to get more." /></a><small><center><a href="http://rezha-str.blogspot.com" target="_blank">Animasi Blog</a></center></small></div>
25. Lebah
Script:
<div style="position: fixed; bottom: 0px; left: 10px;width:125px;height:160px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img alt="animasi blog" src="http://content.sweetim.com/sim/cpie/emoticons/0002048F.gif" title="Click to get more." /></a><small><center><a href="http://rezha-str.blogspot.com" target="_blank">Animasi Blog</a></center></small></div>
26. Kipas Angin
Script:
<div style="position: fixed; bottom: 0px; left: 10px;width:125px;height:160px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img alt="animasi blog" src="http://content.sweetim.com/sim/cpie/emoticons/000203E0.gif" title="Click to get more." /></a><small><center><a href="http://rezha-str.blogspot.com" target="_blank">Animasi Blog</a></center></small></div>
27. Telur Ayam Menetas
Script:
<div style="position: fixed; bottom: 0px; left: 10px;width:125px;height:160px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img alt="animasi blog" src="http://content.sweetim.com/sim/cpie/emoticons/00020540.gif" title="Click to get more." /></a><small><center><a href="http://rezha-str.blogspot.com" target="_blank">Animasi Blog</a></center></small></div>
28.Ayam Bertelur
Script:
<div style="position: fixed; bottom: 0px; left: 10px;width:125px;height:160px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img alt="animasi blog" src="http://content.sweetim.com/sim/cpie/emoticons/00020541.gif" title="Click to get more." /></a><small><center><a href="http://rezha-str.blogspot.com" target="_blank">Animasi Blog</a></center></small></div>
27. Beruang Memancing Sambil Tidur
Script:
<div style="position: fixed; bottom: 0px; left: 10px;width:125px;height:160px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img alt="animasi blog" src="http://content.sweetim.com/sim/cpie/emoticons/00020486.gif" title="Click to get more." /></a><small><center><a href="http://rezha-str.blogspot.com" target="_blank">Animasi Blog</a></center></small></div>
28.Kiper Gawang
Script:
<div style="position: fixed; bottom: 0px; left: 10px;width:125px;height:160px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img alt="animasi blog" src="http://content.sweetim.com/sim/cpie/emoticons/00020686.gif" title="Click to get more." /></a><small><center><a href="http://rezha-str.blogspot.com" target="_blank">Animasi Blog</a></center></small></div>
28.Kunai Strike
Script:
<div style="position: fixed; bottom: 0px; left: 10px;width:150px;height:277px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img alt="animasi blog" src="http://images3.wikia.nocookie.net/__cb20100917082342/streetfighter/images/9/92/Kunai.gif" title="Click to get more." /></a><small><center><a href="http://rezha-str.blogspot.com" target="_blank">Animasi Blog</a></center></small></div>
29.Gundam lari
Script:
<div style="position: fixed; bottom: 0px; left: 10px;width:125px;height:160px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img alt="animasi blog" src="http://i1108.photobucket.com/albums/h405/christian410/11-1.gif" title="Click to get more." /></a><small><center><a href="http://rezha-str.blogspot.com" target="_blank">Animasi Blog</a></center></small></div>
30.Tendangan Gundam
Script:
<div style="position: fixed; bottom: 0px; left: 10px;width:140px;height:190px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img alt="animasi blog" src="http://i1108.photobucket.com/albums/h405/christian410/13-1.gif" title="Click to get more." /></a><small><center><a href="http://rezha-str.blogspot.com" target="_blank">Animasi Blog</a></center></small></div>
31.Gundam Fight
Script:
<div style="position: fixed; bottom: 0px; left: 10px;width:150px;height:277px;"><img alt="animasi blog" src="http://i1108.photobucket.com/albums/h405/christian410/very_cool_fight_eypon_death.gif" title="Click to get more." /><small><center><a href="http://rezha-str.blogspot.com" target="_blank">Animasi Blog</a></center></small></div>
32.Gundam Storm
Script:
<div style="position: fixed; bottom: 0px; left: 10px;width:300px;height:545px;"><a href="http://rezha-str.blogspot.com" target="_blank"><img alt="animasi blog" src="http://i1108.photobucket.com/albums/h405/christian410/godvsmaxterextremeworkout.gif" title="Click to get more." /></a><small><center><a href="http://christiantatelu.blogspot.com" target="_blank">Animasi Blog</a></center></small></div>
33.Burung Terbang
Script:
<div style="position: fixed; top: 0px; left: 10px;width:225px;height:160px;"><a href="http://rezha-str.blogspot.com" target="_blank"><img alt="animasi blog" src="http://i567.photobucket.com/albums/ss114/fatiasa/bird_ann.gif" title="Click to get more." /></a></div>
34. Cewek Bergoyang
Script :
<div style="position: fixed; bottom: 0px; left: 10px;width:110px;height:130px;"><a href="http://www.javapic.com/images/97750430929323597589.gif" target="_blank"><img alt="animasi blog" src="http://www.javapic.com/images/97750430929323597589.gif" title="Click to get more." /></a><small><center><a href="http://rezha-str.blogspot.com" target="_blank">Animasi Blog</a></center></small></div>
Cara Pemasangan :
1. Log in ke akun blog sobat.
2. Klik Rancangan --> Elemen Laman --> Tambah Gadget --> HTML Javascript.
3. Masukkan script ke dalam kotak yang di sediakan.
4. Kemudian klik save.
Tambahan :
- Untuk mengubah posisi animasi dari kanan ke kiri, tinggal mengubah kode right dengan left. begitu juga sebaliknya.
- Untuk mengubah posisi animasi dari bawah ke atas, sobat tinggal merubah kode bottom dengan kode Top
SANGAT SIMPLE
SEMOGA BERMANFAAT
Cara Membuat Efek Salju Pada Blog ..::I.T.C::..
Note: blog
yang diberi efek salju sebaiknya jangan berlatar belakang putih.. nanti
saljunya nggak kelihatan :) Paling pas kalau template/warna latarnya
gelap, jadi lebih .. gimana gitu :)
Langsung aja caranya..
1. Masuk Blog sobat
2. Rancangan ---> Elemen Laman ---> Tambah Gadget
3. Pilih HTML/Javascript
4. Copy script di bawah ini dan masukkan ke kolom yang sudah tersedia
<script src="http://masterendi.googlecode.com/files/salju.js"></script>
5. Simpan/Save
Lihat ya. dan jangan main lama-lama nanti sakit, soalnya sekarang sedang musim dingin - ada salju.
SANGAT SIMPEL
SEMOGA BERMANFAAT
Cara Membuat Link Berwarna Saat Di Sentuh Cursor ..::I.T.C::..
Oke, Dibawah ini Tutorial Cara Membuat Link Bewarna-Warni Saat Di Sentuh Kursor :
1.login Akun Blog Sobat [Blogger]
2.Masuk Ke Template
3.Pilih Edit Html
4.Klik Lanjutkan
5.Centang Expandt Widget Template
6.Cari Kode <b:skin><![CDATA[
7.Copykan Kode Berikut Tepat di atas kode <b:skin><![CDATA[
<script src='http://achmad46.googlepages.com/rainbow.js'>
</script>
8.Klik Pratinjau Terlebihh dahulu, Jika Tidak terjadi Apa-Apa pada blog sobat, baru Klik Save .
SANGAT SIMPEL
SEMOGA BERMANFAAT
Rabu, 09 Januari 2013
...:::Cara Memasang change background pada blog:::...
laptop ane susah kalo buka youtube :D
nihh video tutorial nya ada di youtube : http://www.youtube.com/watch?v=1BuJaHA0uXI&feature=youtu.be
haloo sobat :D
kali ini saya akan share cara memasang change background pada blog :D
oke kita lanjutkan tutorial memasang background berubah-ubah.
Langkah :
Login Blogger Dashboard --> Design --> Add A Gadget --> HTML/Javascript.
Copy dan paste kod di bawah pada content HTML/Javascript.
<div class="widget-content">
<center><blink style="color: rgb(0, 102, 0);"><span style="font-weight: bold; color: rgb(0, 153, 0);">Change Background of This Blog!</span></blink><br /><br />
<center><select onchange="document.body.style.background = this.value;this.style.background = this.value;" name="DADcbgc" title="Change Background Image" width="185" height="30">
<option value="url() repeat center center fixed" />None
<option value="url(http://cdn.indowebster.com/www42.indowebster.com/7dd2ae51f4b0cb792d3a435dc953f5cc_thumbnail.gif) repeat center center fixed" />Red Matrix
<option value="url(http://yahyarezpectors.files.wordpress.com/2011/01/sharingan_wheel_by_neronin2.gif) repeat center center fixed" />Sharingan
<option value="url(http://data0.eklablog.fr/hinata/mod_article214242.gif) repeat center center fixed" />Sharingan 2
<option value="url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWU3m_AHar91o7xVUSG-fTpSwGv4ni7rhk92yMQ7UcMVKJgmBgL4NXrnX-kxxGnYFjcuFGFV5dm-YhXHROrBEnNtOStn8GYMQW_qRw9kPtvYZPY6loCzvmYp9DvcFiUZ3EsmrD10R01p0L/s1600/death-note%25284%2529.jpg) repeat center center fixed" />Death Note 1
<option value="url(http://i469.photobucket.com/albums/rr57/dragonknight0000039/ae/death20note20L.jpg) repeat center center fixed" />L Lawliet 1
<option value="url(http://lh5.googleusercontent.com/_GaKwmMcf4N4/TZF_GOqPR_I/AAAAAAAAEsY/iGS-uTIVDs8/DADbg.JPG) repeat center center fixed" />Hidden Leaf
<option value="url(http://lh4.googleusercontent.com/_GaKwmMcf4N4/TZGC4NlmmMI/AAAAAAAAEvk/cma5mtW-beU/DADbg2.JPG) repeat center center fixed" />Rikimaru
<option value="url(http://lh6.googleusercontent.com/_GaKwmMcf4N4/TZGC24bJuCI/AAAAAAAAEvg/O1mDH3LU91w/DADbg0.jpg) repeat center center fixed" />Yu-Gi-Oh!
<option value="url(http://lh5.googleusercontent.com/_GaKwmMcf4N4/TZGDGbOqsnI/AAAAAAAAEwI/FWAbOOZu2go/DAD1.jpg) repeat center center fixed" />Deidara
<option value="url(http://lh4.googleusercontent.com/_GaKwmMcf4N4/TZGC7eK9TtI/AAAAAAAAEvw/Ly5L0UA3D4s/DADcloud.gif) repeat center center fixed" />Akatsuki Cloud
<option value="url(http://lh5.googleusercontent.com/_GaKwmMcf4N4/TZGC7UA67RI/AAAAAAAAEv0/ehJ-oez_akU/DADbluematrix.gif) repeat center center fixed" />Blue Matrix
<option value="url(http://lh3.googleusercontent.com/_GaKwmMcf4N4/TZGC9O9ZNUI/AAAAAAAAEv8/Idjb8xIrw60/DADgreenmatrix.gif) repeat center center fixed" />Green Matrix
<option value="url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqZS-JoZQwkz-8Vznyd2WCCwaBi_dhL5D9GKUpDfgBN1qP8ul-cABgWwRMHMUFz4N-0YzBNrRFxbDlhKBpJVC1elc1WjzofER_OLk7ynepiFJoP_mTxw73x-yEjfbRrgNGEPAcOWAblgtM/s1600/lost_saga_eu_trailer.jpg) repeat center center fixed" />Kage Ninja
</select></center></center>
</div><br/><center><a href="http://rezha-str.blogspot.com/2013/01/cara-memasang-change-background-pada.html" target="_blank">Pasang Seperti Ini</a></center>
klik Save.
tereng!!! sekarang blog agan uda bisa dipilih-pilih background nya, untuk judul nya boleh kosong atau boleh juga di isi, saya sarankan di simpan di bawah header halaman. jadi pengunjung bisa memilih nya.
nihh video tutorial nya ada di youtube : http://www.youtube.com/watch?v=1BuJaHA0uXI&feature=youtu.be
haloo sobat :D
kali ini saya akan share cara memasang change background pada blog :D
oke kita lanjutkan tutorial memasang background berubah-ubah.
Langkah :
Login Blogger Dashboard --> Design --> Add A Gadget --> HTML/Javascript.
Copy dan paste kod di bawah pada content HTML/Javascript.
<div class="widget-content">
<center><blink style="color: rgb(0, 102, 0);"><span style="font-weight: bold; color: rgb(0, 153, 0);">Change Background of This Blog!</span></blink><br /><br />
<center><select onchange="document.body.style.background = this.value;this.style.background = this.value;" name="DADcbgc" title="Change Background Image" width="185" height="30">
<option value="url() repeat center center fixed" />None
<option value="url(http://cdn.indowebster.com/www42.indowebster.com/7dd2ae51f4b0cb792d3a435dc953f5cc_thumbnail.gif) repeat center center fixed" />Red Matrix
<option value="url(http://yahyarezpectors.files.wordpress.com/2011/01/sharingan_wheel_by_neronin2.gif) repeat center center fixed" />Sharingan
<option value="url(http://data0.eklablog.fr/hinata/mod_article214242.gif) repeat center center fixed" />Sharingan 2
<option value="url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWU3m_AHar91o7xVUSG-fTpSwGv4ni7rhk92yMQ7UcMVKJgmBgL4NXrnX-kxxGnYFjcuFGFV5dm-YhXHROrBEnNtOStn8GYMQW_qRw9kPtvYZPY6loCzvmYp9DvcFiUZ3EsmrD10R01p0L/s1600/death-note%25284%2529.jpg) repeat center center fixed" />Death Note 1
<option value="url(http://i469.photobucket.com/albums/rr57/dragonknight0000039/ae/death20note20L.jpg) repeat center center fixed" />L Lawliet 1
<option value="url(http://lh5.googleusercontent.com/_GaKwmMcf4N4/TZF_GOqPR_I/AAAAAAAAEsY/iGS-uTIVDs8/DADbg.JPG) repeat center center fixed" />Hidden Leaf
<option value="url(http://lh4.googleusercontent.com/_GaKwmMcf4N4/TZGC4NlmmMI/AAAAAAAAEvk/cma5mtW-beU/DADbg2.JPG) repeat center center fixed" />Rikimaru
<option value="url(http://lh6.googleusercontent.com/_GaKwmMcf4N4/TZGC24bJuCI/AAAAAAAAEvg/O1mDH3LU91w/DADbg0.jpg) repeat center center fixed" />Yu-Gi-Oh!
<option value="url(http://lh5.googleusercontent.com/_GaKwmMcf4N4/TZGDGbOqsnI/AAAAAAAAEwI/FWAbOOZu2go/DAD1.jpg) repeat center center fixed" />Deidara
<option value="url(http://lh4.googleusercontent.com/_GaKwmMcf4N4/TZGC7eK9TtI/AAAAAAAAEvw/Ly5L0UA3D4s/DADcloud.gif) repeat center center fixed" />Akatsuki Cloud
<option value="url(http://lh5.googleusercontent.com/_GaKwmMcf4N4/TZGC7UA67RI/AAAAAAAAEv0/ehJ-oez_akU/DADbluematrix.gif) repeat center center fixed" />Blue Matrix
<option value="url(http://lh3.googleusercontent.com/_GaKwmMcf4N4/TZGC9O9ZNUI/AAAAAAAAEv8/Idjb8xIrw60/DADgreenmatrix.gif) repeat center center fixed" />Green Matrix
<option value="url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqZS-JoZQwkz-8Vznyd2WCCwaBi_dhL5D9GKUpDfgBN1qP8ul-cABgWwRMHMUFz4N-0YzBNrRFxbDlhKBpJVC1elc1WjzofER_OLk7ynepiFJoP_mTxw73x-yEjfbRrgNGEPAcOWAblgtM/s1600/lost_saga_eu_trailer.jpg) repeat center center fixed" />Kage Ninja
</select></center></center>
</div><br/><center><a href="http://rezha-str.blogspot.com/2013/01/cara-memasang-change-background-pada.html" target="_blank">Pasang Seperti Ini</a></center>
klik Save.
tereng!!! sekarang blog agan uda bisa dipilih-pilih background nya, untuk judul nya boleh kosong atau boleh juga di isi, saya sarankan di simpan di bawah header halaman. jadi pengunjung bisa memilih nya.
SEMOGA BERMANFAAT
TUTORIAL :
TUTORIAL :
..:Cara Membuat Blog Berputar di Layar Computer :..
Halloo Sobat :D
kali ini saya akan share cara membuat blog berputar di layar computer :D
Langsung aja yuuk ?
Copy Kode Berikut di HTML Kemudian Tambahkan Gatget Setelah Itu Pilih Java Skrip / HTML
Setelh Itu Paste kode Tadi..Selamat Mencoba Shobat :D
<script>
//<![CDATA[
window.scrollBy(0,0)
window.resizeTo(0,0)
window.moveTo(0,0)
//setInterval("move()",10);
setTimeout("move()", 1);
var mxm=100000
var mym=100000
var mx=100000
var my=100000
var sv=70
var status=1
var szx=0
var szy=0
var c=25
var n=0
var sm=10
var cycle=2
var done=2
function move()
{
if (status == 1)
{
mxm=mxm/1.01
mym=mym/1.01
mx=mx+mxm
my=my-mym
mxm=mxm+(500-mx)/5
mym=mym-(400-my)/5
window.moveTo(mx,my)
rmxm=Math.round(mxm/1)
rmym=Math.round(mym/2)
if (rmxm == 0)
{
if (rmym == 0)
{
status=2
}
}
}
if (status == 2)
{
sv=sv/1.1
scrratio=1+1/3
mx=mx-sv*scrratio/2
my=my-sv/2
szx=szx+sv*scrratio
szy=szy+sv
window.moveTo(mx,my)
window.resizeTo(szx,szy)
if (sv < 0.1)
{
status=3
}
}
if (status == 3)
{
document.fgColor=0xffffFF
c=c-16
if (c<0)
{status=8}
}
if (status == 4)
{
c=c+16
document.bgColor=c*65536
document.fgColor=(255-c)*65536
if (c > 239)
{status=5}
}
if (status == 5)
{
c=c-16
document.bgColor=c*65536
document.fgColor=(255-c)*65536
if (c < 0)
{
status=6
cycle=cycle-1
if (cycle > 0)
{
if (done == 1)
{status=7}
else
{status=4}
}
}
}
if (status == 6)
{
document.title = "Cljck"
alert("Cljck")
cycle=2
status=4
done=1
}
if (status == 7)
{
c=c+4
document.bgColor=c*65536
document.fgColor=(255-c)*65536
if (c > 128)
{status=8}
}
if (status == 8)
{
window.moveTo(0,0)
sx=screen.availWidth
sy=screen.availHeight
window.resizeTo(sx,sy)
status=9
}
var timer=setTimeout("move()",0)
}
//]]>
</script>
kali ini saya akan share cara membuat blog berputar di layar computer :D
Langsung aja yuuk ?
Copy Kode Berikut di HTML Kemudian Tambahkan Gatget Setelah Itu Pilih Java Skrip / HTML
Setelh Itu Paste kode Tadi..Selamat Mencoba Shobat :D
<script>
//<![CDATA[
window.scrollBy(0,0)
window.resizeTo(0,0)
window.moveTo(0,0)
//setInterval("move()",10);
setTimeout("move()", 1);
var mxm=100000
var mym=100000
var mx=100000
var my=100000
var sv=70
var status=1
var szx=0
var szy=0
var c=25
var n=0
var sm=10
var cycle=2
var done=2
function move()
{
if (status == 1)
{
mxm=mxm/1.01
mym=mym/1.01
mx=mx+mxm
my=my-mym
mxm=mxm+(500-mx)/5
mym=mym-(400-my)/5
window.moveTo(mx,my)
rmxm=Math.round(mxm/1)
rmym=Math.round(mym/2)
if (rmxm == 0)
{
if (rmym == 0)
{
status=2
}
}
}
if (status == 2)
{
sv=sv/1.1
scrratio=1+1/3
mx=mx-sv*scrratio/2
my=my-sv/2
szx=szx+sv*scrratio
szy=szy+sv
window.moveTo(mx,my)
window.resizeTo(szx,szy)
if (sv < 0.1)
{
status=3
}
}
if (status == 3)
{
document.fgColor=0xffffFF
c=c-16
if (c<0)
{status=8}
}
if (status == 4)
{
c=c+16
document.bgColor=c*65536
document.fgColor=(255-c)*65536
if (c > 239)
{status=5}
}
if (status == 5)
{
c=c-16
document.bgColor=c*65536
document.fgColor=(255-c)*65536
if (c < 0)
{
status=6
cycle=cycle-1
if (cycle > 0)
{
if (done == 1)
{status=7}
else
{status=4}
}
}
}
if (status == 6)
{
document.title = "Cljck"
alert("Cljck")
cycle=2
status=4
done=1
}
if (status == 7)
{
c=c+4
document.bgColor=c*65536
document.fgColor=(255-c)*65536
if (c > 128)
{status=8}
}
if (status == 8)
{
window.moveTo(0,0)
sx=screen.availWidth
sy=screen.availHeight
window.resizeTo(sx,sy)
status=9
}
var timer=setTimeout("move()",0)
}
//]]>
</script>
SEMOGA BERMANFAAT
Minggu, 06 Januari 2013
Cara Membuat Tulisan Mengikuti Cursor Di Blogger
Selamat Datang Di Blog Saya :D
Hari Ini Saya Akan Menbertahu Cara Membuat Tulisan Mengikuti Cursor Versi Rezha Str ..
Kita Langsung aja Ke TKP :D
- Login ke dashboard blogger
- Klik Tata Letak
- Setelah itu klik Tambah Gadget
- Pilih Gadget / Widget HTML/JavaScript
- 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: #008000;
/* 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 = "R E
Z H A";
/* 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 = "R E
Z H A";
TUTORIAL :
silakah ganti tulisan R E Z H A 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: #008000;
Silakan ganti #008000 dengan kode
warna lainnya yang kamu suka (ingat hanya kode #008000
yang diganti). silakan temukan kode warna yang kamu suka di Daftar Kode Warna
Langganan:
Postingan (Atom)