Cara Membuat Shadow Effect Pada Gambar di Blog

Gambar memiliki faktor penting dlam website/Blog karena dengan gambar kita juga dapat menjadi daya tarik pengunjung dan betah diblog anda. Gambar atau image dapat juga kita menghiasnya agar bisa menampilkan lebih hidup, untuk menghiasnya gambar atau image saya akan memberikan berupa bayangan atau shadow.

berikut ini saya akan memberikan beberapa contoh gambar atau image yang menggunakan bayangan shadow ,

Contoh gambar 1

Untuk efek shadow seperti gambar diatas anda masuk ke editor template, kemudian anda cari kode ]]></b:skin> lalu copy kode dibawah ini dan pastekan diatasnya

.shadow1{
box-shadow: 5px 5px  #888888;
-webkit-box-shadow: 5px 5px  #888888;
-moz-box-shadow: 5px 5px  #888888;
}

Untuk menampilkan gambar anda menuju laman baru, selanjutnya anda kemode HTML dan terapkan kode dibawah ini pada content yang tersedia

<img class="shadow1" src="URL image" alt="alternative-text-image"/>

Contoh gambar 2

Untuk membuat efek shdow pada contoh gambar diatas masih dalam langkah yang sama masuk ke editor template, kemudian anda cari kode ]]></b:skin> lalu copy kode dibawah ini dan pastekan diatasnya

.shadow2{
box-shadow: 7px 7px 8px #888888;
-webkit-box-shadow: 7px 7px 8px #888888;
-moz-box-shadow: 7px 7px 8px #888888;
}

Untuk menampilkan gambar anda menuju laman baru, selanjutnya anda kemode HTML dan terapkan kode dibawah ini pada content yang tersedia

<img class="shadow2" src="URL image" alt="alternative-text-image"/>

Selanjutnya anda publikasikan

Demikian cara Membuat Shadow Effect Pada Gambar di Blog, semoga bermanfaat!

Share this post