Buat Bayangan Pada Sidebar Blogger (Shadow CSS)

K

ira-kira menurut kawan-kawan kalo ada template yang menggunakan efek-efek aneh dan keren pada saat blogwalking atau browsing pada sebuah Blog atau Web bagaimana?? Yang pada postingan sebelumnya kita sudah mencoba membuat Hover Pelangi dengan CSS juga. Seperti halnya kita dibawa kepada sesuatu yang indah di dalamnya... Membaca pun rasanya bisa sangat menyenangkan...

Pasti salah satu kawan ada yang bilang, "itu indah sekali, keren, waaaah...", dll. Nah, dalam pembahasan kita kali ini, kita akan coba membuat BOX SHADOW CSS. Yang mana akan ditempatkan di Sidebar. Tapi kalau kawan-kawan ingin menempatkannya di tempat lain, ya silahkan. Tapi pahami dulu Step-step di bawah ini:

• Login Blogger dulu kan tentunya.
• Pada Dashboard klik Design/Rancangan.
• Lalu cari Edit HTML dan jangan lupa beri tanda centang (expand widget).
• Saya sarankan untuk Download template lengkap, agar apabila terjadi sesuatu yang tidak diinginkan, kita bisa merubahnya kembali. Tapi kayaknya ga mungkin, coz pengeditan CSS tidak begitu mengerikan dibanding Edit HTML pada Body HTML.
• Copas kode di bawah ini :

  -moz-box-shadow: 0px 0px 15px #000030;
  -khtml-box-shadow: 0px 0px 15px #000030;
  -webkit-box-shadow: 0px 0px 15px #000030;

• Letakkan setelah #sidebar-wrapper dan tanda { . Bisa diletakkan setelahnya atau di bawahnya.
• Cari kode di atas dengan menggunakan CTRL+F pada browser yang kawan gunakan.
• Save Template dan lihat hasilnya.

Dalam font yang ditebalkan di atas, adalah ketebalan bayangan kotak. Kalau mau diganti, silahkan...

Untuk -moz-box-shadow adalah script yang digunakan untuk Mozilla, -khtml-box-shadow kalau ga salah digunakan untuk Opera, sedangkan -webkit-box-shadowSafari. Tapi kawan-kawan harus tetap memasukkan semua, karena yang melihat blog kita bukan dari pengguna Satu Browser saja.
Untuk Shadow pada IE masih dalam proses searching, tapi jika ada kawan-kawan yang tau, mohon dishare linknya...

Selamat mencoba dan Happy Blogging...