Membuat efek lensa flip 3D pada gambar

Membuat Efek Lensa Flip 3D Pada Gambar - Membuat Gambar pada artikel blog sudah hal yang biasa, karena dengan adanya gambar pada tulisan dapat memudahkan pengunjung untuk memahami tujuan dari isi tulisan pada blog, tetapi merubah gambar tersebut agar terkesan unik dan menarik di mata pengunjung tidak banyak yang melakukannya.

Seperti Efek kaca pembesar pada gambar sebelumnya, di artikel kali ini saya akan mencoba mengubah efeknya menjadi sebuah LENSA PEMBESAR saat mouse anda menyentuh gambar.

Detailnya kursor panah mouse anda seolah-olah akan bertindak sebagai lensa untuk melihat ukuran gambar menjadi 3 Dimensi saat anda menyorot obyek membutuhkan waktu yang cukup lama saat menggabungkan antara kode script dengan CSS Code, dan memodifnya sedikit sehingga akan memberikan titik fokus pada obyek yang kita tentukan dan menghasilkan Efek Lensa Flip 3D pada gambar seperti berikut :

Buat sahabat-sahabat Tercinta Blog Irvan Efendy yang mau mencoba, pintu hatiku selalu terbuka untukmu...

Hahahahaa..!! jadi kayak maaf-maafan ajah neh, hehehe...

Simak langkah² dibawah ini:

1. Login ke akun blogger sobat

2. Klik Template » Edit HTML

3. Kemudian tekan Ctrl+F cari kode ]]></b:skin> atau </style>

4. Lalu tambahkan script CSS berikut ini tepat diatas kode ]]></b:skin> atau </style>

#iphone{
width:550px;
height:293px;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy0Hr5JP2VK6hNMY8mHqN5uIwzqu-5RLkfxtvgYfHOS909-Zz61_9NlEonxiocgTrOyyjGl1h_xRvYf-hVjYZUzkT6x_KHAEbMU9i6cBrJBrZ4wayyy5VdIf9Jti6gRyfvEyd7u-hHyA/s1600/3d-desktop-background-hd-of-art-and-design.jpg') no-repeat center center;
position:relative;
}
#webpage{
width:365px;
height:207px;
position:absolute;
top:63%;
left:62%;
margin:-141px 0 0 -249px;
}
#retina{
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0_lq6LU9aQYQ65axqdJYBYqJhGInk8uhuYZYuxcnl7tYjRo44hMJw6mfpMxgECKCtofZDPh2tTIB3d7Ar4qpkd0jZjsHNrjh-xuo0lahd-I6Hst-oRq6kaAr8hwtDlW2CWptmiWgN73nE/s1600/home_blog+(irvan-efendy.blogspot.com).PNG') 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;
}

Penerapannya:

Supaya kode di atas muncul di posting blog sobat » Silahkan buat Entri baru gunakan mode HTML kemudian masukan kode berikut ini kedalam halaman posting blog sobat.

<div id="iphone">
<div id="webpage">
<img alt="Web Page" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0_lq6LU9aQYQ65axqdJYBYqJhGInk8uhuYZYuxcnl7tYjRo44hMJw6mfpMxgECKCtofZDPh2tTIB3d7Ar4qpkd0jZjsHNrjh-xuo0lahd-I6Hst-oRq6kaAr8hwtDlW2CWptmiWgN73nE/s1600/home_blog+(irvan-efendy.blogspot.com).PNG" height="207" width="365" />

<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://sites.google.com/site/vanzdy/script/efek_lensa-flip-3D.js" type="text/javascript"></script>

Keterangan:

1. Teks Biru adalah Gambar 1 (Gambar Lensa Flip)
2. Teks Merah adalah Gambar 2 (Gambar Utama)
3. Silahkan Ganti dengan URL gambar anda dengan URL gambar yang sama
4. Selamat Mencoba Cara membuat Efek Lensa Flip 3D Pada Gambar, semoga bermanfaat
5. Terima Kasih
   
   Jangan lupa kasih komen ya gan :) wkwkkwkwkk