Minggu, 28 April 2019

Cara Memberi Efek Bayangan Pada Tepi Layout Blog

Cara memberi imbas bayangan pada tepi layout blog | Alhamdulillah sesudah beberapa kali bereksperimen, alhasil saya berhasil juga menciptakan efek bayangan pada seluruh tepi layout blog ini. Sebenarnya cara untuk menciptakan imbas shadow ini sanggup dikatakan sederhana alasannya yakni kita hanya butuh menambahkan beberapa instruksi HTML saja :).

Oh ya, sebelum klarifikasi lebih lanjut perlu diketahui bila blog ini memakai template orisinil bawaan Blogger yang saya custom sendiri. Makara bila anda yang memakai 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 instruksi berikut :

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

instruksi diatas akan kita modifikasi dengan penambahan instruksi 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 yakni besar efek bayangan/shadow yang ditambahkan, disini anda sanggup menambah atau menguraginya.
  • Kode yang berwarna biru yakni warna bayangan yang nantinya akan muncul, untuk pilihan lain sobat sanggup melihat daftar instruksi 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 alasannya yakni sobat sanggup pribadi melihatnya pada blog ini. Trik ini sanggup diaplikasikan dengan menyesuaikan background blog masing-masing dengan efek bayangan yang akan ditambahkan. Semoga banyak dari anda yang berhasil...:)

0 komentar:

Posting Komentar