Sunday 18 October 2015

Shadow's Border on Post Title

Assalamualaikum!
Nah, kali ini Tasya kasih tuto cara membuat border berbayang pada judul entri/post.
Tertarik ? klik read more aja :3



1. Sign in akun blog.
2. (Pada Dashboard) Template > Edit Html.
3. Cari salah satu diantara kode di bawah ini (sesuai jenis template yang digunakan). Cara cepat dengan Ctrl+F ya.

untuk pengguna template Watermark, Picture Window dan Travel, cari kode:
h3.post-title {  

 untuk pengguna template Ethereal dan Awesome Inc., cari kode:
h3.post-title, h4 { 
untuk pengguna template Simple, cari kode
h3.post-title, .comments h4 {

 4. Kemudian, copy kode di bawah ini lalu paste-kan di bawah kode yang tadi.

background: #FFECF5;
border: 2px dashed #000000;
-moz-box-shadow: 0 0 3px 3px #C0C0C0;
-webkit-box-shadow: 0 0 3px 3px #C0C0C0;
box-shadow: 0 0 2px 2px #C0C0C0;


Note:
Kode -moz-box-shadow: 0 0 3px 3px #C0C0C0;
-webkit-box-shadow: 0 0 3px 3px #C0C0C0;
box-shadow: 0 0 2px 2px #C0C0C0; adalah kode untuk border berbentuk segiempat, untuk memilih bentuk border lain, silahkan pilih di sini


FFECF5  - kode warna untuk warna background judul entri/post.
000000 - kode warna untuk warna border.
C0C0C0 - kode warna untuk warna bayangan border.

Untuk memilih kode warna sesuai yang kalian inginkan, silahkan pilih di sini

Preview contoh setelah letak kode diatur:
h3.post-title, .comments h4 {
background: #FFECF5;
border: 2px dashed #000000;
-moz-box-shadow: 0 0 3px 3px #C0C0C0;
-webkit-box-shadow: 0 0 3px 3px #C0C0C0;
box-shadow: 0 0 2px 2px #C0C0C0;


5. Setelah itu, klik dulu 'Pratinjau Template' untuk memeriksa keadaan blog. Jika tidak ada kerusakan dan berhasil, silahkan pilih 'Save Changes'.

Selesai! Selamat Mencoba dan Semoga Berhasil!!!



No comments:

Post a Comment