Senin, 12 September 2011

0 Cara Membuat Efek Hover Image Yang Keren Seri 2


Jangan Lupa Tinggalkan Komentar Kalian Ya...!!!

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 kiri ke arah kanan.

Contohnya dapat Anda lihat seperti di bawah ini :















Dan berikut adalah cara untuk membuatnya :

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

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






<div class="imagecontainers" data-overlayid="springinfo" style="display:block-inline;width:200px;height:150px">
<img src="http://www.javascriptkit.com/script/script2/spring.jpg" />
</div>

<div class="imagecontainers" data-overlayid="summerinfo" style="display:block-inline;width:200px;height:150px">
<img src="http://www.javascriptkit.com/script/script2/summer.jpg" />
</div>

<div class="imagecontainers" data-overlayid="winterinfo" style="display:block-inline;width:200px;height:150px">
<img src="http://www.javascriptkit.com/script/script2/winter.jpg" />
</div>

<div id="springinfo">
<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>


<div id="summerinfo">
<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 />
<a href="http://www.syamsudinnamaku.blogspot.com" target="_blank">Syamsudinnamaku</a><br />
</div>


<div id="winterinfo">
<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 :

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

Ganti juga URL gambarnya dengan URL
gambar yang Anda kehendaki.

Sesuaikan pula ukurannya.

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://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#springinfo, div#summerinfo, div#winterinfo{
background:white;
padding:5px;
}

</style>

Selamat mencoba dan tetap good luck!

0 komentar:

1. Good Girl
2. D'MASIF -sudah perih ini
3. Haney Bunny Sweety-G-String.mp3
4. ARMADA-Mau Dibawa Kemana.mp3
5. Ayang Ayangku.mp3
6. Tak Semestinya Kita Berpisah (TSKB).mp3
7. When The Children Cry - White Lion.mp3
Info

Catatan HUGGENG|CYBER

SELAMAT DATANG DI BLOG SAYA :), MAAF KALO DI BLOG INI ISI DARI KONTEN KURANG MENARIK< TETAPI SAYA AKAN MEMBUAT PARA PENGUNJUNG SENANG DI BLOG INI

Sekilas Tentang Admin

Saya Buakanlah Profesional Pembuat Blog Atau Web, Saya Masih Butuh Belajar, Dari Rekan2 Bloger. INFO:
BLOG ANAK INDONESIA UNTUK ANDA SEMUA

Follow

Follow HUGGENG|CYBER

Nikmati Layanan TV Online Gratis di HUGGENG|CYBER *