Cara Membuat Efek Shadow Pada Tepi Atau Garis Pinggir Blog

Bisa kita lihat pada gambar diatas, atau bisa juga langsung lihat ke outer atau tepi blog ini, itu adalah contoh dari efek shadow atau bayangan yang akan kita buat nanti, saya sarankan untuk pemasangan box shadow ini anda jangan memberikan border pada garis tepinya, karena diberikan shadow saja sudah cukup dan tampak lebih bagus. Disini anda dapat memperlebar efek shadow atau glownya sesuka hati anda, misalnya blog ini menggunakan padding 10 px, mungkin saja jika anda menginginkan bayangan yang lebih jauh lagi, anda bisa menambahkanya menjadi 15 bahkan 20px, tinggal disesuaikan dengan kebutuhan dan keperluan blog kita. Oh iya sobat satu lagi, saya sarankan untuk blog anda yang bertema terang lebih baik gunakanlah shadow #ffffff atau warna putih untuk hasil yang nampak bagus dan clean.

Selain itu, ternyata pemasangan feature ini juga sangat mudah dan praktis sekali, anda hanya perlu menambahkan beberapa kode script pada Edit HTML, tanpa menggunakan JavaScript. Well, bagi anda yang berminat untuk memasang efek shadow di blog anda, silahkan disimak yang berikut ini.

1. Login ke Blogger.

2. Pilih Template.

3. Klik Cadangkan/Pulihkan.

4. Klik Unduh Template Lengkap.

5. Setelah templatenya terunduh, klik kanan pada file tersebut, pilih "Open With" lalu buka dengan wordpad/notepad.

6. Cari salah satu kode di bawah ini (gunakan CTRL+F), karena pada umumnya kode setiap template sedikit berbeda.


content-outer atau content-wrapper atau wrap atau outer-wrapper atau html body .content-outer {

Keterangan: jika semua kode diatas tidak ada, carilah kode yang menunjukan outer wrapper atau tepi pada blog anda.

7. Lalu, letakkan kode di bawah ini tepat dibawah salah satu kode pada langkah ke-6 tadi.

border:2px solid #0000ff;
border-color:#9ecaed;
box-shadow:0 0 10px #666}

Keterangan:

• 2px = ketebalan border outer (jika tidak perlu, berikan saja 0px)
• #0000ff = warna border outer
• 10px = ketebalan efek shadow outer blog
• #666 = warna shadow outer blog

8. Atau bisa juga dengan kode di bawah ini

{background:transparent;-moz-box-shadow: 0px 0px 40px #333;-webkit-box-shadow: 0px 0px 40px #333;box-shadow: 0px 0px 40px #111;}