Navigasi Bar Grid Focus By amanda

Kalau ngga salah kemarin ada yang bertanya via SB cara membuat menu bar yang ada di blog ini, baik untuk bagian atas dan bawahnya.

Sebenarnya cara mudah untuk mengetahui cara memasang nav bar ( menu bar ) tersebut gampang banguet. kita tinggal donlot template grid focus dari tante amanda, kemudiaan buka file xml-nya via notepad atau dream wapper dan cari kode menu bar-nya.

Tapi kalau malas donlot template tersebut, baiklah saya akan jelasain  cara menambah menu bar grid focus tersebut.  sebenarnya ada dua cara , cara pertama langsung menambahkan-nya pada kode template html-nya. sedangkan  cara ke dua mengunakan widget Html.

Cara pertama :

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>

Cara keduaxxx :

malas nulisnya… mungkin kalau ada kesempatan di lanjutkan…

Page views this post: reader