Membuat Widget Gambar Slide Dengan Deskripsi di Blog

Ketika menyampaikan informasi terkadang kita menambahkan widget berisi gambar di blog kita. Gambar seperti banner memang terlihat menarik dan memperindah blog kita, tetapi tidak semua gambar berisi infomasi yang cukup bagi pengunjung kita sehingga gambar sering dialihkan ke alamat lain untuk info detailnya. Sekarang kita dapat memperjelas maksud yang terkandung dalam gambar banner dengan beberapa kalimat (kalimat ajakan, kalimat inti, kalimat penjelas, dsb) melalui script widget dengan deskripsi singkat. Seperti inilah contoh gambar tampilannya:

Membuat Widget Gambar Slide dengan Deskripsi

Selain dengan gambar yang menarik, menambahkan tulisan singkat diharapkan dapat memperjelas informasi yang hendak kita sampaikan. Pemasangan widget seperti ini sangat cocok digunakan untuk menampilkan informasi berupa kegiatan terdekat, peringatan, undangan, penawaran, dsb. Sekarang bagaimana cara membuatnya? Anda dapat mengikuti langkah-langkah berikut ini:

1. Buka blogger.com dan login ke dalam akun blog Anda.
2. Pilih Tata Letak (Layout) blog.
3. Pilih Tambahkan Gadget (Add Gadget) >> HTML/JavaScript.
4. Salin dan tempelkan kode script di bawah ini.

<style>.image-box { width:100%px;height:280px;overflow:hidden;background-color:transparent; border:0px solid #transparent;float:center;margin:0px 0px; font:normal normal 12px/1.4 Segoe,"Segoe UI",Arial,Sans-Serif; color:#333; } .image-container, .image-details {height:280px;border:5px solid transparent;background-color:#transparent; transition:margin-top .4s ease-out .4s; } .image-container img { width:100%;height:280px;padding:0 0;margin:0 0;border:none;outline:none;max-width:none; max-height:none; background-color:transparent; } .image-details h4, .image-details p { margin:0 0 .2em;padding:0 0;height:70px; } .image-details h4 { font-size:120%;height:auto; } .image-details .details { padding:10px 12px;overflow:hidden; } .image-details .more { color:white;text-decoration:none;display:block; text-align:center;font-weight:bold;background-color:#f9a;height:26px;line-height:26px;margin:10px 0 0; } .image-box:hover {border-color:#bbb; width:100%; height:280px;} .image-box:hover .image-container {margin-top:-160px} .image-details .more:hover {background-color:black} </style> <div class="image-box-wrapper" id="image-box-wrapper"> <div class="image-box"> <div class="image-container"> <img width="100%" height="280" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIpWcc5NIpjsbuLIaoEKR94CdtVLCKCfr8Y3FmD9tMotq7eI14LZR2I5SuUq3qRhMFoBVciemgGYtBC16hreykyU4f4m42Ye-4TRhwnc979MHNnThOw87IbV3n-2yiz-gETg6Vxt5cCLc/s1600/3.jpg" alt="IMAGE TITLE" /> </div><div class="image-details"> <div class="details"> <h4>TITLE</h4><p>TEXT DESCRIPTION</p><p><a class="more" href="LINK ADDRESS">READ MORE</a></p></div></div></div><div style="clear:both;"></div></div>

Keterangan:

Kode script di atas memakai gambar persegi dengan ukuran 280px x 280px dan untuk mengganti gambar cukup dengan mengganti URL gambar di bawah ini dengan URL gambar Anda sendiri.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIpWcc5NIpjsbuLIaoEKR94CdtVLCKCfr8Y3FmD9tMotq7eI14LZR2I5SuUq3qRhMFoBVciemgGYtBC16hreykyU4f4m42Ye-4TRhwnc979MHNnThOw87IbV3n-2yiz-gETg6Vxt5cCLc/s1600/3.jpg

Sedangkan untuk mengkostomisasi warna dan ukuran Anda dapat menyesuaikan dan mengubahnya sesuai dengan selera dan keperluan Anda.

5. Klik Simpan (Save) >> Simpan Setelan untuk menampilkannya pada blog.

Diperbarui pada 20 Januari 2017.