Cari Artikel Blog Ini

Total Tayangan Halaman

MENAMPILKAN EFEK BAYANG PADA IMAGE POSTINGAN

Penampilan image pada postingan akan lebih hidup jika ditambah dengan efek bayang yang akan muncul jika image tersebut disorot mouse. Warna dan ukuran dari efek bayang image tersebut dapat kita atur sesuai dengan warna dan ukuran yang kita kehendaki, paling tidak sesuai dengan latar postingan agar tampilannya bertambah baik.
Trik ini sebenarnya telah dibahas beberapa kali yaitu tentang Hover atau penampilan berubah ketika disorot mouse.
Coba anda lihat link-link dibawah ini (semuanya tentang Hover), untuk mempelajarinya.

Cara untuk menampilkan Efek Bayang (box shadow) pada image postingan adalah sebagai berikut :
  • Masuk ke Blogger
  • Pilih Rancangan - Edit HTML
  • Cari kode :

    .post img {
    padding:4px;
    border:0px solid $bordercolor;
    }


  • Copy kode dibawah ini dan paste tepat dibawah kode tadi

    .post img:hover{
    -webkit-box-shadow:6px 4px 9px #750000;
    -moz-box-shadow: 6px 4px 9px #750000;
    box-shadow : 6px 4px 9px #750000;}
    .post blockquote {
    margin:1em 20px;
    }


    Silahkan anda ganti kode yang berwarna merah
    • #750000 (coklat tua) : merupakan warna dari dari efek bayang yang muncul ketika disorot mouse. Silahkan ganti dengan warna yang ngin anda tampilkan.
    • 6px 4px 9px : merupakan ukuran efek bayang. Ganti dengan ukuran yang ingin anda tampilkan.
  • Setelah selesai, klik tombol Simpan Template.
  • Selesai.

Jika artikel ini bermanfaat..? Bagikan lewat :


BACA JUGA ARTIKEL DIBAWAH INI



Comments
1 Comments

1 komentar :

Sumber Media Artikel mengatakan...

ouhh akhirnya dpat juga triknya..
thanks yah gan !!

Posting Komentar

Ceritakan keberhasilan/kegagalan anda setelah mencoba Tutorial Blogger pada kotak komentar. Kritik dan Saran juga boleh asal sifatnya membangun...!!!