Skip to content Skip to sidebar Skip to footer

Membuat border shadow di sidebar dan posting

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.

6 comments for "Membuat border shadow di sidebar dan posting"

  1. udah nyari kode sidebar .widget { kok gak ada ya..
    butuh pencerahan nih.

    ReplyDelete
    Replies
    1. coba nyari kodenya dibawah kode:
      /* Widgets

      }.widget .zippy {

      Delete
    2. owh iya ini udah berhasil. terimakasih atas tutorialnya, jujur aja blog yang saya punya ini hasil rombakan dari baca artikel dari sini.

      saya ada problem lagi nih, gak nemu .post-outer { kira-kira letaknya dimana? terimakasih sebelumnya.

      Delete
    3. ada di bagian css bawah:

      /* Posts

      di bawah:

      h3.post-title, .comments h4 {

      rajin2lah main code css, mari belajar bersama :D

      Delete
    4. Okeh...
      terimakasih ya.
      lagi mau rombak tampilan yang pas ni.

      Delete
    5. udah bagus blog kamu tuh, sip

      Delete