RSS

Membuat Navigasi Header

LANGKAH-LANGKAH MEMBUAT NAVIGASI BAR:

Apa itu navigasi bar? Itu lho yang ada di bawah judul blog agar pengunjung dapat melihat apa saja content blog kita. Perhatikan navigasi bar blog ini!

Ya, benar! Navigasi bar pada blog ini  FUN N SMART, Tutorial Blog,……., Info Beasiswa. Bagaimana cara membuatnya?

Langkah pertama adalah copy kode berikut dan letakkan pada layout > edit html > di bawah kode CDATA[


<script src='http://stubb.fanatic.googlepages.com/chrome.js' type='text/javascript'/>
.chromestyle{
width: 99%;
font-weight: bold;
}
.chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.chromestyle ul{
border: 1px solid #BBB;
width: 100%;
background: url(http://photos1.blogger.com/x/blogger2/2604/6063341998323/320/823865/chromebg.gif) center center repeat-x; /*THEME CHANGE HERE*/
padding: 4px 0;
margin: 0;
text-align: center; /*set value to "left", "center", or "right"*/
}
.chromestyle ul li{
display: inline;
}
.chromestyle ul li a{
color: #494949;
padding: 4px 7px;
margin: 0;
text-decoration: none;
border-right: 1px solid #DADADA;
}
.chromestyle ul li a:hover{
background: url(http://photos1.blogger.com/x/blogger2/2604/6063341998323/320/578414/chromebg-over.gif) center center repeat-x; /*THEME CHANGE HERE*/
}
.chromestyle ul li a[rel]:after{ /*HTML to indicate drop down link*/
content: " ";
/*content: " " url(downimage.gif); /*uncomment this line to use an image instead*/
}
/* ######### Style for Drop Down Menu ######### */
.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #BBB; /*THEME CHANGE HERE*/
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: white;
width: 200px;
visibility: hidden;
filter: progid:DXImageTransform.Microsoft.Shadow(color=#CACACA,direction=135,strength=4); /*Add Shadow in IE. Remove if desired*/
}
.dropmenudiv a{
width: auto;
display: block;
text-indent: 3px;
border-bottom: 1px solid #BBB; /*THEME CHANGE HERE*/
padding: 2px 0;
text-decoration: none;
font-weight: bold;
color: black;
}
* html .dropmenudiv a{ /*IE only hack*/
width: 100%;
}
.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
background-color: #F0F0F0;
}

Kemudian masuk ke layout > page elements > add HTML / JavaScript dan copy paste kode berikut:

<div id="chromemenu" class="chromestyle"><ul>
<li><a href="#" title="**">$$$</a></li>
<li><a href="#" title="**">$$$</a></li>
<li><a href="#" title="**">$$$</a></li>
<li><a href="#" title="**">$$$</a></li>
<li><a href="#" title="**">$$$</a></li>
</ul>
</div>

Ganti tanda # dengan alamat posting Anda dengan cara copy paste URL link ketika posting Anda muncul. Ganti tanda ** dengan judul navigasi Anda (tidak nampak di blog). Ganti $$$ dengan judul yang akan Anda tampilkan di blog. Contoh untuk FUN N SMART di atas, penulisannya demikian:

<li><a href="http://funnsmart.blogspot.com/2010/01/fun-n-smart.html" title="Fun N Smart">FUN N SMART</a></li>

  • Digg
  • Del.icio.us
  • StumbleUpon
  • Reddit
  • RSS

6 comments:

siwid said...

mangtap nih. coba dulu agh. thx

archv3nture said...

klo yang ini saya mau...ijin copy kodenya ya mbak...mksh dah berbagi infonya

ilmu-coin said...

wah,,,, ini nie yang slama ini saya cari,,,
thanks gan,,,,
:)

Rizkan Syarif said...

mantap gan, makasih banyak inpohnya

Fauzul Faura said...

Makasih Gan, berhasil kok. tinggal saya edit aja sesuai kemauan

Pagi said...

tambah ilmu baru nih nice info

Post a Comment