Selamat datang di: www.jual-rebanamarawis.com ( PUTRA PENDAWA )
Toko / Jual Alat Musik Online dan COD (Cash On Delivery)
Contact Person : Ahmad Royani, ST
TELP/SMS: 08561452465 / 087786060415 / 085286352611 (WA)
PIN BB : 2B4A736C
Home » , , » Cara Membuat Efek Shadow pada Gambar Posting Blog

Cara Membuat Efek Shadow pada Gambar Posting Blog



Salah satu fungsi gambar dalam sebuah tulisan dalam hal ini posting blog adalah untuk menambah daya tarik suatu halaman / postingan di mata pengunjung oleh karena itu para master blog diharapakan untuk bisa menyajikan gambar dengan tampilan yang semenarik mungkin, salah satu upayanya yang bisa dilakukan adalah dengan memberi efek pada gambar sehingga gambar akan tampil lebih menarik.

Salah satu efek gambar yang sering dipakai adah efek shadow atau bayangan yang tampak disekeliling gambar, dan efek ini sebenarnya bisa dibuat pada aplikasi gambar seperti Adobe Photoshop dan sejenisnya, namun jika kita tidak familier dengan aplikasi tersebut sementara gambar yang tersedia belum ada efek shadow atau bayangan, maka efek ini bisa dibuat dengan menggunakan beberapa property dari CSS3.

Penggunaan CSS untuk memberikan efek bayangan / shadow dapat dilakukan dalam dua kategori yaitu Efek yang digunakan pada setiap gambar yang berada dalam postingan yang akan kita bahas pada postingan kali ini, atau bisa juga hanya digunakan pada gambar tertentu secara khusus, baik gambar yang terletak dalam postingan tertentu atau gambar yang terdapat dalam widget. yang akan kita bahas pada postingan berikutnya

Adapun langkah - langkah yang dilakukan untuk memberikan efek shadow pada setiap gambar dalam postingan blog adalah sebagai berikut:
  • Login ke template Blogger
  • Pilih menu template kemudian jangan lupa backup template terlebih dahulu, untuk menghindari terjadinya resiko rusaknya template blog
  • Pilih "edit HTML" dan centang kotak "expand widget template"
  • Cari kode CSS berikut:
    .post img
  • Ganti dengan kode berikut ini:
    .post img{ padding:5px;   background:#fff;  
    -moz-box-shadow: 0 0 5px 5px #888;
    -webkit-box-shadow: 0 0 5px 5px #888;
    border-radius:5px;
    -moz-border-radius:5px;}
  • Jika kode  .post img  tidak ditemukan Copy dan paste kode tersebut diatas kode ]]></b:skin>
  • Simpan Template, kemudian lihat hasilnya kira kira seperti ini:




Keterangan:
Untuk mendapatkan hasil yang sesuai dengan keinginan kita, kita dapat mengedit property dari CSS tersebut diatas,

Demikian postingan kali ini mengenai tips cara membuat efek shadow / berbayang pada gambar di postingan blog dengan menggunakan kode CSS, semoga bermanfaat.

Share this article :

4 komentar:

Bali Villas mengatakan...

waduh,,, kok belum bisa ni om..? apanya yang kurang kira2... udah saya coba dengan cara di atas.

Obat Kuat Alami mengatakan...

nice info gan.... coba doeloe

dandylaksana mengatakan...

Mantep .

Info Dadalala mengatakan...

Hehehe alhamdulillah berhasil;, punya saya bisa mas. hehe

TOKO PUTRA PENDAWA

Contact Person : Ahmad Royani, ST


  • TELP/SMS: 08561452465 / 087786060415 / 085286352611 (WA)

  • PIN BB : 2B4A736C

  • Alamat : Perumahan Griya Asri Camar A - 18, Kp. Raden RT/RW: 03/07 Kel. Jati Raden Kec. Jati Sampurna Kota Bekasi Jawa Barat KP 17433
  • Klik PETA LOKASI PUTRAPENDAWA
  • Sedia Layanan Antar & bayar di tempat khusus wil Jakarta, Bogor, Depok, Tangerang dan Bekasi (Jabodetabek) dan Sekitarnya
    Terima Jasa Servis / Perbaikan
  •  
    Copyright © 2013. JUAL ALAT MUSIK MARAWIS & REBANA - All Rights Reserved
    Template Created by Mas Template Supported by jual kostum marawis & alat drum band
    Proudly powered by Blogger |