Friday, July 31, 2009

Linkbar di bawah header

Tadi cuba membandingkan 2 jenis template. Template ni boleh letak link di bawah header. Dan link tu jadi memanjang ke tepi. Jadi pegi cari-cari coding dia. Mencari yang berkenan di hati berkaitan dengan link. Jumpalah code ini

/* ----- LINKBAR ----- */
#linkbar {
margin: 0 auto;
padding: 0 auto;
width: 100%;
position: relative;
background: 0 ;
border-bottom: 0;
}

#linkbar ul {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: left;
list-style-type:none;
}

#linkbar li {
display: inline;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

#linkbar h2 {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
display: none;
visibility: hidden;
}

#linkbar a {
clear: both;
margin: 0px 0px 0px 0px;
padding: 3px 20px 3px 20px;
width:100%;
text-decoration:none;
font-family: arial, sans-serif;
font-weight: bold;
font-size: 12px;
color: #003663;
border-right: 0;
background: #ffffff ;
}

#linkbar a:hover {
color: #b404ae;
background: #E895CC;
}


oh..ada buat set yang baru rupanya untuk benda ni. Letak aje benda ni sebelum
/* Content
----------------------------------------------- */
atau
/* Outer-Wrapper
----------------------------------------------- */


Kemudian, jangan lupa tambahkan juga code berwarna merah di bawah ni
<div id='content-wrapper'>

<div id='linkbar-wrapper'>
<b:section class='linkbar' id='linkbar' showaddelement='no'>
<b:widget id='LinkList1' locked='true' title='Linkbar' type='LinkList'/>
</b:section>
</div>

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>


Senang aje rupanya. Penat pening kepala sebelum ni. Kali ni tak refer mana-mana site lain. Cuma membandingkan dua template yang berbeza dan cuba masukkan aje. Ambil masa pun sekejap untuk buat ni sebab semalam dah pening belajar baca coding. Kalau nak cuba letak border dan lain-lain boleh cuba ubah dalam code #linkbar a {

Code ni pula bila mouse bergerak di situ, warna background dan tulisan akan bertukar.
#linkbar a:hover {
color: #b404ae;
background: #E895CC;
}


Silalah cuba sendiri ye. Saya belum letak di blog saya function ini sebab masih belum banyak benda untuk dilinkkan. Di bawah ni contoh gambar dari blog ujian saya.



p/s - blog ni dah jadi macam blog tutorial la pulak.
- sejuknya opis ni. macam nak beku dibuatnya....

0 comments:

Post a Comment | Feed



 
^

Powered by BloggerPerjalanan hidup menuju Ilahi by UsuárioCompulsivo
original Washed Denim by Darren Delaye
Creative Commons License