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:
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/AVvXsEjDJAJEqglwUbzuxGK7_9VHf5g1w1azGkp-5x_YKWh7xDAAY3NjPePCcIacZz-Pqx6Sb7meJhk3TsPZ30fFmTI8vEob_IgAV9ZtHhijJKaDR_UUZ2oa63vzYQyqEYMkMUNDWID3888nz5PH/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/AVvXsEg1Lm7pYBEFNo9FMXjMbXN9qlia6unfQap5AvZHv04FD8CBGDtcbg13_dtYVYwhyphenhyphenX4PVnEVjsdKsH5WRU1gsHGAFcPmar6rMhK10fclDvOrIHGduibuX0M0oqReB39-oVRMkyzm5bgDNykS/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/AVvXsEg1Lm7pYBEFNo9FMXjMbXN9qlia6unfQap5AvZHv04FD8CBGDtcbg13_dtYVYwhyphenhyphenX4PVnEVjsdKsH5WRU1gsHGAFcPmar6rMhK10fclDvOrIHGduibuX0M0oqReB39-oVRMkyzm5bgDNykS/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.
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.
13 Response to "Membuat iPhone Zoom Efek Pada Gambar di Blog"
wah keren mas. terimakasih sudah berbagi !!
Balassiiip , mantap mas.... izin pasang ya
BalasMakasih banyak tutorialnya kang. Sayang gak bisa nyobain soalnya ngeblog cuman pakai hp doang :(
Balaswah mantap mas tutor nya, thank sudah berbagi, ijin nyoba mas, maaf baru bisa berkunjung lagi
BalasBenar-benar sangat mantap sekalu ini sobat, ijin praktek dulu nih
Balasterima kasih sudah berbagi
keren ya.. tapi entar kelihatan aneh gak.. :D .
BalasTerima kasih Mas Andes Tutornya, selalu up to date :) Keren..
BalasHappy Blogging
mantab tips bloggernya sobat
Balaskeren2..! thx sharenya sob *smile
BalasMantab nih, selalu ada tutorial baru dan saya selalu save kodenya hehe :D
BalasMakasih tutorialnya sob :)
tak punye iphone bro
Balasgan, minta kode html widget ini utk di edit html template
Balastaruh diatas kode ]]></b:skin>
Balas#iphone{
width:550px;
height:293px;
background:url('http://i1327.photobucket.com/albums/u677/Andes_Rizky/iphone_4G_zpsc461d2f4.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('http://i1327.photobucket.com/albums/u677/Andes_Rizky/webpage_zps6af388c5.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;
}
masukan di posting mode HTML:
<div id="iphone">
<div id="webpage">
<img src="http://i1327.photobucket.com/albums/u677/Andes_Rizky/webpage_zps6af388c5.jpg" width="365" height="207" alt="Web Page" />
<div id="retina"></div>
</div></div>
<script type="text/javascript" src="http://faceblog-evolutions.googlecode.com/files/script.js"></script>
publikasikan dan terimakasih atas kunjungannya
- Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
- Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
- Apabila artikel yang berjudul "Membuat iPhone Zoom Efek Pada Gambar di Blog" ini bermanfaat, share ke jejaring sosial.
Konversi Kode