Assalamualaikum , hari ini aku nak buat satu tutorial , bagaimana nak letak border dalam blog kita, kalau korang tak tahu border tu apa, boleh tengok di MENUBAR , SIDEBAR aku , di mana aku gunakan border jenis Example D untuk blog aku ni . Tapi kita kenali dulu jenis - jenis border yang ada .
Di bawah ini jenis dan bentuk border yang ada .
Example A
background: #790101;
border: 1px solid #790101;
-moz-border-radius-bottomright: 50px;
border-bottom-right-radius: 50px;
}
Example B
background: #790101;
border: 1px solid #790101;
-moz-border-radius-bottomright: 50px 25px;
border-bottom-right-radius: 50px 25px;
}
Example C
background: #790101;
border: 1px solid #790101;
-moz-border-radius-bottomright: 25px 50px;
border-bottom-right-radius: 25px 50px;
}
Example D
background: #790101;
border: 1px solid #790101;
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;
}
Example E
background: #790101;
border: 1px solid #790101;
-moz-border-radius: 25px 10px / 10px 25px;
border-radius: 25px 10px / 10px 25px;
}
Example F
background: #790101;
border: 1px solid #790101;
-moz-border-radius: 35px;
border-radius: 35px;
}
Langkah 1 : Memula korang kena buat satu LINK LIST , caranya , korang masuk DESIGN >> PAGE ELEMENT >> ADD GADJET >> LINK LIST , masuk kan link yang korang nak dan simpan .
Link List -
<a href="http://mizkadiahstory.blogspot.com " class="navigation">HOME</a>
<a href="http://mizkadiahstory.blogspot.com " class="navigation">CONTACT</a>
<a href="http://mizkadiahstory.blogspot.com " class="navigation">BUKU TAMU</a>
<a href="http://mizkadiahstory.blogspot.com " class="navigation">FACEBOOK</a>
<a href="http://mizkadiahstory.blogspot.com " class="navigation">TWITER</a>
<a href="http://mizkadiahstory.blogspot.com " class="navigation">DOWNLOAD</a>
<a href="http://mizkadiahstory.blogspot.com " class="navigation">LAIN-LAIN</a>
<a href="http://mizkadiahstory.blogspot.com " class="navigation">CHATTING</a>
Langkah 2 : Klik Design > Edit HTML , cari kode , agar mudah gunakan tombol CTRL+F
Copy kode dibawah ini dan letakan tepat diatas kode kemudian simpan.
a.navigation {
background: #3333ff ;
color: #ffffff;
margin: 1px;
padding: 2px;
border-width: 0;
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
}
a.navigation:hover {
background: #333333;
color: #ffffff;
text-decoration: none;
}
Kalau korang nak tukar colour yang berwarna merah kat atas tu , cari kat SINI . Kalau korang nak yang macam KB punya , inilah dye -->
a.navigation {
background: #0489B1 ;
border: 0px solid #790101;
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 9em 7em 9em 1em;
color: #ffffff;
margin: 7px;
padding: 9px;
border-width: 3;
text-transform: capitalize;
text-decoration: none;
font-weight:normal;
}
a.navigation:hover {
background: #61AB6E;
color: #ffffff;
text-decoration: none;
}
Langkah 3 : Korang tambah saja code border . Aku dah bagi code border kat atas tu . Kalau korang nak KB punya , KB guna yang Example D tu . So , korang pandai-pandai lah edit colour ya ? Caranya > Design > Template Designer > Advance > Add CSS > Letakkan code border korang kat situ ya ? Sekian terima kasih . Ikhlas daripada Key Board anak Salim .
