Button Tabs Menu Blog

Salam sahabat kuh ~ :)

ok, korang mesti kebanyakkan nak buat sendiri button tabs menu kan ?

ok if korang berminat nak buat

jom follow langkah-langkah dia ye

1. Click dashboard > design >  edit HTML > tick expand widget

2. Cari code nie 

]]></b:skin>

atau code nie (if tak jumpe code kat atas td la ye)

</head> 

3. Then copy code kat bawah nie and paste kan kat atas code yang korang cari td ye

ul#list-nav {
text-align:center;
list-style:none;
margin:20px;
padding:0;
width:800px
}

ul#list-nav li {
display:inline
}

ul#list-nav li a {
text-decoration:none;
padding:10px 0;
width:150px;
background:url("URL image");;repeat ; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-color: rgb(0, 0, 0); border-bottom-left-radius: 5em 5em; border-bottom-right-radius: 1em 1em; border-bottom-style: solid; border-bottom-width: 2px; border-left-color: rgb(0, 0, 0); border-left-style: solid; border-left-width: 2px; border-right-color: rgb(0, 0, 0); border-right-style: solid; border-right-width: 2px; border-top-color: rgb(0, 0, 0); border-top-left-radius: 1em 1em; border-top-right-radius: 4em 4em; border-top-style: solid; border-top-width: 2px; font-size: 22px; font: normal normal normal 22px/normal 'kristen itc'; line-height: 1.2em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 4px; padding-left: 0px; padding-right: 0px; padding-top: 0px; position: relative; text-align: center; text-shadow: rgb(51, 51, 51) 2px 2px 3px;">
color:#000000;
float:center;
text-align:center;
border-left:1px solid #fff;
-moz-border-radius: 50px;
}

ul#list-nav li a:hover {
background:url("URL image");;repeat ; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-color: rgb(0, 0, 0); border-bottom-left-radius: 5em 5em; border-bottom-right-radius: 1em 1em; border-bottom-style: solid; border-bottom-width: 2px; border-left-color: rgb(0, 0, 0); border-left-style: solid; border-left-width: 2px; border-right-color: rgb(0, 0, 0); border-right-style: solid; border-right-width: 2px; border-top-color: rgb(0, 0, 0); border-top-left-radius: 1em 1em; border-top-right-radius: 4em 4em; border-top-style: solid; border-top-width: 2px; font-size: 22px; font: normal normal normal 22px/normal 'kristen itc'; line-height: 1.2em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 4px; padding-left: 0px; padding-right: 0px; padding-top: 0px; position: relative; text-align: center; text-shadow: rgb(51, 51, 51) 2px 2px 3px;">
color:#000
-moz-border-radius: 50px;
}

Note : URL image korang cari la background yang korang berkenan ye

caari dekat sini Glitter Graphics

4. Save templete tuh dulu ye

5. Then click kat design >> add a gadget > HTML/Javascript

6. Copy and paste kan code kat bawah nie ye

<div>
<ul id='list-nav'>
<li><a href='Link'>Home</a></li>
<li><a href='Link'>Tutorial</a></li>
<li><a href='Link'>Bff's</a></li>
<li><a href='Link'>Tips</a></li>
<li><a href='Link'>Gallery</a></li>
</ul>
</div>

7. Save and preview. TAMAT sudah ! hehe

============================================

PERINGATAN !

Link tuh korang letak lah link korang and

Home/Tutorial tuh korang tulis laa pe yang na letak tok para pengunjung pergi ke link korang ye

============================================