Selamat dateng teman2 sekarang saya akan memberikan tutorial memberikan efek fade in pada gambar maupun kotak text. mungkin dari beberapa temen2 udah pada tau fungsi dari efek ini. tapi apabila belum tau efek ini memberikan efek blur pada gambar dan apabila panah mause mengarah ke gambar maka efek blurnya akan hilang, klo masih bingung mungkin kalian bisa liat demo dibawah:
Demo efek fade in pada gambar :
Demo efek fade in pada kotak text :
Demo fade in
semoga berminat
semoga berminat
Bagaimana demo diatas? apabila kalian tertarik makna temen2 bisa mengikuti langkah2 dibawah:
- Log in ke blog anda
- Klik Rancangan
- Klik Edit HTML
- Tempatkan Kode berikut di atas kode </head>
<script type="text/javascript" src="http://h1.ripway.com/faencool/untuk blog/FADEIN.JS"></script>
- Masukkan kode berikut di atas kode </body>
<script type="text/javascript">
gradualFader.init() //activate gradual fader</script>
- Simpan Template
Selanjutnya kalau anda ingin memberikan efek fade in pada gambar silahkan masukkan kode berikut pada gambar anda.
<img src="test.gif" class="gradualfader" />
<a href="http://tipsfaenblog.blogspot.com/" /* ganti dengan alamat blog atau web anda */ class="anotherclass gradualfader"><img src="Alamat gambar anda" /></a>
<a href="http://tipsfaenblog.blogspot.com/" /* ganti dengan alamat blog atau web anda */ class="anotherclass gradualfader"><img src="Alamat gambar anda" /></a>
Kode untuk membuat kolom tulisan dengan efek fade in
<div style="width: 300px; /* lebar kolom tampilan */ border: 1px solid gray; /* warna border */ background: grey" /* warna bacground */ class="gradualfader">
Masukkan tulisan anda di sini
</div>
Masukkan tulisan anda di sini
</div>
Kalau anda ingin posisi gambar di tengah tinggal masukkan kode merah di bawah ini
<center><img src="test.gif" class="gradualfader" />
<a href="http://tipsfaenblog.blogspot.com" class="anotherclass gradualfader"><img src="Alamat gambar anda" /></a></center>
<a href="http://tipsfaenblog.blogspot.com" class="anotherclass gradualfader"><img src="Alamat gambar anda" /></a></center>
- Ok selesai
>>>>>....SEMOGA BERMANFAAT....<<<<<
>>Selesai baca jangan lupa jempol dan komentarnya y....
0 comments:
Post a Comment