Gallery Gambar Efek Smart Enlarger With Teks Deskripsi di Blog

Gallery Gambar Efek Smart Enlarger With Teks Deskripsi di Blog – jika biasanya adalah membuat gambar hanya dengan single image, maka sekarang sedikit berbeda dengan biasanya. Kali ini adalah tidak hanya satu gambar saja, melainkan beberapa gambar yang ingin ditampilkan kedalam posting blog yang ingin dijadikan sebagai gallery gambar. Dengan menambahkan kode CSS yang berbasis sebagai pembesar gambar atau efek zoom yang dapat menampilkan thumbnail gambar yang mengubah ukuran dimensi aslinya ketika mouse berguling ke arah gambar. Kode CSS bekerja dengan cara yang meniadakan kebutuhan untuk untuk user secara manual yang biasanya harus menentukan dimensi setiap gambar jika akan diperbesar, hal ini menghemat banyak waktu. Sebuah deskripsi tekstual juga dapat ditampilkan di bawah gambar yang diperbesar. Dengan begitu maka keterangan gambar dapat secara langsung di tuliskan kedalam elemen HTML gambar dan dapat langsung tampil saat gambar tersentuh mouse. Berikut adalah tutorial untuk cara membuat Gallery Gambar Efek Smart Enlarger With Teks Deskripsi di Blog di posting blog:

1. Login ke akun blogger.
2. Klik Template > Sesuaikan > Tingkat Lanjut > Tambahkan CSS (paste kode didalam kolom tersebut).

.ienlarger {
    float: left;
    clear: none;
    padding-bottom: 5px;
    padding-right: 5px;
}
.ienlarger a {
    display:block;
    text-decoration: none;
}
.ienlarger a:hover{
     position:relative;
}
.ienlarger span img {
    border: 1px solid #FFFFFF;
    margin-bottom: 8px;
}
.ienlarger a span {
    position: absolute;
    display:none;
    color: #FFCC00;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    background-color: #000000;
    font-weight: bold;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 13px;
    padding-left: 10px;
}
.ienlarger img {
border-width: 0;
}
.ienlarger a:hover span {
    display:block;
    top: 50px;
    left: 90px;
    z-index: 100;
}
.resize_thumb {
    width: 150px;
    height : 120px;
}
.resize_large{
    width: 500px;
    height : 300px;
}

3. Klik Terapkan ke Blog.

Selanjutnya apabila akan menampilkan Gallery Gambar Efek Smart Enlarger With Teks Deskripsi di Blog ini kedalam postingan maka langkahnya adalah saat posting menggunakan mode HTML kemudian masukan kode dibawah ini:

<div class="ienlarger"><a href="http://digratisan.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYFUOIYLSq51Dm04JdLr41CYkAYiNzpLOILpX_qTwX7P5koNCMs6wDgbmIz_jLxKvx8QD7_q3VlyOimCi8-yXalpiruD5R_lzxGZBkyecj6AcRcxiFd0vH6b6ipkxHF8SJ42PuZa0biR4/w250-h200-no/Faceblog+Evolutions+%25288%2529.jpg" alt="thumb" class="resize_thumb" /><span>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYFUOIYLSq51Dm04JdLr41CYkAYiNzpLOILpX_qTwX7P5koNCMs6wDgbmIz_jLxKvx8QD7_q3VlyOimCi8-yXalpiruD5R_lzxGZBkyecj6AcRcxiFd0vH6b6ipkxHF8SJ42PuZa0biR4/w250-h200-no/Faceblog+Evolutions+%25288%2529.jpg" alt="large" class="resize_large" /><br />
Silahkan isi dengan teks deskripsi sesuka anda</span></a></div>

<div class="ienlarger"><a href="http://digratisan.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUlLPryWC6M-6SRVNeMFbng5BaB4l3J09aYSyfxoBwudvwIgvV7EA6AC8CznaDCl6Cu1N1QX9Tmfq2CujBUZYdJCw15FIVbfb-IRrJ5h11TPWQvx09shdnll0gDlo4IeFnYMOrWDEb6Yw/w250-h200-no/Faceblog+Evolutions+%25287%2529.jpg" alt="thumb" class="resize_thumb" /><span>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUlLPryWC6M-6SRVNeMFbng5BaB4l3J09aYSyfxoBwudvwIgvV7EA6AC8CznaDCl6Cu1N1QX9Tmfq2CujBUZYdJCw15FIVbfb-IRrJ5h11TPWQvx09shdnll0gDlo4IeFnYMOrWDEb6Yw/w250-h200-no/Faceblog+Evolutions+%25287%2529.jpg" alt="large" class="resize_large" /><br />
Silahkan isi dengan teks deskripsi sesuka anda</span></a></div>

