Terwujud
KomTer,Komik Online
Smartphone Mainbitcoin

Cara Membuat Gambar Menjadi Besar Tanpa di Klik


Baru saja saya berkunjung di salah satu situs Toko online untuk melihat beberapa produk menarik yang mungkin saya akan membelinya, setelah melakukan pencarian Produk-produk akhirnya saya menemukan sesuatu yang saya suka. Yang membuat saya terinspirasi adalah tampilan gambar yang membesar secara otomatis tanpa diklik, saya hanya mengarahkan kursor pada menu gambar, maka gambar tersebut menjadi besar.

Cara Membuat Gambar Menjadi Besar Tanpa di Klik merupakan sinonim dari Efek lensa 3D pada gambar/foto yang tidak perlu repot-repot membuka gambar secara terpisah. Awalnya saya bingung untuk menemukan cara membuat gambar besar secara otomatis ini, sebab ternyata kata kunci keyword yang populer di search engine adalah keyword Efek Lensa.

Akhirnya setelah berusaha semaksimal mungkin, apa yang menjadi Inspirasi saya untuk membuat artikel tentang Cara Membuat Gambar Menjadi Besar Tanpa di Klik ketemu juga, dan berikut tutorialnya:

1. Log In ke www.blogger.com
2. Anda bisa tempatkan gambar di widget HTML/Javascript atau di Postingan Artikel
3. Copy dan Paste kode di bawah ini

<center>
<style>
#iphone{
width:500px;
height:300px;
background:url('http://1.bp.blogspot.com/-OgUbROTlwt4/UwoLy7JE46I/AAAAAAAAAcY/hma9EnTi8oQ/s1600/backround1-terwujud.jpg') no-repeat center center;
position:relative;
}
#webpage{
width:300px;
height:150px;
position:absolute;
top:50%;
left:70%;
margin:-141px 0 0 -249px;
}
#retina{
background:url('http://3.bp.blogspot.com/-VOnPAiVGu7g/UwmqziWajII/AAAAAAAAAa4/fyv4PCCwqRM/s1600/Ibrahim1.jpg') no-repeat center center white;
border:2px solid white;
position:absolute;
height:180px;
width:180px;
display:none;
-moz-box-shadow:0 0 5px #777, 0 0 10px #aaa inset;
-webkit-box-shadow:0 0 5px #777;
box-shadow:0 0 5px #777, 0 0 10px #aaa inset;
-moz-border-radius:90px;
-webkit-border-radius:90px;
border-radius:90px;
}
</style>
<div id="iphone">
<div id="webpage">
<img alt="Web Page" src="http://3.bp.blogspot.com/-VOnPAiVGu7g/UwmqziWajII/AAAAAAAAAa4/fyv4PCCwqRM/s1600/Ibrahim1.jpg" height="100" width="200" />
<div id="retina">
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="https://googledrive.com/host/0B2J42XkvLqFoQ1pUdWtybmpSNTA" type="text/javascript"></script>
</center>


Silahkan Arahkan kursor anda pada foto di bawah

Web Page


Keterangan:
  • Kode berwarna Biru merupakan backround Foto (silahkan ganti)
  • Kode berwarna Merah merupakan Foto pembesarnya (sebaiknya ukuran foto besar, contoh >>1000x900)
  • Kode berwarna Kuning adalah tampilan foto yang terlihat (silahkan sesuaikan ukuran tinggi dan lebarnya)
Demikian artikel Cara Membuat Gambar Menjadi Besar Tanpa di Klik, Kode Css di atas merupakan kode default, anda dapat berkreasi untuk mengubahnya seperti tampilan contoh foto yang saya paparkan di atas mulai dari bentuk lensa, posisi foto yang tepat ditengah-tengah dan lainnya. Jika ada yang kurang jelas, silahkan tinggalkan komentar anda.

Mau Artikel Gratis! Silahkan Tulis Email Anda.
Print PDF
Next
« Prev Post
Previous
Next Post »

15 komentar

selamat malam sobat. Ane sampai sekarang belum pernah pakai efek zoom ini sobat. Izin nyimak artikel nya yang bermanfaat ini. Izin belajar juga ya sobat

Balas

sekarang blognya ada kaca pembesarnya, keren

Balas

Iya mas wisma, terima kasih. susah juga editnya soalnya perlu beberapa analisis dan pemahaman agar tampilan poto dan pembesarnya bekerja dengan baik.

Balas

begitulah mas ahmad, heeeheee

Balas

waah, keren sekali mas. gambar jadi di perbesar seperti menggunakan kaca pembesar
lagi - lagi saya harus berterima kasih untuk ilmunya, maklum masih neubie mas
hehehhee

Balas

ternyata caranya nggak terlalu sulit ya

Balas

Terima kasih mas tas dukungannya, jika ada yang kurang mohon di beri tahu ya :D

Balas

Begitulah mas, terima kasih

Balas

wow keren, ijin copy script dan mempraktekannya bos, hehehe......

Balas

domain blog ini terwujud.com tidak bisa akses tanpa huruf www mas. Saya cek tadi error. Mungkin bisa di seetting di pengaturan nya. Coba baca artikel ini http://www.juragancipir.com/2014/01/cara-mengatasi-error-tanpa-www-di-custom-domain-blogger-paling-mudah.html

Balas

Iya mas, silahkan dilakukan segera mungkin

Balas

Makasih ya mbak eka atas sarannya, ternyata ada edit yang terlupa, soalnya baru aja saya membuat artikel tentang Cara Memperbaiki Domain Error Tanpa www, maka dari itu saya langsung tutorialnya secara langsung, ehhh ternyata saya lupa ceklist kembali untuk mengaktifkannya.

Balas

keren pak izin belajar nich,,,

Balas

itu untuk background nya apa harus pake link?

Balas

Saya akan sangat senang jika ada komentar yang membangun, tetapi:

*Jangan komentar SPAM
*Jangan menanam link
*Jangan ada unsur sara, Fornografi dan memojokkan

Komentar yang melanggar akan dimasukkan kedalam daftar SPAM dan tidak akan diijinkan lagi.

Icon:
:) ^_^ :D =D (smile dan tertawa)
:( =( (marah dan Bingung)
:-bd :-d (oke)
|o| (tepuk tangan)

By: Terwujud.com
Terima Kasih!!

Copyright © 2014. Terwujud.com | Sumber Informasi Terpercaya - All Rights Reserved | Template Created by Kompi Ajaib | Modified by Ibrahim Lubis