Tutorial Blog Mas Andes Official - Tips Blogging | Trik Blogger | Tutorial Blogger | Widget Blogger | Blog Design | Taktik SEO (Search Engine Optimization)

Membuat iPhone Zoom Efek Pada Gambar di Blog

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://lh4.googleusercontent.com/-7w2TAbHW1uc/UdCBpBOGVXI/AAAAAAAAFdM/8S6b_VUXBzI/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://lh6.googleusercontent.com/-3m-TlS1Z5Ao/UdCBpmqkHUI/AAAAAAAAFdU/Hmtz2CNaoT8/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://lh6.googleusercontent.com/-3m-TlS1Z5Ao/UdCBpmqkHUI/AAAAAAAAFdU/Hmtz2CNaoT8/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 :

faceblog evolutions

Berlangganan artikel via email

16 Response to "Membuat iPhone Zoom Efek Pada Gambar di Blog"

wah keren mas. terimakasih sudah berbagi !!

Balas

siiip , mantap mas.... izin pasang ya

Balas

Makasih banyak tutorialnya kang. Sayang gak bisa nyobain soalnya ngeblog cuman pakai hp doang :(

Balas

wah mantap mas tutor nya, thank sudah berbagi, ijin nyoba mas, maaf baru bisa berkunjung lagi

Balas

Benar-benar sangat mantap sekalu ini sobat, ijin praktek dulu nih
terima kasih sudah berbagi

Balas

keren ya.. tapi entar kelihatan aneh gak.. :D .

Balas

disini jujur saya akui tutor2nya keren2 mas..coba bikin template jga mas. :D

Balas

sorry mas..cuman mau tanya aja. sampen orang SCTV ya? :)

Balas

Terima kasih Mas Andes Tutornya, selalu up to date :) Keren..
Happy Blogging

Balas

mana orangnya...? Salam kenal dari saudara MUDA mas..hahaha.

Balas

mantab tips bloggernya sobat

Balas

keren2..! thx sharenya sob *smile

Balas

Mantab nih, selalu ada tutorial baru dan saya selalu save kodenya hehe :D
Makasih tutorialnya sob :)

Balas

tak punye iphone bro

Balas

gan, minta kode html widget ini utk di edit html template

Balas

taruh diatas kode ]]></b:skin>

#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

Balas
  • 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