Home » , » membuat slide gambar keren pada website dan blog

membuat slide gambar keren pada website dan blog

Written By Trik dan berita on Minggu, 29 April 2012 | Minggu, April 29, 2012

membuat slide gambar keren pada website dan blog.Sebelumnya saya juga pernah posting tentang membuat animasi slide gambar, namun sekarang animasinya agak berbeda.

animasi slide gambar yang akan kita buat berikut ini adalah slide yang unik karena dia akan melakukan slide dan membuka gambar secara otomatis jika kita sentuh gambarnya dengan mouse.

ok..sekarang langsung saja ke cara-caranya yang bisa di bilang cukup simpel dan mudah.
cukup sobat copy kode di bawah ini dan pastekan di html/javascript pada blog anda , atau di mana pun halaman website anda mendukung kode di bawah ini.
<div id="slideshow">
<div class="slide s1">
<img src="url foto kamu" alt="cewek" />
<div class="caption">1. Keterangan Gambar</div>
</div>
<div class="slide s2">
<img src="url foto kamu" alt="cewek" />
<div class="caption">2. Keterangan Gambar</div>
</div>
<div class="slide s3">
<img src="url foto kamu" alt="ibu termuda dan cantik" />
<div class="caption">3. Keterangan Gambar</div>
</div>
<div class="slide s4">
<img src="url foto kamu" alt="keluarga muda" />
<div class="caption">4. Keterangan Gambar</div>
</div>
</div>

<style type='text/css'>
#slideshow {
width: 500px;
height: 330px;
margin: 2em auto;
overflow: hidden;
position: relative;
background: #ccc;
border: 1px solid #000;
}

#slideshow div.slide {
width: 500px;
height: 330px;
position: absolute;
top: 0;
cursor: pointer;
z-index: 1;
-moz-transition: all 1s ease-out;
-webkit-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
-ms-transition: all 1s ease-out;
transition: all 1s ease-out;
}
#slideshow div.slide:hover {
left: 0;
z-index: 2;
}

#slideshow div.slide img {
position: absolute;
top: 0;
left: 0;
width: 500px;
height: 330px;
}

#slideshow div.slide div.caption {
height: 2em;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
color: #fff;
line-height: 2;
text-indent: 0.5em;
}

#slideshow div.s1 {
left: 100px;
}
#slideshow div.s2 {
left: 200px;
}
#slideshow div.s3 {
left: 300px;
}
#slideshow div.s4 {
left: 400px;
}
</style>

tips: silahkan ganti yang warna biru dengan url foto yang akan anda gunakan di slide.
ganti yang warna merah dengan keterangan gambar kamu.
ganti yang warna ungu dengan judul gambar kamu.

nah..cukup seperti itu saja dan kamu bisa membuat slide gambar keren di blog dan website kamu.
anda juga bisa mengubah desain dan tampilan slide baik itu ukuran dan tampilannya.
selamat berkreasi.

Popular Posts

VIDEO LUCU HARI INI

Blog Archive

Top Dan Unik. Diberdayakan oleh Blogger.
Topics :