Membuat Border Image Shadow Keren di Postingan Blog

Menampilkan gambar atau image didalam postingan merupakan keharusan bagi blogger, tujuannya adalah agar postingan lebih menarik dan mempunyai nilai profesional. Gambar yang diposting pun seharusnya adalah hasil karya sendiri atau jika foto adalah hasil jepretan sendiri, namun jika itu tidak mungkin kita bisa mencari alternatif lainnya.

Menampilkan gambar didalam postingan biasaya di lakukan oleh para blogger secara default, artinya para blogger tidak melakukan setting lagi agar tampilan gambar lebih cantik lagi, jika saja kita mau melakukan sedikit edit kode, hasilnya akan lebih cantik. coba perhatikan gambar dibawah ini

GAMBAR 1

GAMBAR 2
Mas Trigus Image=


Kita bisa membedakan antara gambar 1 dan gambar 2 dari border efek shadow, tentunya gambar 1 adalah hasil postingan default, sedangkan untuk gambar 2 saya melakukan sedikit otak atik  kode. apa kalian tertarik, saya akan bagi caranya.

Ketika sobat memasukkan gambar pada postingan, kode html yang muncul secara default adalah seperti ini: (kode diambil dari gambar 1)
<div class="separator" style="clear: both; text-align: center;"><a href="http://3.bp.blogspot.com/-2hI4orl5cwc/VVQfTHBBtiI/AAAAAAAABBo/RV9U8ZIDZLo/s1600/CINDERELLA%2B2015.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="236" src="http://3.bp.blogspot.com/-2hI4orl5cwc/VVQfTHBBtiI/AAAAAAAABBo/RV9U8ZIDZLo/s320/CINDERELLA%2B2015.jpg" width="320" /></a></div>
Perhatikan kode yang saya beri warna merah, itu adalah link gambar yang telah berhasil posting, copi link gambar tersebut dan paste pada suatu tempat yang kosong (bisa copas ke Notepad) setelah itu hapus semua kode diatas dan ganti kode dibawah ini:
<div style="text-align: center;">
<span style="font-family: Arial, Helvetica, Verdana, sans-serif;"><img alt="Mas Trigus Image="0" src="
http://3.bp.blogspot.com/-2hI4orl5cwc/VVQfTHBBtiI/AAAAAAAABBo/RV9U8ZIDZLo/s1600/CINDERELLA%2B2015.jpg" style="-webkit-box-shadow: rgb(153, 153, 153) 0px 0px 6px; -webkit-transition: 0.5s; background-color: white; background-image: none; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; border: 1px solid rgb(153, 153, 153); box-shadow: rgb(153, 153, 153) 0px 0px 6px; max-width: 90%; outline: none; padding: 6px;" title="Mas Trigus Image" width="485" /></span></div>
Jika sudah silahkan letakkan link gambar kamu tepat seperti seperti kode yang saya beri warna merah, dan untuk teks yang warna biru  berguna untuk memberika ALT dan TITLE terhadap gambar yang telah kamu posting.

Nah jika cara cara diatas sudah sobat lakukan dengan benar, sobat seudah mempunyai postingan gambar dengan Efek Border Image Shadow Keren. Selamat Mencoba Kawan

Disqus Comments