4 Orang Jiran Sebelah Sibuk

Tutorial : BlogSkin Navigation untuk Template dan BlogSkin

Di Taip Laju-laju Pada 25 Januari 2013


Di pagi yang berbahagia ni, ieka nak buat tutorial atas request cik Isyah. Dia nak berlajar cara nak buat navigation macam ieka. Code yang ieka bagi ni untuk template tapi still boleh guna di blogskin. Cross platform gitu.

Blog Template / CSS
1. Blogger > Dashboard > Template > Edit HTML > Expand Widget
2. Search atau tekan Ctrl+F code ini
]]></b:skin>
3. Tambahkan code bawah ni di atas code yang korang search tadi

a.menutab {
box-shadow: inset 9px 0 0px 0 #97D8FF;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
margin:1px;
display:inline-block;
text-align:center;
background: url(URL BACKGROUND);
color:#B1B1B1;
width:100px;
border:1px solid #97D8FF;
border-right:10px solid #97D8FF;
width: 100px;
overflow: hidden;
}
a.menutab:hover {
box-shadow: inset 850px 0 0px 0 #FFFFFF;
color: #FFD7E6;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
}
4. Pergi ke Layout > Add New Gadget > HTML / JavaScript
5. Paste code bawah ni. Ikut sukalah korang nak guna banyak mana pun. Just copy paste.
<a class="menutab" href="URL">Nama URL</a>
6. Save.

BlogSkin
1. Blogger > Dashboard > Template
2. Search code ni
</style>
3. Paste code bawah ni di atas code yang korang search tadi.
a.menutab {
box-shadow: inset 9px 0 0px 0 #97D8FF;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
margin:1px;
display:inline-block;
text-align:center;
background: url(URL BACKGROUND);
color:#B1B1B1;
width:100px;
border:1px solid #97D8FF;
border-right:10px solid #97D8FF;
width: 100px;
overflow: hidden;
}
a.menutab:hover {
box-shadow: inset 850px 0 0px 0 #FFFFFF;
color: #FFD7E6;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
}
4. Then paste code bawah ni di mana-mana yang korang rasa nak letak, except dalam bahagian <style> </style>
<a class="menutab" href="URL">Nama URL</a>
5. Save

Selamat mencuba.

Nota:
Semua code yang dimulakan dengan #______ boleh ditukar kepada apa-apa warna yang korang berkenan di hati. code yang diakhiri dengan ___px pula boleh ditukar kepada apa-apa nombor yang korang berkenan.