Cikgu Kacamata


24
Buat Border Pada Ruangan Post


Bila melihat kembali Blog kita pada ruangan post tanpa sebarang border, rasa sayup je hati kerana ia kelihatan kosong dan kurang ceria. Jadi, langkah penyelesaiannya ialah dengan menambahkan border. Lihat juga bagaimana cara menambahkan border pada Sidebar Gadget, Post Body dan Main Blog.


Langkah-langkah untuk menceriakannya:

1. "More options"

2. Pilih "Template" kemudian klik butang "Customise"



"Copy" kod di bawah:
.post {
margin:0 0 45px 0;
padding-top:5px;
padding-bottom:10px;
padding-right:10px;
padding-left:10px;
border: 2px dashed #cccccc;
}

Jika hendak lengkungkan keempat-empat penjuru border:
.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;
}

Jika hendak lengkungkan beberapa penjuru border:
.post {
margin:0 0 45px 0;
padding-top:5px;
padding-bottom:10px;
padding-right:10px;
padding-left:10px;
border: 2px dashed #cccccc;
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:
.post {
margin:0 0 45px 0;
padding-top:5px;
padding-bottom:10px;
padding-right:10px;
padding-left:10px;
border: 2px dashed #cccccc;
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"


Selesai!

*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!

24 comments:

  1. Post bagus untuk mempercantik tampilan halaman blog. Terima kasih, Cikgu Kacamata...

    ReplyDelete
  2. Terima kasih atas perkongsian yg bermanfaat ini.

    ReplyDelete
  3. Replies
    1. Singgah je tau, CK tak sediakan bekpes :D

      Delete
  4. wah..best tutorial ni..next time sy akan cuba plak la..tq.. sy dah follow blog yg best ni..jom ke blog sy lak >> http://firohar.blogspot.com/

    ReplyDelete
    Replies
    1. Boleh dicuba, takde masalah...CK pun dah terjah blog Firo ;)

      Delete
  5. dah lama cari cara ni.. terima kasih CK.. sebelum ni selalu tengok tutorial orang lain kena edit kat html..

    ReplyDelete
    Replies
    1. menjadi.. nak buat lengkung macam mana ya?

      Delete
    2. Ya, sama-sama Mizz Aiza.
      Ok, utk lengkung (CK cadang nak bgtau nanti, tp takpe CK pun dah buat gak, hehe), tambah jer kod yg bold tu. Tukar nilai border-radius ikut kemahuan MA.

      *Jika kod ini dah takde dlm CSS box tu, jgn panik, pastekan semula kod ini di dalamnya dan jangan lupa tekan enter...

      .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;
      }

      Delete
    3. alhamdulillah dah menjadi.. terima kasih sangat2.. :D

      Delete
  6. jadi lah . tapi nak buat border untuk main blog dia macam mana ye ?

    ReplyDelete
    Replies
    1. CK akan tunjukan dalam tutorial yang akan datang. Sentiasa bersama CK ;)

      Delete
  7. bagus tutorialnya sangat membantu..

    ReplyDelete
  8. hello interesting your site, come visit my site kisss Ita
    http://www.amoleroserosse.altervista.org

    ReplyDelete
    Replies
    1. Okay...thanks came across. do visit me often. njoy ;)

      Delete