Tutorial : Navigation #10

Assalamualaikum.

Yeah finally . Navigation dah siri ke-10 . lol . Okay dapat request dari ask.fm , tapi sorry tak publish soalan dia dekat ask.fm atas sebab sebab tertentu . Macam mana navigation kali ni ? Navigation kali ni sangat sesuai bagi blog yang tak ber-header . Macam ni navigation-nya ;

LIVE PREVIEW

Macam tu . Dia lekat dekat atas tu . Code dia sedikit berterabur . So deal with it . HAHA .


1. Copy and Paste code bawah ni dekat Layout > Add A Gadget > HTML & JavaScript.

<style>
.btd a{
display:inline-block;
width:130px;
text-align:center;
text-transform:none;
font:12px georgia;
text-transform:lowercase;
text-decoration:none;
font-style:italic;
color:#111;
opacity:0.9;
margin:2px;
padding:5px;
letter-spacing:2px;
text-shadow:4px 0px transparent, -4px -0px transparent;
-webkit-transition-duration:0.5s;
-moz-transition-duration:0.5s;
-ms-transition-duration:0.5s;
-o-transition-duration:0.5s;
transition-duration:0.5s;
}
.btd a:hover {
text-shadow:0px 0px #000, -0px 0px #000;
}
.howon {
position:fixed;
left:0px;
top:0px;
width:100%;
background:url(http://i.imgur.com/liHPRB9.jpg);
padding:20px 10px 20px 80px;
border-bottom:6px solid #fff;
margin-bottom:10px;
box-shadow:1px 1px 1px #aaa;
z-index:999;
}
.satu {
margin-left:120px;
margin-top:48px;
background:white;
width:760px;
opacity:0.85;
border-radius:0px 15px 15px 0px;
}
</style>
<div class="howon">
<img src="http://i.imgur.com/jOtEyMH.jpg" style="width:110px; float:left; border:8px solid #fff; border-radius:100px; z-index:999;" />
<div class="satu"><div class="btd">
<a href="LINK HERE">Title1</a>
<a href="LINK HERE">Title2</a>
<a href="LINK HERE">Title3</a>
<a href="LINK HERE">Title4</a>
<a href="LINK HERE">Title5</a>
</div></div></div>

2. Save. Kemudian pergi ke Template > Edit HTML . Cari code ni ; .content-outer { jumpa code tu , paste kan code bawah ni dekat bawah code yang korang cari tadi .

margin-top:110px;

3. Save and Siap .

Mana mana code yang apis bold-kan tu , korang boleh adjust sendiri mengikut kesesuaian korang punya blog . Take it with a proper credit . Tak paham tanya . Menjadi pon bagitau . Kbai.


adios.