Terwujud

Cara Membuat Gambar Menjadi Besar Tanpa di Klik



Jika bermanfaat, Mohon di Share ya !, jika ada unek-unek komen aja
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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx8C8NzPttuF4DEHE6wkhsJpHrD4_TjFHSBLTZXp_1cZyVSntARUdk7aqnCEoXTg56Lsr0ry7uS6MynTCsmH7EVB7fzfDOPg8khbWbERhPrNFS42Hqn7WWA4ruUBAdg9J-PIM841JkcHnI/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCVheMH4F5mpZ39i5L9t4k9VWVflh87jLSxpRn8phcVf4CAL_JGpNe8DWbIYgnc5-qzGdOEnzt9JVk2jCcxnciFcLPFzXeRsXii3Dhra8yak9LFxhcbznXhQSKE8VH8RFyBDn3qZQD1NdB/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCVheMH4F5mpZ39i5L9t4k9VWVflh87jLSxpRn8phcVf4CAL_JGpNe8DWbIYgnc5-qzGdOEnzt9JVk2jCcxnciFcLPFzXeRsXii3Dhra8yak9LFxhcbznXhQSKE8VH8RFyBDn3qZQD1NdB/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.


Artikelnya sudah di share, makasih ya !

Mau Artikel Gratis! Silahkan Tulis Email Anda.
Print PDF

You Might Also Like:

Previous
Next Post »

Sudah ada 15 komentar

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.

Klik dan Copy Icon di bawah:
:) :( hihi :-) :D =D :-d ;( ;-( @-) :P :o -_- (o) :p :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ $-) (y) (f) x-) (k) (h) cheer lol rock angry @@ :ng pin poop :* :v 100

By: Terwujud.com
Terima Kasih!!

  1. 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

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

      Delete
  2. sekarang blognya ada kaca pembesarnya, keren

    ReplyDelete
  3. 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

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

      Delete
  4. ternyata caranya nggak terlalu sulit ya

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

    ReplyDelete
  6. 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

    ReplyDelete
    Replies
    1. 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.

      Delete
  7. itu untuk background nya apa harus pake link?

    ReplyDelete
Copyright © 2014 Terwujud.com - All Rights Reserved