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

Gallery Gambar Efek Smart Enlarger With Teks Deskripsi di Blog

Gallery Gambar Efek Smart Enlarger With Teks Deskripsi Dengan CSS
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://mas-andes.blogspot.com/"><img src="https://lh6.googleusercontent.com/-LN4orXX2EPs/Uc7k44IWE7I/AAAAAAAAFPg/b5R4bg_KuTo/w250-h200-no/Faceblog+Evolutions+%25288%2529.jpg" alt="thumb" class="resize_thumb" /><span>
<img src="https://lh6.googleusercontent.com/-LN4orXX2EPs/Uc7k44IWE7I/AAAAAAAAFPg/b5R4bg_KuTo/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://mas-andes.blogspot.com/"><img src="https://lh3.googleusercontent.com/-4vgPBXKdps8/Uc7k4HAs5nI/AAAAAAAAFPU/b_wGXIq_osc/w250-h200-no/Faceblog+Evolutions+%25287%2529.jpg" alt="thumb" class="resize_thumb" /><span>
<img src="https://lh3.googleusercontent.com/-4vgPBXKdps8/Uc7k4HAs5nI/AAAAAAAAFPU/b_wGXIq_osc/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://mas-andes.blogspot.com/"><img src="https://lh3.googleusercontent.com/-6ISGaUJtN9E/Uc7k31R9S_I/AAAAAAAAFPM/Cy22cTiVfxE/w250-h200-no/Faceblog+Evolutions+%25285%2529.jpg" alt="thumb" class="resize_thumb" /><span>
<img src="https://lh3.googleusercontent.com/-6ISGaUJtN9E/Uc7k31R9S_I/AAAAAAAAFPM/Cy22cTiVfxE/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://mas-andes.blogspot.com/"><img src="https://lh5.googleusercontent.com/-Vnt0jVLT-D8/Uc7k3mbwGXI/AAAAAAAAFPI/Am71HH4p4Tw/w250-h200-no/Faceblog+Evolutions+%25286%2529.jpg" alt="thumb" class="resize_thumb" /><span>
<img src="https://lh5.googleusercontent.com/-Vnt0jVLT-D8/Uc7k3mbwGXI/AAAAAAAAFPI/Am71HH4p4Tw/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://mas-andes.blogspot.com/"><img src="https://lh3.googleusercontent.com/-20mQJIpgwmw/Uc7k2xhbmPI/AAAAAAAAFO8/bfkjRsKkSDw/w300-h200-no/Faceblog+Evolutions+%25284%2529.jpg" alt="thumb" class="resize_thumb" /><span>
<img src="https://lh3.googleusercontent.com/-20mQJIpgwmw/Uc7k2xhbmPI/AAAAAAAAFO8/bfkjRsKkSDw/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://mas-andes.blogspot.com/"><img src="https://lh5.googleusercontent.com/-FCRREgwPbsY/Uc7k2vXokxI/AAAAAAAAFO4/wioFYlP667c/w300-h200-no/Faceblog+Evolutions+%25283%2529.jpg" alt="thumb" class="resize_thumb" /><span>
<img src="https://lh5.googleusercontent.com/-FCRREgwPbsY/Uc7k2vXokxI/AAAAAAAAFO4/wioFYlP667c/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:


Berlangganan artikel via email

7 Response to "Gallery Gambar Efek Smart Enlarger With Teks Deskripsi di Blog"

bagus mas, kreatif banget sih. klw spt ini saya masih bodoh. heheeh
pingin belajar tp sussah banget yah?
oh iya slider blog saya kok ndak jalan yah?
kira2 apanya yah?

Balas

maknyos gan... mantappppp bnget.. tuh.. hehehehe....

Balas

wah mbak indah merendah nih ceritanya, saya juga masih tahap belajar kok mbak. cuma buang rasa penasaran aja jadinya secara otodidak dipahami sedikit2.
emang pake slider yang mana mbak yang gak bisa jalan?

Balas

hmmm.. waktu komen pasti sambil makan bakso ya mas jadi maknyos sama mantap :D

Balas

udah lama punya niat pengen buat posting pake gbr galeri mas...cuma baru tahu sekrng nih caranya... :)

manteppp nih mas Andes totur nya...
trims ya.. :)

Balas

Pengen deh .
Tp Susah ga ya mas buatnya?
Mklum msih bner" awam nih .
Istilah CSS aja baru dngr blm lama ini .
Wkkw .

Balas

Wah mantap.......
Pingin deh buat kayak ginian...
Tapi mau ditaruk dimana klo di blogku ya?

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 "Gallery Gambar Efek Smart Enlarger With Teks Deskripsi di Blog" ini bermanfaat, share ke jejaring sosial.
Konversi Kode