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!
Labels: | | | |
POST CK YANG HARUS DILAWATI:

25 comments:

  1. Mizz Aiza12 June 2013 at 12:42

    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. Cikgu Kacamata12 June 2013 at 13:07

      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. Mizz Aiza12 June 2013 at 15:53

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

      Delete
    3. Cikgu Kacamata13 June 2013 at 02:24

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

      Delete
  2. Norhasniza Khalid14 June 2013 at 11:02

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

    ReplyDelete
    Replies
    1. Cikgu Kacamata15 June 2013 at 05:11

      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. cik natasya (:5 July 2013 at 17:59

    CK , tasya guna yang nii . Nice :)

    ReplyDelete
  4. Miya Ismail6 July 2013 at 01:05

    Cikgu, miya datang menuntut ilmu ni.. dihalalkan ye

    ReplyDelete
  5. jclyana ann2 October 2013 at 16:49

    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. Clinical Investigation Centre, University of Malaya11 October 2013 at 08:57

    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. Lina Linz6 January 2014 at 17:53

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

    ReplyDelete
  8. seri NIAN20 January 2014 at 17:05

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

    ReplyDelete
  9. husna yusof26 March 2014 at 15:43

    waahhhh tq cikgu, saya dh berjaya akhirnya yeehhhaaa :)

    ReplyDelete
  10. ienalina ismail20 May 2014 at 11:53

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

    ReplyDelete
  11. Nurul Izzati27 June 2014 at 23:50

    thanks cikgu utk ilmu ^^ mintak pakai ilmu ya

    ReplyDelete
  12. Misya (Aimi Syahirah)2 January 2015 at 09:34

    TQ so much for this tutorial! =)

    ReplyDelete
  13. scheetah_shakleelover21 May 2015 at 00:45

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

    ReplyDelete
  14. Ruzana Ibs2 July 2015 at 15:42

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

    ReplyDelete
    Replies
    1. Ruzana Ibs2 July 2015 at 15:44

      ...& 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. Saffa Aina19 January 2016 at 18:35

    jadilah..terima kasih ya!

    ReplyDelete
  16. ainnurnisa zul25 December 2016 at 20:13

    This comment has been removed by the author.

    ReplyDelete
  17. ainnurnisa zul25 December 2016 at 20:19

    tak jadi lah

    ReplyDelete
  18. hang bean1 May 2018 at 18:33

    terima kasih. terbaik betul tutorial ni. Sekarang dah jadi

    ReplyDelete

Subscribe to: Post Comments (Atom)