Cara membuat gallery foto menggunakan CSS Float di blogger - Sempat terhenti melakukan posting di artikel, saya sempatkan untuk hari ini menulis artikel baru. Sebenarnya ini juga merupakan request dari teman, yang sebelumnya request di Membuat foto galley di posting.
Minta ada transparantnya, maka dari itu ini artikel yang saya dapatkan dari Tutorial blogger saya coba untuk share di sini. Dalam contoh tidak terlihat kalau ada transparantnya, namun bisa saat cursor di dekatkan di gambar maka transparnt akan muncul, lihat image di bawah ini :
Untuk caranya hampir sama dengan artikel sebelumnya di bagian 1, langsung saja di praktekkan
1. Login blogger anda
2. Masuk di rancangan
3. Pilih edit HTML
4. Jangan lupa backup dulu template sebelumnya
5. Cari kode </head>
6. Masukkan kode di bawah ini sebelum kode di atas
<style type="text/css">Catatan :
div.gallery
{
margin: 2px;
border: 2px solid #D8D8D8;
background-color:#ECECEC;
height: auto;
width: auto;
float: left;
text-align: center;
}
div.gallery img
{
height: 100px;
width: 125px;
display: inline;
margin: 5px;
border: 2px solid #ffffff;
}
div.gallery a:hover img
{
border: 2px solid #000000;
/* for IE */
filter:alpha(opacity=40);
/* CSS3 standard */
opacity:0.4;
}
div.label
{
border: 2px solid #D2D2D2;
background-color:#ffffff;
text-align: center;
font-weight: normal;
height: 40px;
width: 120px;
padding:3px;
margin: 5px;
}
</style>
- Atur nilai lebar gambar/ foto dan kotak label pada kode berwarna merah diatas (nilainya sama).
- Atur nilai tinggi gambar/foto pada kode berwarna biru diatas.
- Atur nilai tinggi kotak label pada kode berwarna ping diatas.
7. Simpan template
Selanjutnya tinggal anda mau di masukin di posting atau di widget, pasti anda sudah tahu seperti pada bagian pertama, cara membuat galley foto di posting. Widget tinggal pasang di html/javascript. Dan kode yang di masukkan adalah di bawah ini.
Masukkan kode di posting atau widget javascript seperti bawah ini :
<div class="gallery">Catatan :
<a target="_blank" href="URL TUJUAN"><img src="ULR GAMBAR/FOTO"/></a>
<div class="label">Buat label gambar disini atau diskripsi</div>
</div>
<div class="gallery">
<a target="_blank" href="URL TUJUAN"><img src="ULR GAMBAR/FOTO"/></a>
<div class="label">Buat label gambar disini atau diskripsi</div>
</div>
- Silahkan anda ganti tulisan berwarna ping dengan URL TUJUAN milik anda, dan warna biru dengan label gambar/foto anda.
- Silahkan anda ganti tulisan berwarna merah dengan ULR GAMBAR/FOTO milik anda, dan warna biru dengan label gambar/foto anda.
- Untuk menambahkan gambar/foto, anda tinggal menambah kode berikut : <div class="gallery"> <a target="_blank" href="URL TUJUAN"><img src="ULR GAMBAR/FOTO"/></a> <div class="label">Buat label gambar disini</div> </div> Tinggal simpan atau terbitkan, maka nanti hasilnya seperti gambar di atas. Semoga artikel ini bermanfaat untuk anda. Sumber : http://www.wartabeta.com/2012/05/cara-membuat-gallery-foto-menggunakan.html#
Posting Komentar