MOHON PERHATIAN!!!........ Sehubungan sedang "ERROR"nya situs HTTP://WWW.RIPWAY.COM, maka bila Anda menemukan tutorial yang menggunakan kode dengan nama situs tersebut, sementara waktu JANGANLAH Anda gunakan. Mohon maaf, semoga anda memakluminya.............................

Mengucapkan Selamat Datang, Semoga Dapat Berkenan Di Hati Anda


SYAMSUDINNAMAKU telah hadir

Cara Membuat Efek Hover Image Yang Keren Seri 1


Tumpang tindih script di setiap DIV pada halaman
Anda amat sempurna dengan kotak overlay ketika
mouse terarah pada gambarnya. Dengan efek
pergeseran menimbulkan gambar atau teks yang lain
dibalik gambar yang pertama. Ditambah lagi dengan
adanya efek slide dari arah bawah menuju ke atas.

Contohnya dapat Anda lihat seperti di bawah ini :




Desain web adalah istilah yang luas digunakan untuk mencakup cara bahwa konten (biasanya hypertext atau hypermedia) yang dikirimkan ke pengguna akhir melalui World Wide Web, menggunakan web browser atau web lainnya yang memungkinkan perangkat lunak untuk menampilkan konten.


Dan berikut ini adalah cara membuatnya :

1.   Rancangan -> Tambah Gadget ->
      Pilih HTML/JavScript.

2.   Masukkan ke dalam kontennya
      kode berikut ini kemudian simpan.

<div id="info" style="width:250px;border:1px solid gray;padding:15px;background:#ADE0E3" data-overlayid="moreinfo">
Desain web adalah istilah yang luas digunakan untuk mencakup cara bahwa konten (biasanya hypertext atau hypermedia) yang dikirimkan ke pengguna akhir melalui World Wide Web, menggunakan web browser atau web lainnya yang memungkinkan perangkat lunak untuk menampilkan konten.
</div>

<div id="moreinfo">
<b>Contoh Website:</b><br />
<a href="http://www.syamsudinnamaku.blogspot.com" target="_blank">Syamsudinnamaku</a><br />
<a href="http://www.syamsudinpunya.blogspot.com" target="_blank">Syamsudinpunya</a><br />
<a href="http://www.syamsudinnamaku.blogspot.com" target="_blank">Syamsudinnamaku</a><br />
<a href="http://www.syamsudinpunya.blogspot.com" target="_blank">Syamsudinpunya</a><br />

</div>

KETERANGAN :

Sesuaikan ukuran dan warna backgroundnya
dengan ukuran dan warna yang sesuai.

Ganti semua link yang ada pada kode di atas
dengan link apa saja yang Anda inginkan.

Ganti kalimat yang ada pada kode tersebut
dengan kalimat Anda sendiri.

Ganti juga URL gambarnya dengan URL
gambar yang Anda kehendaki.

3.   Kemudian masuk ke Edit HTML

4.   Carilah tag </head>

5.   Copy kode berikut dan letakkan
      di atas tag </head> ini.
      Pratinjau lalu simpan template Anda.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

<script src="http://www.javascriptkit.com/script/script2/overlaybox.js">

/***********************************************
* DIV Content Overlay script- by JavaScript Kit (www.javascriptkit.com)
* This notice must stay intact for usage
* User http://www.syamsudinnamaku.blogspot.com/
* Visit JavaScript Kit at http://www.javascriptkit.com/ for full source code
***********************************************/

</script>

<script>

jQuery(function($){ //on document.ready

 $('#info').overlaycontent({ //initialize overlay on single DIV with id="info"
  speed:500, //duration of animation in milliseconds
  dir:'up' //supports 'up', 'down', 'left', or 'right'
 })

 $('div.imagecontainers').overlaycontent({ //initialize overlay on DIVs with class="imagecontainers"
  speed:300,
  dir:'right',
  opacity:0.8 //opacity: 0 to 1
 })

})

</script>

<style type="text/css">

div#moreinfo{
background:lightblue;
padding:10px;
background:lightblue url(http://www.javascriptkit.com/script/script2/pattern.png);
}

div#springinfo, div#summerinfo, div#winterinfo{
background:white;
padding:5px;
}

.imagecontainers{
float:left;
margin-right:10px;
}

</style>

Selamat mencoba dan tetap good luck!


0 comments:

Poskan Komentar