Membuat iPhone Zoom Efek Pada Gambar di Blog

Membuat iPhone Zoom Efek Pada Gambar di Blog – setiap gambar yang terdapat pada blog memang memiliki efek masing-masing tergantung dari selera pemilik blog tersebut dan setiap blog tentu memiliki efek gambar yang berbeda-beda.

Pada iPhone zoom efek ini menggunakan kode CSS dan script jquery yang membuat hover gambar pada blog memiliki efek zoom berupa lingkaran seperti pada kaca pembesar. Pada bidang gambar menggunakan background iPhone sehingga menambah layout gambar pada blog menjadi semakin terkesan unik dan tentunya juga menambah style image pada gambar yang terdapat di halaman posting blog. Tidak menggunakan banyak kode sehingga membuat konten blog masih tetap loading friendly. Untuk melihat hasilnya bisa dilihat pada demo yang terdapat dibawah. Cara penerapannyapun cukup mudah dan tanpa edit HTML sehingga tidak perlu memasukan kode pada template blog. Untuk memasang kedalam posting blog berikut adalah tutorial Membuat iPhone Zoom Efek Pada Gambar di Blog:

1. Login ke akun blogger.
2. Selanjutnya untuk menampilkan iPhone Zoom Efek Pada Gambar di Blog caranya copy kode HTML dibawah ini, kemudian paste kode tersebut pada kolom posting mde HTML:

<style>
#iphone{
width:550px;
height:293px;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKWp8qILxebLaF2rMD8Wz_hz4VBm9QVfKKs31vISphJJ6olT58vOXedIcDueVKKFWEWUMCFmnzWiPTauRxp2LniVua1_L6adCfbfQT6noscMnZUjT1S8Uo-0tkXqaFTzKC9sf1Lbl08uPP/w550-h293-no/iphone_4G.png') 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/AVvXsEiIC2SRynaCrM0kjmZ4Rau8H1bZ5Nm3acpVMbOS0m4zl0CUpAJezxkTCi-y_QlZHvr_OWgelsG-oj6nXU6PZt_pB8k5cdnfc15kQxICTeP_xsjXNgs-_uhn7ydMRQHR-rjasrCruePkVz_1/w823-h533-no/webpage.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 src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIC2SRynaCrM0kjmZ4Rau8H1bZ5Nm3acpVMbOS0m4zl0CUpAJezxkTCi-y_QlZHvr_OWgelsG-oj6nXU6PZt_pB8k5cdnfc15kQxICTeP_xsjXNgs-_uhn7ydMRQHR-rjasrCruePkVz_1/w823-h533-no/webpage.jpg" width="365" height="207" alt="Web Page" />
<div id="retina"></div>
</div></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://faceblog-evolutions.googlecode.com/files/script.js"></script>

Keterangan:
Ganti tulisan warna merah dengan URL Gambar yang sama antara yang atas dengan yang bawah.
Selanjutnya klik Publikasikan, sampai disini anda sudah berhasil Membuat iPhone Zoom Efek Pada Gambar di Blog. Tahap selanjutnya silahkan lihat hasilnya.

DEMO :