03 March 2014

CARA MEMBERI EFEK BAYANGAN PADA TEPI LAYOUT BLOG

Cara memberi efek bayangan pada tepi layout blog | Alhamdulillah setelah beberapa kali bereksperimen, akhirnya saya berhasil juga membuat efek bayangan pada seluruh tepi layout blog ini. Sebenarnya cara untuk membuat efek shadow ini bisa dikatakan sederhana karena kita hanya butuh menambahkan beberapa kode HTML saja :).

Oh ya, sebelum penjelasan lebih lanjut perlu diketahui kalau blog ini menggunakan template asli bawaan Blogger yang saya custom sendiri. Jadi bila anda yang menggunakan template hasil download mungkin saja strukturnya sedikit berbeda akan tetapi tidak ada salahnya juga untuk mencoba cara yang saya gunakan ini.

Langsung saja dipraktekkan :

1. Login ke blogger dan pada dashboard pilihlah template.

2. Pilih edit template.

3. Cari kode berikut :

.content-outer, .content-fauxcolumn-outer, .region-inner {
 min-width: $(content.width);
 max-width: $(content.width);
 _width: $(content.width);
  }

kode diatas akan kita modifikasi dengan penambahan kode ini :

box-shadow: 0px 0px 10px #000000;


Sehingga hasilnya menjadi :

.content-outer {
box-shadow: 0px 0px 10px #000000;
min-width: $(content.width);
max-width: $(content.width);
_width: $(content.width);
 }

.content-fauxcolumn-outer, .region-inner {
min-width: $(content.width);
max-width: $(content.width);
_width: $(content.width);
 }


Keterangan :
  • Kode yang berwarna merah adalah besar efek bayangan/shadow yang ditambahkan, disini anda dapat menambah atau menguraginya.
  • Kode yang berwarna biru adalah warna bayangan yang nantinya akan muncul, untuk pilihan lain sahabat dapat melihat daftar kode warna di blog ini.
4. Lakukan pratinjau terlebih dahulu.

5. Bila hasilnya sudah sesuaia dengan keinginan, simpan perubahan template.

Untuk demonya, tidak usah jauh-jauh karena sahabat dapat langsung melihatnya pada blog ini. Trik ini dapat diaplikasikan dengan menyesuaikan background blog masing-masing dengan efek bayangan yang akan ditambahkan. Semoga banyak dari anda yang berhasil...:)

Written by: goez ini
Tips dan Trik, Updated at: 9:41 PM

No comments:

Post a Comment

Silahkan berkomentar dengan bijak dan sopan. Kritik dan saran Anda adalah masukan berarti bagi saya.