Membuat Gallery Gambar Efek Pop Up Image dengan CSS - Sebelumnya saya pernah memposting
Membuat Efek Gambar dengan 3D Flip dengan CSS di blog. Hari ini saya akan membahas tentang Membuat Gallery Gambar Efek Pop Up Image dengan CSS. Agar lebih jelasnya, berikut adalah tutorialnya tentang cara Membuat Gallery Gambar Efek Pop Up Image dengan CSS ke dalam posting blog :
Simak Langkah-Langkah di bawah ini :
1. Login ke akun
blogger Anda.
2. Klik
Template Edit HTML
3. Kemudian tekan
CTRL+F cari kode
]]></b:skin> atau
</style>
4. Lalu tambahkan script
CSS berikut ini tepat di atas kode
]]></b:skin> atau
</style>
.gallerycontainer{
position: relative;
}
.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
}
.thumbnail:hover{
background-color: transparent;
}
.thumbnail:hover img{
border: 1px solid blue;
}
.thumbnail span{
position: absolute;
background-color: lightyellow;<
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{
visibility: visible;
top: 0;
left: 230px;
z-index: 50;
}
5. Simpan Template
Penerapannya :
Supaya kode di atas muncul di posting blog Anda
Silahkan buat entri baru
gunakan mode HTML kemudian masukkan kode berikut ini kedalam halaman posting blog Anda.
<div class="gallerycontainer">
<a class="thumbnail" href="http://the-warasi.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXm5UfUAjcuYWiw10_aC3SFF4tKY58tfc2Iezi7xhPirGGJkKKDU3vck2QDKurPuGeVCM33swwjwL3FQVbEnx-J2VChyphenhyphengVN9qzGvIPbb50HndM_mshw9EFfWoft4TMI6jfTNOpiphKwHeT/s1600/BIE_Demo-1.jpg" width="100px" height="66px" /><span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXm5UfUAjcuYWiw10_aC3SFF4tKY58tfc2Iezi7xhPirGGJkKKDU3vck2QDKurPuGeVCM33swwjwL3FQVbEnx-J2VChyphenhyphengVN9qzGvIPbb50HndM_mshw9EFfWoft4TMI6jfTNOpiphKwHeT/s1600/BIE_Demo-1.jpg" width="500px" height="300px"/><br />Silahkan isi dengan teks deskripsi sesuka anda</span></a>
<a class="thumbnail" href="http://the-warasi.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipqeDcjt8Vu7U7F6O4SPrb6xlPXwaoegIz4hyphenhyphenPYwEG-9obx6WGHpl5VJgArv9Rw-mCloTcTdC2LEcmcjtGfk8pnclbTNcUsKV0O3a9on296UoOqG80pgZ8efTbiDE0eDH4EXc7BHGRsjIG/s1600/BIE_Demo-2.jpg" width="100px" height="66px" /><span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipqeDcjt8Vu7U7F6O4SPrb6xlPXwaoegIz4hyphenhyphenPYwEG-9obx6WGHpl5VJgArv9Rw-mCloTcTdC2LEcmcjtGfk8pnclbTNcUsKV0O3a9on296UoOqG80pgZ8efTbiDE0eDH4EXc7BHGRsjIG/s1600/BIE_Demo-2.jpg" width="500px" height="300px"/><br />Silahkan isi dengan teks deskripsi sesuka anda</span></a>
<br />
<a class="thumbnail" href="http://the-warasi.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbNoJf9Hp2EpowacootjpY3oRMUu9z-blDLZCs9QpryNfL_jIrWVU6lAM9E7H7rVUAOAwHRQlTQzYV3FhEX3IRX4X2OAkp4PCzdrkNiv0_ZUv3QZnrHicm1ACdt3BhjnqUnPb_LHkk8Bu8/s1600/BIE_Demo-3.jpg" width="100px" height="66px" /><span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbNoJf9Hp2EpowacootjpY3oRMUu9z-blDLZCs9QpryNfL_jIrWVU6lAM9E7H7rVUAOAwHRQlTQzYV3FhEX3IRX4X2OAkp4PCzdrkNiv0_ZUv3QZnrHicm1ACdt3BhjnqUnPb_LHkk8Bu8/s1600/BIE_Demo-3.jpg" width="500px" height="300px"/><br />Silahkan isi dengan teks deskripsi sesuka anda</span></a>
<a class="thumbnail" href="http://the-warasi.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3g6zMs1kok9FgMcFUS0qWmm06u3ZGmBUUrW6M18wXSIJ5trArqSagk94epkJKIlSK4Yj4uDimWJPSB11PPs3UfiAWTJgzMK7gdKeG9oGrPUxQS2wgT07BSVFibxwfthbhjqtnmOefSUns/s1600/BIE_Demo-4.jpg" width="100px" height="66px" /><span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3g6zMs1kok9FgMcFUS0qWmm06u3ZGmBUUrW6M18wXSIJ5trArqSagk94epkJKIlSK4Yj4uDimWJPSB11PPs3UfiAWTJgzMK7gdKeG9oGrPUxQS2wgT07BSVFibxwfthbhjqtnmOefSUns/s1600/BIE_Demo-4.jpg" width="500px" height="300px"/><br />Silahkan isi dengan teks deskripsi sesuka anda</span></a>
<br />
<a class="thumbnail" href="http://the-warasi.blogspot.com/">Blog Alvin Warasi<span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzyuBrDEzmuaojp2hEG_ExnRNxGKquiYIrh3El8_TOBkfsf2qlqE4fl1eyQX6V7d6SW7rCWSuaegtdupKkAE1QyTye51i1j0wNA7orCYLAfoZQxOjW92IlYqCgRvtYlLNFtfaUzSmDltqh/s1600/BlogIrvanEfendy.PNG" width="500px" height="300px"/><br />Blog Alvin Warasi</span></a>
</div>
Keterangan :
Ganti http://the-warasi.blogspot.com dengan link tujuan yang Anda inginkan.
Ganti URL Gambar dengan gambar lain yang di inginkan.
DEMO-nya seperti ini di bawah ini :
Blogger
Google+
Facebook
Twitter