Membuat Menu Bar

Membuat menu BAR

bagi sobat bloger yang memiliki template yang tidak mempunyai menu bar langkah2 dibawah ini kayaknya pantas untuk dicoba. tips ini aku pinjam dari catalog blog dot com yangbiasa di sebut kang Jaloe......(makasih kang atastipsnya) 

Klik untuk Lihat menu bar: 

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='data: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='data: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='data: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='data: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 thanks for catalog blog dot com