BLOGGOA

pengen memasang gambar di blog yang memakai refleksi seperti gambar disamping???tapi belum mahir menggunakan photoshop atau program editing gambar lainnya......jangan khawatir...kali ini bloggoa membuat postingan tentang cara membuat gambar yang menggunakan reflection effect (seperti gambar disamping)...tenang aja gambar yang ada disamping ini juga hasil file js yang aku tanamkan di template facebook ini.....bukan hasil editing photoshop

sebenarnya postingan tentang effect gambar yang ada ti bloggoa sudah yang ketiga kalinya...pertama ada di link ini dan yang kedua coba anda klik disini.....
atau semua postingan yang berhubungan dengan effect gambar ada di link ini

nah kali ini bloggoa membagi tentang cara membuat gambar menjadi terrefleksi seperti cermin tanpa menggunakan photoshop....karena gw sendiri belum mahir menggunakan photoshop terpaksa gogling sana sini dan blogwalking keberbagai negara untuk mencari effect ini

caranya cukup mudah anda tinggal memasang script ini di atas </head> pada edit html

<script src="http://sites.google.com/site/toejoeh124/reflex.js" type="text/javascript"></script> 

dan simpan template anda......

pada halaman postingan...pilih yang mode edit html jangan yang mode compose ini dikarenakan kita akan measukkan code gambar tersebut.....didalam postingan masukkan code sebagai berikut :

<a href="URL GAMBAR ANDA"><img alt="image" border="0" class="reflex idistance4 iopacity50" src="URL GAMBAR ANDA" /></a>


selamat mencoba dan happy blogging.......

akhir2 ini kok BLOGGOA rajin amat ngeposting tentang picture setelah sebelumnya memposting tentang effect thumbnail pada picture...kali ini BLOGGOA mencoba berbagi tips dengan menampilkan gambar dengan toogle picture......bingung juga mau nulis judulnya apa....yang jelas maksudnya ketika mouse kita menyentuh gambar kecil (icon thumbnail) maka tabel disamping akan menghasilkan efeect gambar menjadi besar....tujuannya sieh untuk mempercantik blog...biar kelihatan interactive.......

tips ini sebenarnya cocok buat para bloger yang ingin menampilkan preview templatenya....tapi buat teman2 yang kurang kerjaan ngepost picture kaya BLOGGOA....silahkan mengikuti tutorial yang sedikit aneh ini..........

untuk ilustrasinya silahkan lihat gambar dibawah ini.........dan gerakkan mouse anda pada bagian thumbnailnya.........

Hal. Depan Hal. Posting 1 Hal. Posting 2

kalo anda berminat ingin membuat effect seperti itu....caranya cukup mudah

masuk ke edit html masukkan kemudian copy script ini dan masukkan Setelah code   ]]></b:skin> 

<script language="JavaScript" src="http://sites.google.com/site/toejoeh124/toogle.js">
</script>

save template anda dan beralih lah kehalaman posting

pada saat memposting jangan lupa untuk membuat tabel...biar tampak profesional (silahkan klik ini untuk cara membuat tabel).

kalau anda malas untuk membuka artikel tersebut...ini cara mempostingnya.....
masuk kelahalamn posting...kemudian pilih yang edit html kemudian copas code berikut dihalaman postingan anda..............
<table width="100%" border="0" cellpadding="0" cellspacing="0" >
<tr><td valign="top">
<div align="center" style="margin:15px;">
<table width="550" border="0" cellspacing="0" cellpadding="0">
<tr> <td width="425"><img src="alamat gambar 1" name="BLOGGOA" /></td> <td width="125"><table width="125" border="0" cellspacing="10" cellpadding="0">
<tr> <td width="25"><img src="http://www.smiletemplates.com/img/sel.gif" name="sel1" width="14" height="55" /></td> <td width="100" align="center"><a href="#" onmouseover="MM_swapImage('BLOGGOA','','alamat gambar 1',1),MM_swapImage('sel1','','http://www.smiletemplates.com/img/sel.gif',1),MM_swapImage('sel2','','http://www.smiletemplates.com/img/s.gif',1),MM_swapImage('sel3','','http://www.smiletemplates.com/img/s.gif',1)"><img src="alamat gambar 1"  width="80" height="150" border="0" id="BLOGGOA" />
Hal. Depan</a></td> </tr>
<tr> <td><img src="http://www.smiletemplates.com/img/s.gif" name="sel2" width="14" height="55" /></td> <td align="center"><a href="#" onmouseover="MM_swapImage('BLOGGOA','','alamat gambar 2',1),MM_swapImage('sel1','','/img/s.gif',1),MM_swapImage('sel2','','/img/sel.gif',1),MM_swapImage('sel3','','/img/s.gif',1)"><img src="alamat gambar 2"  width="80" height="150" border="0" id="BLOGGOA" />
Hal. Posting 1</a></td> </tr>
<tr> <td><img src="http://www.smiletemplates.com/img/s.gif" name="sel3" width="14" height="55" /></td> <td align="center"><a href="#" onmouseover="MM_swapImage('BLOGGOA','','alamat gambar 3',1),MM_swapImage('sel1','','http://www.smiletemplates.com/img/s.gif',1),MM_swapImage('sel2','','http://www.smiletemplates.com/img/s.gif',1),MM_swapImage('sel3','','http://www.smiletemplates.com//img/sel.gif',1)"><img src="alamat gambar 3" width="80" height="150" border="0" id="BLOGGOA" />
Hal. Posting 2</a></td> </tr>
</div>
</table>
</table>
</table>



yang harus anda perhatikan adalah
ganti tulisan yang di cetak tebal.....pada code diatas dengan code gambar anda
tulisan yang berwarna merah   dengan id gambar anda......sedangakan tulisan yang berwarna orange   merupakan tulisan yang adah di bawah gambar (keterangan gambar)

demikian tehnik toogle picture pada postingan kali ini kalian bisa melayangkan komentar jika ada yang belum dipahami atau contact aku lewat ym jika aku sedang online.

dan jika tidak keberatan tolong dukung saya dalam Kontes Launching Be-Blog dengan memasang code dibawah ini di BLOG anda

<a href="http://toejoeh124.blogspot.com/2009/10/launching-be-blog.html">Launching Be-Blog</a>

thanks....and HAPPY BLOGING................

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