Tutorial Memperbaiki Komputer

Halo semua,setelah posting tentang Resolusi Juara 2012,saya akan posting tentang Efek Shadow Pada Blog.Nah efek ini dapat digunakan untuk memperindah blog anda dengan beberapa efek bayangan yang muncul.Efek ini dapat digunakan pada page blog,kotak,gambar,atau widget.Nah tertarik?Silahkan ikuti tutorial berikut ini.




1. Pertama, menambahkan bayangan kekanan dan bayangan kebawah pada sebuah kotak, tanpa memberi efek blur,berikut scriptnya :

<style type="text/css">

.box-shadow1{

width:330px;

height:50px;

padding:5px;

margin:0 auto;

color:#fff;

background:#00378A;

border: 1px solid black;

box-shadow: 7px 7px #818181;

-webkit-box-shadow: 7px 7px #818181;

-moz-box-shadow: 7px 7px #818181;

}

</style>

<div class="box-shadow1">TEKS DISINI</div>

 Nah ini hasilnya :





2. Kedua, menambahkan bayangan kekanan dan bayangan kebawah pada sebuah kotak, dengan memberi efek blur:

<style type="text/css">

.box-shadow2{

width:330px;

height:50px;

padding:5px;

margin:0 auto;

color:#fff;

background:#00378A;

border: 1px solid black;

box-shadow: 7px 7px 8px #818181;

-webkit-box-shadow: 7px 7px 8px #818181;

-moz-box-shadow: 7px 7px 8px #818181;

}

</style>

<div class="box-shadow2">TEKS DISINI</div>

3.  Ketiga, menambahkan bayangan kekiri dan bayangan keatas pada sebuah kotak, dengan memberi efek blur:

<style type="text/css">

.box-shadow3{

width:330px;

height:50px;

padding:5px;

margin:0 auto;

color:#fff;

background:#00378A;

border: 1px solid black;

box-shadow: -7px -7px 8px #818181;

-webkit-box-shadow: -7px -7px 8px #818181;

-moz-box-shadow: -7px -7px 8px #818181;

}

</style>

<div class="box-shadow3">TEKS DISINI</div>

4. keempat, menambahkan bayangan kekanan dan bayangan kebawah pada sebuah gambar, dengan memberi efek blur :

<style type="text/css">

.box-shadow4{

width:300px;

height:300px;

padding:5px;

margin:0 auto;

color:#ooo;

background:#00378A;

background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR65aNDpqVeoxP251gF8lNssK1N1yuwX5LiCIAP6ya_Df3dzfcERuAIv9AVV0FV2Edm2L_-ecWWpTejgVVlaoTkEBhIi_46qCw0rcd_EksG1xF7YR3ZdHZrAFujgJXBMOkszVEhYpxz51N/s300/Gardu.jpg) no-repeat 0px 0px;

opacity:0.7;

box-shadow: 6px 6px 10px #818181;

-webkit-box-shadow: 6px 6px 10px #818181;

-moz-box-shadow: 6px 6px 10px #818181;

}

</style>

<br />

<div class="box-shadow4">TEKS DISINI</div>

Nah sekarang bagaimana cara menggunakannya pada page blog atau widget ?
Silahkan anda copas code yang berwarna merah untuk menambahkan pada widget atau page blog.

Selesai deh tutorial saya kali ini.Semoga Bermanfaat ^_^

eNBe : Untuk kode yang berwarna hijau adalah kode warna bayangan,dapat diubah sesuai yang anda inginkan