Thursday, October 22, 2009

pasang effect thumbnail gambar

setelah beberapa bulan vakum dalam ngeblog akhirnya saya coba menyempatkan menulis trik ini semoga berguna bagi para blogger mania yang ingin mempercantik blognya.....kali ini BLOGGOA membagi tips tentang efeck thumbnails yang dihasilkan sebuah objek atau gambar

sebenarnya effect thumbnail pada gambar telah banyak diposting oleh beberapa senior bloger indonesia.....sebut saja di blognya kang rohman.......o-om dan masih banyak senior bloger yang telah mempostingnya...kali ini saya membuat effect lain pada sebuah picture.....(walah...sok inggris)...maksudnya gambar...dimana jika kita ngeklik gambar tersebut akan ada effect yang terjadi......hi....hi....kaya ahli special effect aja ngomongnya.....

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 ]]></b:skin>

.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 ]]></b:skin>
<script language='javascript' src='http://www.geocities.com/questanoeq/lytebox_source.js' type='text/javascript'/>

<style type='text/css'> 
#lbOverlay { position: fixed; top: 0; left: 0; z-index: 99998; width: 100%; height: 500px; }
 #lbOverlay.grey { background-color: #000000; }
 
#lbMain { position: absolute; left: 0; width: 100%; z-index: 99999; text-align: center; line-height: 0; }
#lbMain a img { border: none; }
 
#lbOuterContainer { position: relative; background-color: #070707; width: 200px; height: 200px; margin: 0 auto; }
 #lbOuterContainer.grey { border: 3px solid #888888; }
 
#lbDetailsContainer { font: 9px Verdana, Arial, Helvetica, sans-serif; background-color: #070707; width: 100%; line-height: 1.4em; overflow: auto; margin: 0 auto; }
 #lbDetailsContainer.grey { border: 3px solid #888888; border-top: none; }
 
#lbImageContainer, #lbIframeContainer { padding: 10px; }
#lbLoading {
 position: absolute; top: 45%; left: 0%; height: 32px; width: 100%; text-align: center; line-height: 0; background: url(http://4.bp.blogspot.com/_jIDb64uFsy0/SoF0DM9kdEI/AAAAAAAAAqA/L-eCArsPwbE/s1600/loading.gif) center no-repeat;
}
 
#lbHoverNav { display: none; position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#lbImageContainer&gt;#lbHoverNav { left: 0; }
#lbHoverNav a { outline: none; }
 
#lbPrev { display: none; width: 49%; height: 100%; background: transparent url(http://4.bp.blogspot.com/_jIDb64uFsy0/SoF0CgzOsrI/AAAAAAAAApw/mhRlv9yO_0g/s1600/blank.gif) no-repeat; display: block; left: 0; float: left; }
 #lbPrev.grey:hover, #lbPrev.grey:visited:hover { display: none; background: url(http://3.bp.blogspot.com/_jIDb64uFsy0/SoF0L1_UL-I/AAAAAAAAAqg/_MJOEKaeN4M/s1600/prev_grey.gif) left 15% no-repeat; }
 
#lbNext { display: none; width: 49%; height: 100%; background: transparent url(http://4.bp.blogspot.com/_jIDb64uFsy0/SoF0CgzOsrI/AAAAAAAAApw/mhRlv9yO_0g/s1600/blank.gif) no-repeat; display: block; right: 0; float: right; }
 #lbNext.grey:hover, #lbNext.grey:visited:hover { display: none; background: url(http://2.bp.blogspot.com/_jIDb64uFsy0/SoF0DGdSKiI/AAAAAAAAAqI/KP9c5Pqj0ks/s1600/next_grey.gif) right 15% no-repeat; }
 
#lbPrev2, #lbNext2 { display: none; text-decoration: none; font-weight: bold; }
 #lbPrev2.grey, #lbNext2.grey, #lbSpacer.grey { color: #333333; }
 
#lbPrev2_Off, #lbNext2_Off { display: none; font-weight: bold; }
 #lbPrev2_Off.grey, #lbNext2_Off.grey { color: #CCCCCC; }
 
#lbDetailsData { padding: 0 10px; }
 #lbDetailsData.grey { color: #666666; }
 
#lbDetails { width: 70%; float: left; text-align: left; }
#lbCaption { display: block; font-weight: bold; }
#lbNumberDisplay { float: left; display: block; padding-bottom: 1.0em; }
#lbNavDisplay { float: left; display: block; padding-bottom: 1.0em; }
/* ================================================================================*/
#lbClose { width: 0px; height: 0px; float: right; margin-bottom: 1px; }
 #lbClose.grey { background: url(http://2.bp.blogspot.com/_jIDb64uFsy0/SoHyOjgI_XI/AAAAAAAAArU/x5ir79FSj7c/s1600/my_Close.png) no-repeat; }
 
#lbPlay { width: 28px; height: 28px; float: right; margin-bottom: 1px; }
 #lbPlay.grey { background: url(http://1.bp.blogspot.com/_jIDb64uFsy0/SoTWIgik1MI/AAAAAAAAAvY/Xh38UE_Jznw/s1600/my_Play.png) no-repeat; }
 
#lbPause { width: 28px; height: 28px; float: right; margin-bottom: 1px; }
 #lbPause.grey { background: url(http://1.bp.blogspot.com/_jIDb64uFsy0/SoTWH2s_JMI/AAAAAAAAAvQ/rcIuQM27l1A/s1600/my_Pause.png) no-repeat; }
</style>
 

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.......
<a href="http://img38.imageshack.us/img38/1623/blogwalking.jpg" rel="lytebox[bloggoa]" title="Blogwalking Award"><img alt="" class="pagethumbz" src="http://img25.imageshack.us/img25/138/blogwalkingthumb.jpg" /></a>



sampe disitu saja yach......silakan berexperimen sendir....jika ada kendala silahkan layangkan komentar anda dibawah postingan ini atau kita bisa YM an di link ini kalo aku tampak online di halaman depan blog saya

15 comments:

Poskan Komentar

 
Labels

Blogumulus by Roy Tanck and Amanda Fazani

Followers

Reccent Comments

© Free News Template Copyright by BLOGGOA | Template by Fanchon0706 | Blog Trick at BLOGGOA