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 ]]>
setelah itu save template anda......
mudah kan untuk membuat effect thumbnail tersebut......
hampir lupa untuk gambarnya anda sisa membuat 2 gambar satu gambar yang berukuran "134px x 134px" (code warna biru dibawah) untuk ukuran yang tanpil dipostingan dan satu lagi gambar dengan ukuran aslinya (code gambar yang berwarna merah).......agak ribet sih..tapi menurutku itu agak mempercantik blog kita yang banyak dipenuhi gambar..........
codenya seperti dibawah ini disipmpan dipostingan atau di sidebar juga bisa kok.......
SELAMAT MENCOBA..hheheeh
0 komentar:
Posting Komentar