Membuat Menubar pada Blog

Cara menambah menu bar grid focus tersebut. sebenarnya sangat mudah ini merupakan tips dari , cara pertama langsung menambahkan-nya pada kode template html-nya.

Buka tab Edit Html , kemudian di atas kode ini.

]]></b:skin>



masukan syntax css menu ini.

/* tab navigasi
-----------------------------------------------*/
ul.nav{list-style:none;background:none;padding: 0;
margin-left: 0;border-top:1px solid #ccc;
border-bottom:3px double #ccc;}
.nav li{border-right:1px solid #DDD;float:left;display:block;width:100px;}
.nav li a{font-size:11px;outline:none;color:#999;
text-decoration:none;display:block;
padding:5px 0 8px 5px;width:99px;text-transform:uppercase;}

.nav li a span{font-size:11px;color:#999;
text-transform:lowercase;}

.nav li a:hover{background:#EFEFEF;
color:#ccc!important;width:95px;}


* html .nav li a:hover{background:#fff;width:99px;}

.nav li.skip{border-left:1px solid #DDD;float:right;display:block width:100px;
padding-right:5px;border-right:none;}

.nav li.skip a{width:100px;}
li.top{border-left:1px solid #DDD;float:right;
display:block width:100px;padding-right:5px;
border-right:none;}

li.top a{width:100px;}
.nav li.skip a:hover, li.top a:hover
{ background: transparent;color: #fff !important;}

.fix:after{content:".";display:block;height:0;clear:both;
visibility:hidden;}

.fix{display:inline-block;}
* html .fix{height:1%;}
.fix{display:block;}


Setelah itu cari kode ini.
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='cigazine (Header)' type='Header'/>
</b:section></div>

kemudian di bawahnya masukan kode ini.

<div class='nav'>
<ul class='nav fix'>
<li><a expr:href=blog.homepageUrl' title='Return to the the frontpage'>Home<br/><span>Frontpage</span></a></li>
<li><a href='#' title='Link title'>Link1<br/><span>Short Desc</span></a></li>
<li><a href='#' title='Link title'>Link2<br/><span>Short Desc</span></a></li>
<li><a expr:href=blog.homepageUrl + &quot;feeds/posts/default&quot;' title='Subscribe to the main feed via RSS'>RSS<br/>
<span>Syndicate</span></a></li>
<li class='skip'><a href='#main' title='Skip to content'>Main<br/>
<span>Skip to content</span></a></li>
</ul></div>


tanda " # " = ganti dengan alamat / url link yang anda tuju.

Kemudian untuk menambah menu bar ini pada bagian bawahnya cari saja kode ini.


<div id='footer-wrapper'>


Di atas kode tersebut masukan kode ini

<div class='nav' style='clear: both;'>
<ul class='nav fix'>
<li><a expr:href=blog.homepageUrl' title='Return to the the frontpage'>Home<br/><span>Frontpage</span></a></li>
<li><a href='#' title='Link title'>Link<br/><span>Short Desc</span></a></li>
<li><a href='#' title='Link title'>Link<br/><span>Short Desc</span></a></li>
<li><a href='#' title='Link title'>Link<br/><span>Short Desc</span></a></li>
<li><a expr:href=blog.homepageUrl + &quot;feeds/posts/default&quot;' title='Subscribe to the main feed via RSS'>RSS<br/><span>Syndicate</span></a></li>
<li class='top'><a href='#outer-wrapper' title='Return to the top'>Top<br/><span>Return to top</span></a></li>
</ul></div>



mudah kan.......... selamat mencobanya