<div class="ienlarger"><a href="http://digratisan.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgugLQ4FQ0YDhrPO1ngRrTvJcOPWVMNWaR9DWhaAvwo4i15YvyMDlsSl8sOVgVOixVlnmvIcZZRS5m2W5dXjMkZ7204uUPQuVITX7YBizMTcQxGhnSCDVOhXVVL_EK3zAa4nTaJ3TMM04Y/w250-h200-no/Faceblog+Evolutions+%25285%2529.jpg" alt="thumb" class="resize_thumb" /><span>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgugLQ4FQ0YDhrPO1ngRrTvJcOPWVMNWaR9DWhaAvwo4i15YvyMDlsSl8sOVgVOixVlnmvIcZZRS5m2W5dXjMkZ7204uUPQuVITX7YBizMTcQxGhnSCDVOhXVVL_EK3zAa4nTaJ3TMM04Y/w250-h200-no/Faceblog+Evolutions+%25285%2529.jpg" alt="large" class="resize_large" /><br />
Silahkan isi dengan teks deskripsi sesuka anda</span></a></div>

<div class="ienlarger"><a href="http://digratisan.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3c74NeBxfWRAHOZg00xXeBL8S2uQtJm9P-7yseSYKnh1rgwkf1C9uY3b1eShYmRp2DgHpNGKAijn_7pjT3WzSsSuPiOnecOheHYIc6lFNwtH3Y9a6ORrj_BqhJSDw2o3SKU0kmGN6n60/w250-h200-no/Faceblog+Evolutions+%25286%2529.jpg" alt="thumb" class="resize_thumb" /><span>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3c74NeBxfWRAHOZg00xXeBL8S2uQtJm9P-7yseSYKnh1rgwkf1C9uY3b1eShYmRp2DgHpNGKAijn_7pjT3WzSsSuPiOnecOheHYIc6lFNwtH3Y9a6ORrj_BqhJSDw2o3SKU0kmGN6n60/w250-h200-no/Faceblog+Evolutions+%25286%2529.jpg" alt="large" class="resize_large" /><br />
Silahkan isi dengan teks deskripsi sesuka anda</span></a></div>

<div class="ienlarger"><a href="http://digratisan.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYPD9K8dSwIS1cu2AQGRcbnkJj8YLyXCgAxTDVJXiqv-1zfz1yaet1s_qaqgAqTko6q-z3R7zIxVXrM4WZvQfzRewnpksma8s09YUqpN9OHXxb1y7QOjaQ8sT9Q5ns42bDqzkBNUPXqt4/w300-h200-no/Faceblog+Evolutions+%25284%2529.jpg" alt="thumb" class="resize_thumb" /><span>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYPD9K8dSwIS1cu2AQGRcbnkJj8YLyXCgAxTDVJXiqv-1zfz1yaet1s_qaqgAqTko6q-z3R7zIxVXrM4WZvQfzRewnpksma8s09YUqpN9OHXxb1y7QOjaQ8sT9Q5ns42bDqzkBNUPXqt4/w300-h200-no/Faceblog+Evolutions+%25284%2529.jpg" alt="large" class="resize_large" /><br />
Silahkan isi dengan teks deskripsi sesuka anda</span></a></div>

<div class="ienlarger"><a href="http://digratisan.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvw_kSQLV6I_JJGadGbu2LRoRaML08ILDXZ-yyHiZZpiofipyLy6URUuVWLTmn3NtczB6hkz050oKhE-r_cOsVYHQF7m5zxa-MIAFqhu2r0gOzsKOd9gB57eIxjKtGUmie-3KTLOkdYd8/w300-h200-no/Faceblog+Evolutions+%25283%2529.jpg" alt="thumb" class="resize_thumb" /><span>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvw_kSQLV6I_JJGadGbu2LRoRaML08ILDXZ-yyHiZZpiofipyLy6URUuVWLTmn3NtczB6hkz050oKhE-r_cOsVYHQF7m5zxa-MIAFqhu2r0gOzsKOd9gB57eIxjKtGUmie-3KTLOkdYd8/w300-h200-no/Faceblog+Evolutions+%25283%2529.jpg" alt="large" class="resize_large" /><br />
Silahkan isi dengan teks deskripsi sesuka anda</span></a></div>
<br style="clear:left" />

Keterangan:
Jika ingin menambah gambar lebih banyak lagi maka hanya perlu menambahkan kode dibawah ini:

<div class="ienlarger"><a href="URL TUJUAN"><img src="URL GAMBAR" alt="thumb" class="resize_thumb" /><span>
<img src="URL GAMBAR" alt="large" class="resize_large" /><br />
TEKS DESKRIPSI GAMBAR</span></a></div>

Sebelum atau diatas kode:

<br style="clear:left" />

DEMO: