Cikgu Kacamata


25
Buat Border Pada Sidebar Blogger


Dalam tutorial-tutorial yang lain, CK ada menerangkan cara-cara untuk Membuat Border Pada Ruangan Post, Membuat Border Pada Post Body dan Membuat Border Pada Main Blog. Tutorial kali ini CK hendak menunjukkan pula cara-cara hendak menambah border pada Sidebar Gadget.


Langkah-langkahnya:

1. Pilih "More options"

2. "Template" dan klik butang "Customise"



"Copy" kod di bawah:
.sidebar .widget {
border:2px dashed #cccccc;
padding:5px;
}

Jika hendak lengkungkan keempat-empat penjuru border:
.sidebar .widget {
border:2px dashed #cccccc;
padding:5px;
border-radius:15px;
}

Jika hendak lengkungkan beberapa penjuru border:
.sidebar .widget {
border:2px dashed #cccccc;
padding:5px;
border-top-right-radius:15px;
border-top-left-radius:0px;
border-bottom-right-radius:0px;
border-bottom-left-radius:15px;
}

Tambah background color dalam border:
.sidebar .widget {
border:2px dashed #cccccc;
padding:5px;
background:#999999;
}

Nota:

3. Pada "Blogger Template Designer", klik butang "Advanced"

4. Scroll bawah sikit dan pilih "Add CSS"

5. Pada bahagian "Add custom CSS", "Paste" kod tadi dalam kotak berwarna merah dan jangan lupa TEKAN ENTER

6. Kemudian "Apply to Blog"


Siap!


*sekiranya anda ingin kembali mengubah kod-kod ini dalam kotak Add custom CSS dan anda dapati kod-kod tersebut telah tiada, jangan panik...anda cuma perlu paste sahaja kod-kod ini dalam kotak Add custom CSS seperti biasa




Sila Share Post CK Ini Sekiranya Anda Suka
Dapatkan Widget Ini!

25 comments:

  1. nak tanya soalan.. macam mana nak buat bagi background colour untuk post entry tu berada dalam border? aiza buat tak jadi.. huhu..

    ReplyDelete
    Replies
    1. Jika kod tu masih ada dlm kotak CSS, Aiza tambah kod ni: "background:#FF00FF;" di atas tanda "}".

      Ia akan jadi seperti:

      background:#FF00FF;
      }

      Keseluruhan kod utk buat border pada post (kod ni termasuk penjuru lengkung):

      .post {
      margin:0 0 45px 0;
      padding-top:5px;
      padding-bottom:10px;
      padding-right:10px;
      padding-left:10px;
      border: 2px dashed #cccccc;
      border-radius:15px;
      background:#FF00FF;
      }

      *nota: Aiza boleh ubah warna background ikut citarasa sendiri dengan ubah ni: #FF00FF...

      Delete
    2. terima kasih CK.. alhamdulillah, memang menjadi la.. :D

      Delete
    3. Alhamdulillah...cayok...cayok (hehe, pinjam ayat org)

      Delete
  2. alahai, nak buat x reti la pulak.. maklum lah, kena banyak belajar dr senior ni.. hehe

    ReplyDelete
    Replies
    1. Kira yg ni CK permudahkan sikit sbb takyah edit dlm Edit HTML tu. Takpe kalau ade apa2 pertanyaan sila ajukan, insyaAllah mana yg CK leh bantu, CK akan usahakan :)

      Delete
  3. CK , tasya guna yang nii . Nice :)

    ReplyDelete
  4. Cikgu, miya datang menuntut ilmu ni.. dihalalkan ye

    ReplyDelete
  5. salam cikgu..
    ble bantu...
    tuto dekat atas tu mana kod warna ungu tu?? lyana tengok macam tak ada je..
    maksud lyana yg ne

    Kod warna ungu:
    Untuk menambah/mengurangkan jarak pada bahagian atas dan bawah border

    sebab border lyana tu rapat sangat antara 1 sama lain dan dekat sangat kat header
    macam mana tu??
    huhuhu... :(
    nak buat border sidebar mcm cikgu...
    sori menyusahkan...

    ReplyDelete
  6. bile letak code ni,, terus hancur blog saya. sy delete balik sume code,.. tp xdapat kembali lke rupa asal.. apa nk buat ye?

    ReplyDelete
  7. thankz cikgu!! sangat menjadi hilang stress saya... :D

    ReplyDelete
  8. setelah sekian lama nak buat akhirnye ni la paling senang
    jonm singgah hasilnye...
    www.vitamindiha.blogspot.com

    ReplyDelete
  9. waahhhh tq cikgu, saya dh berjaya akhirnya yeehhhaaa :)

    ReplyDelete
  10. Thanks cikgu...dah cuba buat & jadi.hihi...

    ReplyDelete
  11. thanks cikgu utk ilmu ^^ mintak pakai ilmu ya

    ReplyDelete
  12. TQ so much for this tutorial! =)

    ReplyDelete
  13. terima kasih tutorial ni....best giler... !!

    ReplyDelete
  14. Yes.. berjaya buat. TQVM Cikgu Kacamata.
    Tapi bagaimana nak buat macam cikgu, kat sidebar tu, ada garisan kat tajuk.
    TQ

    ReplyDelete
    Replies
    1. ...& kalau taknak garisan titik putus tu.. nak buat macamana?
      Selain itu, tajuk utk setiap side bar tu nak warna lain dari kotak isi dia.
      TQ in advance

      Delete
  15. This comment has been removed by the author.

    ReplyDelete
  16. terima kasih. terbaik betul tutorial ni. Sekarang dah jadi

    ReplyDelete