Efek Shadow Pada Halaman

Tutorial kali ini adalah cara membuat Efek Shadow Pada Halaman yang secara garis besar berhubungan dengan CSS3 Box Shadow. Apa itu Box Sahdow? Dalam Css Box Shadow diartikan sebagai efek bayangan pada suatu kotak Elemen. Dalam kata lain Box tersebut seperti berada di atas melayang dengan bayangannya sendiri itu.

BOX-SHADOW

INSET

• Box shadow itu ada 2. Box-shadow untuk bayangan di luar dan Box-shadow:inset untuk bayangan di dalam. Metode box shadow yang kita gunakan untuk memenuhi persyaratan sebagaimana sesuai dengan judul postingan kali ini "Efek Shadow Pada Halaman" adalah box-shadow.


• Seletah kita mengetahui Metode box-shadow yang di gunakan, sekarang tahap selanjutnya adalah melakukan peletakan box-shadow melayang di udara tepatnya bagian bawah dan menyembunyikannya di bawah layar komputer.


• Tujuannya agar blog mempunyai style baru yaitu bayangan di tepi bawah.
  Contohnya seperti apa? Yuk Lihat gambar demo di bawah!
  Klik gambar untuk memperbesar
  
  Bayangan tersebut akan terus berada di bawah karna efek dari pada Css Position Property Fixed

Bagaimana cara membuatnya

1. Buka Blogger.com dengan Password dan ID
2. Buka Layout/Design
3. Buka Edit HTML
4. Cari kode </body> kemudian letakan kode berikut sebelum kode </body> tadi :

<div style='display:scroll; position: fixed; bottom:-20px; right:0px; width:100%; border:0; box-shadow:0 0 100px #000;'>Farixsantips</div>

5. Selesai. Mudah bukan?

http://farixsantips.blogspot.com/2011/12/efek-shadow-pada-halaman.html

Cara Memberi Efek Glow Border Pada Blog

 

 

Mungkin maksud teman-teman yang ingin dicari tutorial, cara membuat efek bayangan pada blog, memberi efek glow, membuat efek glow border pada blog. Kalau belum jelas lihat saja gambarnya. Yang ada garis hitam sedikit itu. Efek Glow Border ini banyak dijumpai di blog/website teman-teman kita, contohnya di blognya http://aku-freaky-falcon.blogspot.com/ disana terdapat garis di pinggir terlihat bayangan.hitam. Dengan memberikan efek glow border pada blog kita akan terlihat cantik dan unik. Untuk kamu yang ingin membuatnya wajib memperhatikan langkah-langkah cara membuatnya :

• Tentunya kamu masuk ke akun blogger kamu.
• Kemudian masuk ke Rancangan > Edit Html > jangan lupa centang Expand Template Widget.
• Tekan CTRL + F dan cari kode content-outer atau content-wrapper.
• Jika sudah ketemu silahkan salin kode berikut tepat di BAWAH kode tadi.

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

 Kode yang saya beri warna merah muda/Pink boleh kamu ganti sesuai keinginan kamu :).

• Jika sudah jangan lupa klik SIMPAN TEMPLATE dan lihat hasilnya. Kalau anda tidak suka dengan efek tersebut tinggal hapus saja kode yang tadi. Jadi, selamat mencoba dan semoga sukses.

Sumber : http://putupunyablog.blogspot.com/2012/04/cara-memberi-efek-glow-border-pada-blog.html#ixzz2BzqQGTkA