Monday, October 15, 2012

Tutorial Cara Buat Border Blog Yang Menarik

Assalamualaikum wbt and hi :)

Wah, kalau ada di antara kalian yang perasan. Blog kakak Ieyza, iaitu Mieya Atiera telah diberikan nafas baru terutamanya pada bahagian utama blog (postingan dan sidebar).


Dan menurut kakak Ieyza, ramai yang komen bertanyakan macam mana nak buat border blog jadi macam tu? Maksud Ieyza, supaya nampak lebih segar daripada biasa. So, takde lah rasa boring sangat bila tengok atau baca blog sepesen/sewarna je.

Entri nie ditaip oleh kakak Ieyza beserta coding nya sendiri, Ieyza cuma publish kan je. hikhik So, jom mulakan tutorial kali nie :)

1. Seperti biasa, buka dashboard blogger --> template --> Edit HTML --> Proceed --> Tick Expand Widgets

2. Tekan F3 dan cari kod #content-wrapper { kalau takde cari kod nie #outer-wrapper {

3. Highlight-kan kod di bawah kod yang korang cari tu. Seperti contoh tengok dalam gambar nie :


4. Gantikan kod yang di-highlight-kan tu dengan kod nie

width: 900px;
  margin: 0 auto;
  padding: 0 0 15px;
  text-align: left;
  font: $bodyfont;
background: #fff;
border: 50px solid #BDBDBD;
border-bottom: 120px solid #BDBDBD;
border-radius: 0px 0px 50px 50px;
  }

5. Tekan F3 lagi dan cari kod nie #main-wrapper { 

6. Ikut step nombor 3 tadi, highligh-kan kod di bawah kod yang korang cari

7. Gantikan kod yang di-highlightkan dengan kod di bawah nie

 margin-top: 18px;
margin-left: 12px;
  font-size: 85%;
   width: 620px;
  float: left;
  background-color:#FFF;
border-radius:5px;


8. Tekan F3 dan cari kod #sidebar-wrapper {  pulak

9. Macam biasa, gantikan kod di bawah kod yang korang cari tu dengan kod nie

margin-top: 18px;
  margin-right: 12px;
  width: 240px;
  font-size: 85%;
  float: right;
  background-color:#FFF;
  border-radius:5px

** Peringatan : 
Warna merah : saiz blog yang korang nak
Warna hijau : kod warna yang korang nak, boleh cari di entri INI
Warna biru : ubah mengikut saiz font yang korang nak
Warna merah hati : saiz main blog (postingan) 
Warna oren cair : saiz kelebaran sidebar

10. Klik preview dan lihatlah hasilnya. Kalau berpuas hati, boleh lah save.


0 jejari komen: