Cara Membuat Border Shadow disekeliling Blog
Selamat
malam sobat blogger sekalian. Kali ini saya ingin sharing sedikit mengenai
salah satu trik untuk mempercantik
tampilan blog sobat. Yaitu membuat border sekeliling blog dengan efek shadow.
Untuk melihat contoh border shadow sobat bisa lihat pada bagian postingan blog saya ini,
cantik bukan?
Nah kurang lebih hasilnya akan seperti itu, namun yang akan kita
pasang disini adalah pada bagian blog yang lebih besar ( meliputi header, post,sidebar dan footer). Oke
untuk membuatnya langsung saja ikuti langkah-langkah berikut:
1. Login ke blogspot / blogger.com
2. Template > Edit html
2. Template > Edit html
3. Cari kode : .content-inner { atau
.container{
4. Tambahkan kode berikut di bawahnya :
-moz-border-radius: 35px;
border-radius: 0px;
-moz-box-shadow: 0 0 6px 6px #3b5998;
-webkit-box-shadow: 0 0 6px 6px #3b5998;
box-shadow: 0 0 6px 6px #3b5998;
border-radius: 0px;
-moz-box-shadow: 0 0 6px 6px #3b5998;
-webkit-box-shadow: 0 0 6px 6px #3b5998;
box-shadow: 0 0 6px 6px #3b5998;
Jadi hasilnya seperti ini :
.content-inner {
padding: $(content.padding);
-moz-border-radius: 35px;
border-radius: 5px;
-moz-box-shadow: 0 0 6px 6px #3b5998;
-webkit-box-shadow: 0 0 6px 6px #3b5998;
box-shadow: 0 0 6px 6px #3b5998;
}
padding: $(content.padding);
-moz-border-radius: 35px;
border-radius: 5px;
-moz-box-shadow: 0 0 6px 6px #3b5998;
-webkit-box-shadow: 0 0 6px 6px #3b5998;
box-shadow: 0 0 6px 6px #3b5998;
}
Keterangan:
border-radius: 5px; ukuran sudut tumpul sekeliling blog, silahkan ganti menjadi angka yang diinginkan, misalnya 10, 13, 20 tergantu selera
#3b5998; warna efek bayangan, ganti sesuai yang diinginkan
border-radius: 5px; ukuran sudut tumpul sekeliling blog, silahkan ganti menjadi angka yang diinginkan, misalnya 10, 13, 20 tergantu selera
#3b5998; warna efek bayangan, ganti sesuai yang diinginkan
Selamat mencoba dan semoga sukses .
0 komentar:
Posting Komentar