#Tutorial border date versi Dunia Ayu

kali ni ayu akan ajar macam mana untuk buat date border yang macam kat blog ayu nih... refer kat gambar di bawah...

lawa tak ??? sebenarnya border ni didatangkan sekali dengan template ayu yg dah dieditkan oleh ENCIK SAYFZMAGZ.com ... boleh mintak dia edit kalau tak faham eh... ayu cuma ajar setakat yang ayu tahu je lah...huhuhu...

• download full template dulu untuk mengelakkan anda menangis dikemudian hari...:p

• macam biasa...DASHBOARD > DESIGN > EDIT HTML 
• jangan lupa thick pada  expand widget template!
• cari code ni (CTRL+F)

h2.date-header {

• korang akan jumpa code yang macam ni... atau yg seangkatan dengannya la...depend pada template...

h2.date-header {
  margin:1.5em 0 .5em;
  }

• highlightkan semua code tu dan gantikan dengan code di bawah...

h2.date-header {
text-transform: normal;
border-bottom: 0px solid #6F3C1B;
margin: 1.5em 0 0em;
color: white;
font-size: 100%;
padding: 10px;
background: #DE6A7C;
border-radius: 30px 30px 0px 0px;
border-top: 3px solid #DE6A7C;
border-left: 3px solid #DE6A7C;
border-right: 3px solid #DE6A7C;
}

yang ayu highlightkan PINK tu boleh gantikan dengan warna kesukaan korang dan yang highlight KUNING tu... jenis border...

sebenarnya date ni boleh disesuaikan dengan border untuk post macam yang Encik Syafzmagz buat untuk ayu ni...

ayu ajar macam mana nak tukar border untuk post dan sesuaikan dengan date border macam ni...maksudnya bersambung...macam dalam pic kat bawah ni...

• cari code ni...

 .post-outer {

• dah jumpa??? highlightkan semua code kat situ dan gantikan dengan code ni...

.post-outer {
  background-color: #ffffcb;
  border: solid 3px #DF6A7C;
  -moz-border-radius: $(post.border.radius);
  -webkit-border-radius: $(post.border.radius);
  border-radius: $(post.border.radius);
  -goog-ms-border-radius: $(post.border.radius);
  padding: 15px 20px;
  margin: 0 $(post.margin.sides) 20px;
}

•  sesetengah template mungkin tak ada code .post outer tu... tapi tak apa... boleh tambah je... 

• preview dulu dan tengok jadi tak... kalau dah senyum tu...
• SAVE TEMPLATE!

SELAMAT MENCUBA! kalau tak jadi...bagitahu ayu yep...:p