16.1.14
41
Efek Lensa Flip 3D
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 Remote Link 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 :


Web Page


Buat sahabat-sahabat Tercinta SAHABAT BLOGGER 77  yang mau mencoba, pintu hatiku selalu terbuka untukmu...Hufft..!! jadi kayak maaf-maafan neh, hehehe...
OK deh..Berikut kode Membuat Efek Lensa Flip 3D Pada Gambar, Silahkan COPY lalu PASTE pada mode HTML halaman postingan anda
<center>
<style>
#iphone{
width:550px;
height:293px;
background:url('https://1.bp.blogspot.com/-eJiEQ7apQkg/UtdJ8gPKEiI/AAAAAAAAAjc/2qJExC5z8Qc/s1600/garden_beautiful.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://1.bp.blogspot.com/-LMPcV13GkTs/Utc-gRzXfxI/AAAAAAAAAjM/mXAOCey8guU/s1600/pictures-sahabatBLOGGER+77.jpg%3C/span>') 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://1.bp.blogspot.com/-LMPcV13GkTs/Utc-gRzXfxI/AAAAAAAAAjM/mXAOCey8guU/s1600/pictures-sahabatBLOGGER+77.jpg%3C/span>" 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="http://faceblog-evolutions.googlecode.com/files/script.js" type="text/javascript"></script></center>

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 Membuat Efek Lensa Flip 3D Pada Gambar, semoga bermanfaat
  5. Terima Kasih

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Membuat Efek Lensa Flip 3D Pada Gambar
Ditulis oleh= Devy
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

41 komentar

  1. Balasan
    1. informatif dan unik, mbak... :>)

      Hapus
    2. silahkan diangkut mas,,tapi ingat budayakan untuk antri ea... :)

      Hapus
  2. nice tutorial, dicoba dulu...

    BalasHapus
  3. Balasan
    1. hmmm....benar juga ya bang...kagak bisa lihat dan baca karena tulisan terlalu kecil jadi pakai lensa dech...heheh

      Hapus
  4. Wah boleh juga nih mbak di coba tutornya. Tapi sayang saya lagi pake hp nih mbak ngeblognya. Jadi saya bookmark dulu aja deh. Terimakasih..?

    BalasHapus
  5. keren juga nih kalau buat galery,Terimakaish nih mbak untuk tutor yang satu ini,,,,,

    BalasHapus
  6. makin hari makin bagus aja neh postingan neng devy....
    langsung di coba deh...

    BalasHapus
    Balasan
    1. diangkut mas,,,bawa pulang sekalian... :-)

      Hapus
  7. kalo di wp bisa ga ya

    BalasHapus
    Balasan
    1. wah..devy kurang tahu dech bang kalau WP..maslahnya belum pernah gunain WP..

      Hapus
  8. waw mantaf kayakna nih buat memperindah :)

    BalasHapus
    Balasan
    1. mudah-mudahan blognya indah mas..hehehe

      Hapus
  9. cocok nih buat template toko nasi goreng :)

    :d blog nya cantik . . .. salam kenal ya mbak

    BalasHapus
  10. Dengan adanya efek lensa plid 3D gambar jadi keliatan keren dan makin menarik ya mbak, terimakasih udah sharing tutorialnya :)

    BalasHapus
    Balasan
    1. hanya sebagai hiasan semata mas, karena pengunjung dapat bermain-main dengan gambar sembari membaca,,

      Hapus
  11. bisa juga nih di coba sist buat saya yang mat aminus ini hehe makasih infonya

    BalasHapus
    Balasan
    1. bisa-bisa gak laku neh sist toko lensa didepan rumah saya [-(

      Hapus
  12. wah asyik juga ya kalau di blog ada efek lensa nya. Jadi bisa menarik pengunjung ya sob. Boleh dicoba nih tutorialnya :)

    BalasHapus
    Balasan
    1. maksud hati sih begitu mbak,biar pengunjung tidak terlalu jenuh dengan membaca konten artikelnya..hehehe

      Hapus
  13. wah unik banget efek nya saya aja baru tau kalau ada efek lensa :) makasih sudah berbagi :)

    BalasHapus
    Balasan
    1. sama mas saya juga baru tahu.. :d
      terimakasih kembali mas aldino

      Hapus
  14. kreen efeknya, jadi kyak punya lensa lup,,, hmm akan jadi bermanfaat buat pengjung yang matanya minus (yg gak bisa liat tulisan kecil-2) hehehe,,, :-)

    BalasHapus
  15. Wah keren mbak hehe.. mantap :)

    BalasHapus
  16. Balasan
    1. alahamdulillah kalau mbak anis suka.. :)

      Hapus
  17. jadi kelihatan ada variasinya ya tampilan blog nya jika ada efek lensa nya ini. Luar biasa tutorialnya. Bisa dicoba nih :)

    BalasHapus
    Balasan
    1. sekedar kotak-katik gambar mbak,hehe

      Hapus
  18. hmmmm....bisa di coba juga nih,,, makasih ah ats infonya,,, hehehhe

    BalasHapus
  19. Wah keren juga ya mas caranya ntar tak coba

    BalasHapus
    Balasan
    1. devy indriyani dipanggil mas sich,,hmmmm

      Hapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK