headline photo

pasang effect thumbnail gambar

Kamis, 10 Desember 2009

Kode iklan, banner, pesan atau apapun di pasang disini!mura ! loh



kita langsung saja memulai ya.....
effect yang terjadi jika kita ngeklik gambar tersebut adalah :
1. gambar yang kita klik akan membesar tanpa meninggalkan halaman utama
2. tampilan gambar seolah-olah adalh gambar flash....(tapi ini tergantung dengan ukuran gambar yang kita akan buat).............
4. bisa nampilin kaya slide....(he...he...tapi harus make keyboard dengan mengunakan panah kanan dan kiri untuk gambar berikutnya)
3. lihat sendiri effect pada gambar yang adah dibawah ini.......(klik gambar untuk melihat effect...jangan lupa ngekliknya kalo halaman ini udah selesai loading....he...he)


untuk membuat effect seperti diatas syaratnya cukup mudah kok..

pertama yang anda lakukan login ke accoun bloger anda.....

kedua masuk ke layout pilih edit html tanpa perlu Expand Widget Templates dan pasang code css seperti dibawah ini dan letakkan persis diatas code ]]>
.pagecontainer {
position: relative;
width: 630px;
height: 480px;
border: 0px solid #cccccc;
margin-left: 0px;
font-family: Verdana, Helvatica, Arial, sans-serif;
color: #666666;
}
.pageheader {
width: 610px;
height: 30px;
padding-top: 15px;
padding-left: 25px;
letter-spacing: .2em;
text-transform: uppercase;
font-size: 80%;
text-decoration: strong; /* --- NOT WORKING ---*/
text-align: left;
}
.pagecenter {
width: 610px;
height: 400px;
padding-top: 0px;
padding-right: 20px;
padding-bottom: 0px;
padding-left: 20px;
font-size: 100%;
text-decoration: none;
text-align: left;
}
.pagefooter {
width: 610px;
height: 40px;
margin-top: 0px;
padding: 0 20px;
font-size: 100%;
text-decoration: strong;
text-align: left;
}
.pagethumbz {
margin: 4px;
border: 1px solid #cccccc;
padding: 4px;
opacity: 0.8;
height: 95px;
width: 95px;
cursor: pointer;
}
.gallerythumbz {
margin-top: 0px;
margin-left: 37px;
border: 0;
padding: 0;
opacity: 0.9;
}
.pagetext {
margin-left: 5px;
margin-right: 25px;
}
#contactform {
margin-right: 60px;
height: 300px;
width: 400px;
float: right;
text-align: right;
}
#formcontainer {
width: 610px;
height: 300px;
}
#formleft {
width: 140px;
height: 300px;
float: left;
text-align: right;
font-weight: bold;
line-height: 18px;
}



setelah anda melakukan hal diatas copykan lagi script dibawah ini....persis dibawah code ]]>

 
Notification
Chat

Chat

Sekilas Info