Cara Membuat Effect Pop Up Pada Gambar, Membuat Effect Pop Up Pada Gambar, Effect Pop Up Pada Gambar, Effect Pop Up Untuk Gambar, Tutorial Cara Membuat Effect Pop Up Pada Foto, Effect Foto, Foto Effect, Pop Up Effect, Edit Foto, Cara Membuat Effect Pop Up Pada Foto, Membuat Effect Pop Up Pada Foto, Effect Pop Up Pada Foto, Effect Pop Up Untuk Foto Dengan Simple Dan Mudah Di Pahami
Effect Pop Up Untuk Gambar/Foto Ini Bisa Juga Di Gunakan Untuk Membuat Gallery Foto.
Langsugn Aja Dah Ke Tutorialnya.
Caranya :
1. Login Ke Akun Blogger Sobat
2. Buat Postingan/Entry Baru
3. Beri Judul ( Jika Ingin Membuat Gallery Foto )
4. Lalu Copy/Paste Script Di Bawah Ke Dalam Page HTML :
<style>
.thumbnail{
position: relative;
z-index: 0;
}
{
background-colo
.thumbnail:hove
rr: transparent;
z-index: 50;
}
uk gambar pop up*/
position: absolute;
background-c
.thumbnail span{ /*aturan css un
tolor: lightyellow;
padding: 5px;
left: -1000px;
border: 1px solid gray;
up*/
border-width:
visibility: hidden;
}
.thumbnail span img{ /*aturan css untuk gambar po
p 0;
padding: 2px;
}
/*aturan css untuk gambar pop up pada saat hover*/
visibility: visible;
.thumbnail:hover span
{top: 0;
left: 60px; /*posisi dimana gambar pop up akan diletakkan secara horizontal */
}
</style>
5. Jika Sudah Tambahkan Lagi Script HTMLnya Di Bawah Script Yang Tadi Di Kopas :
position: relative;
z-index: 0;
}
{
background-colo
.thumbnail:hove
rr: transparent;
z-index: 50;
}
uk gambar pop up*/
position: absolute;
background-c
.thumbnail span{ /*aturan css un
tolor: lightyellow;
padding: 5px;
left: -1000px;
border: 1px solid gray;
up*/
border-width:
visibility: hidden;
}
.thumbnail span img{ /*aturan css untuk gambar po
p 0;
padding: 2px;
}
/*aturan css untuk gambar pop up pada saat hover*/
visibility: visible;
.thumbnail:hover span
{top: 0;
left: 60px; /*posisi dimana gambar pop up akan diletakkan secara horizontal */
}
</style>
5. Jika Sudah Tambahkan Lagi Script HTMLnya Di Bawah Script Yang Tadi Di Kopas :
<a class="thumbnail" href="Link Tujuan Gambar"><img src="Link Foto Pertama Yang Kecil" width="100px" height="66px" border="0" /><span><img src="Link Foto Kedua Yang Besar" /><br />Beautifulness of Bali, Indonesia</span></a>
a class="thumbnail" href="Link Tujuan Gambar"><img src="Link Foto Pertama Yang Kecil" width="100px" height="66px" border="0"/><span><img src="Link Foto Kedua Yang Besar" /><br />Bali beautiful sunset</span></a>
6. Save Dan Lihat Hasilnya :D
Selamat Mencoba dan Berkreasi ^_^
Jika Tidak Ada Yang Di Mengerti Bisa Tinggalkan Komentar Di Postingan Ini :D dan Insyaallah Saya Bisa Membantu :D
No comments:
Post a Comment