TutorialBlog: Kod Menu Bar Mudah

Assalamualaikum dan salam sejahtera,

Cara:

1- Pergi ke Blogger Dashboard > Layout > Add a Gadget > HTML/Javascript

2- Paste kod di bawah:

<style>
.navi{
padding:5px;
display: inline-block;
font:11px verdana;
font-weight:bold;
text-align:center;
margin:2px;
color:white;
text-decoration:none;
letter-spacing:2px;
-webkit-transition-duration:0.5s;
}
.navi:hover{
background:#ffffba;
border-radius:5px;
text-decoration:none;
-webkit-transition-duration:0.5s;
color:black;
}
</style>
<center><div style="padding:3px;background:#ffcfdc; width:754px;">
<a class="navi" href="URL PAGES">TAJUK NAVIGATION</a>
<a class="navi" href="URL PAGES">TAJUK NAVIGATION</a>
<a class="navi" href="URL PAGES">TAJUK NAVIGATION</a>
</div></center>

- Tukar warna merah tu.

Tambah lagi kod ini, jika banyak 'pages'. Letak sebelum kod </div></center>

 <a class="navi" href="URL PAGES">TAJUK NAVIGATION</a>

ATAU (bicarafarah):

<p>
<div style="background-color: #F8B4BF;">
Home |
<a href="http://www.home.blogspot.com/" title='homepage'>HOME</a> |
<a href="http://www.facebook.com/XXX" target" title='Join Facebook'>Facebook</a> |
<a href="http://twitter.com/XXX" target" title='Join Twitter'>Twitter</a> |
<a href="http://URL.com/search/label/resepi" title='Tag 1'>Resepi</a> |
<a href="http://URL.com/search/label/studi" target" title='Tag 2'>Studi</a> |
<br />
</div>
</p>

3- Tukar 2 kod warna untuk navi hover dan background asal.

4- Gerakkan 'layout' di bahagian atas (bawah header atau atas post) macam blogger biasa letak.

4- SAVE, View Blog.

Terima kasih baca, sudi-sudilah komen :)