Cara Membuat dan Menambahkan Efek Bayangan pada Gambar Blog (Blogspot)

Cara Membuat dan Menambahkan Efek Bayangan pada Gambar Blog (Blogspot)_ Dalam bahasa coding kita sering menyebutnya sebagai penambahan efek yang bernama shadow. Shadow sendiri memiliki fungsi untuk memberikan efek agar gambar seolah-olah ada bayangan. Untuk penerapannya sendiri kita cukup meletakkan fungsi di dalam CSS.

Dengan menerapkan efek shadow pada blog sobat makan akan membuat penampilan blog sobat menjadi lebih cantik dan menarik, tapi saya juga tidak menjamin semua orang akan suka pada efek ini, mungkin ada beberapa orang yang kurang suka dan saya pun juga tidak tahu alasannya hehehe.

Untuk cara yang akan saya bagikan memiliki dua opsi, yang pertama memberikan efek shadow otomatis/total. Maksutnya, semua gambar yang ada dalam postingan blog anda akan secara otomatis akan memiliki efek shadow nya.

Dan untuk opsi yang kedua adalah penambahan secara manual, jadi anda akan memberik efek shadow hanya di gambar-gambar tertentu dengan menambahkan sebuah css style di HTML nya.

Cara Memberi/Menambahkan efek bayangan di Gambar Blog Otomatis

Seperti yang sudah saya jelaskan di atas, cara pertama ini adalah berefek pada semua gambar di dalam postingan dan mungkin ini menjadi opsi yang tepat bagi kalian yang ingin menghemat waktu dan tenaga.

• Pertama login ke Blogger sobat
• pada menu dashboard pilih Theme/Tema
• Klik Edit HTML
• Cari ]]></b:skin> Untuk mempermudah gunakan CTRL+F
• Masukan kode dibawah ini tepat DIATAS ]]></b:skin> lalu Save dan lihat hasilnya.

.post-body img{background:#FFF;/* the background color around the image */
padding:15px;/* The Space Between Border and Image */
border-radius:50% 0;/* Rounded border */
box-shadow:0 0 15px #000;/* Shadow */
-moz-transition:all 1s;-webkit-transition:all 1s;-o-transition:all 1s}
.post-body img:hover{border-radius:0;/* This removes the border roundness (value 0) */
-moz-transition:all 1s;-webkit-transition:all 1s;-o-transition:all 1s;cursor:pointer}

Cara Memberi/Menambahkan efek bayangan di Gambar Blog dengan Manual

Seperti yang sudah saya jelaskan, untuk cara kedua ini tidak cocok untuk anda yang "hanya " ingin memberikan efek bayangan di gambar tertentu.
Pertama jika kalian mengupload sebuah gambar maka di dalam HTML akan muncuk kode seperti ini

<div class="separator" style="clear: both; text-align: center;">
.....ALAMAT GAMBAR....
</div>

Jika anda masih bingung dengan maksud di atas silahkan ikuti langkah berikut :

• Loggin ke akun Blogger sobat
• Pada menu dashboard pilih  Posts lalu kilik New Post
• Setelah muncul panel Editor silahkan Upload gambar bebas 
• Dan tekan HTML( klik HTML setelah selesai mengupload gambar)

• Setelah menemukan kode seperti di atas silahkan tambahkan CSS : box-shadow: 3px 3px 8px #000;
• Letakkan tepat disamping class="separator".
• Kurang lebih akan seperti ini :

<div class="separator" style="box-shadow: 3px 3px 8px #000; clear: both; text-align: center;">

• Dan yang terakhir sebelum anda pubikasikan silahkan di pertinjau dulu.

Sekian dari saya mengenai Cara Membuat dan Menambahkan Efek Bayangan pada Gambar Blog (Blogspot). Jika ingin Membuat sekaligus Menambahkan Efek Bayangan Pada Semua Gambar di Blogger, silahkan gunakan cara pertama, jika ingin memberikan bayangan di gambar-gambar tertentu silahkan gunakan cara kedua. Semoga bermafaat.

Share :