Friday, February 21, 2014

Membuat border shadow di sidebar dan posting

Di posting kali ini taukahbahwa.blogspot.com akan menyampaikan artikel tentang Membuat border shadow di sidebar dan posting. Semoga dengan posting Membuat border shadow di sidebar dan posting akan menambah wawasan bagi anda pembaca setia taukahbahwa.blogspot.com


Membuat border shadow di sidebar dan posting


Tadi malam aku edit-edit kode css border lagi dan hasilnya akan aku share disini, kalau teman-teman suka silahkan ambil kodenya. Membuat border shadow di sidebar dan posting atau border efek shadow, daripada aku menuliskan tutorialnya satu-satu mending sekalian saja sidebar dan posting atau post outer. Ini hanya tutorial style css3 jadi kalau diterapkan di blog gak akan menjadikan blog lemot loading nya.

Membuat border shadow di sidebar dan posting

1.Masuk Dasbor/Dashboard > Template > edit Html
2.Tick Expand template widget dan tekan F3 atau CTRL + F cari kode:
.sidebar .widget { (ini untuk sidebar) 
3.Letakkan kode berikut di bawahnya:
-moz-box-shadow: 0 0 15px 5px #FFE4CA;
-webkit-box-shadow: 0 0 15px 5px #FFE4CA;
border-radius: 5px;
background: #FFF;
padding:7px 10px 7px 10px;
}
Kode ini sudah aku edit dengan ukuran sidebar yang umum, tentang warna background atau kode warna border shadow nya, ketebalan shadow nya/yang aku tandai dengan warna pink, semua boleh ditukar dengan selera kesukaan anda.

4.Untuk post outer atau border shadow di posting cari kode:
.post-outer { (kalau di bawah kode ini masih ada kode embel-embel bawaan blogger tolong delete dulu xD)
5.Letakkan kode berikut di bawahnya:
-moz-box-shadow: 0 0 15px 5px #FFE4CA;
-webkit-box-shadow: 0 0 15px 5px #FFE4CA;
border-radius: 5px;
background: #FFF;
padding: 15px 20px;
margin: 0-20px 20px;
}
Tambahan juga, kalau sebelumnya sudah memasang border di sedebar atau posting/post outer juga harus di delete dulu dan gantikan dengan kode di atas.

5.Kalau tugas sudah selesai tekan preview atau pratinjau dulu, kalau jadi baru simpan template.

Dapatkan berita terupdate dan unik setiap saat hanya di taukahbahwa.blogspot.com
Homepage|http://taukahbahwa.blogspot.com

No comments:

Post a Comment

jangan lupa tinggalkan komentar .... trimakasih atas kunjungannya