Menu Navigasi


Sekarang kita akan mencoba membuat menu navigasi horizontal seperti di bawah ini:


Kegunaan dari menu navigasi ini adalah memudahkan pengunjung untuk menuju ke sebuah kategori dalam blog kita..
Dan berguna untuk memperindah tampilan blog..

Gimana sih caranya???
Ikuti langkah berikut ::

1. Log in dahulu ke account blogspot sobat.

2. KLik "Page Element" & Klik "Edit HTML"

3. Centangkan "Expand Widget Templates"

4. Copy kode dibawah ini dan letakkan tepat diatas kode ]]></b:skin>




.glossymenu{
    position: relative;
    padding: 0 0 0 34px;
    margin: 0 auto 0 auto;
    background: url(http://www.dynamicdrive.com/cssexamples/media/menub_bg.gif) repeat-x; /*tab background image path*/
    height: 46px;
    list-style: none;
}

.glossymenu li{
    float:left;
}

.glossymenu li a{
    float: left;
    display: block;
    color:#000;
    text-decoration: none;
    font-family: sans-serif;
    font-size: 13px;
    font-weight: bold;
    padding:0 0 0 16px; /*Padding to accomodate left tab image. Do not change*/
    height: 46px;
    line-height: 46px;
    text-align: center;
    cursor: pointer;   
}

.glossymenu li a b{
    float: left;
    display: block;
    padding: 0 24px 0 8px; /*Padding of menu items*/
}

.glossymenu li.current a, .glossymenu li a:hover{
    color: #fff;
    background: url(http://www.dynamicdrive.com/cssexamples/media/menub_hover_left.gif) no-repeat; /*left tab image path*/
    background-position: left;
}

.glossymenu li.current a b, .glossymenu li a:hover b{
    color: #fff;
    background: url(http://www.dynamicdrive.com/cssexamples/media/menub_hover_right.gif) no-repeat right top; /*right tab image path*/
}

</style>


5. Lalu copy code di bawah ini dan letakkan tepat di atas kode <div id='content-wrapper'>


<ul class='glossymenu'>
<li class='current'><a href='URL-Blog-Kamu'><b>Home</b></a></li>

<li><a href='URL-Link-Tujuan1'><b>Judul-Tujuan1</b></a></li>
<li><a href='URL-Link-Tujuan2'><b>Judul-Tujuan2</b></a></li>
<li><a href='URL-Link-Tujuan3'><b>Judul-Tujuan3</b></a></li>
<li><a href='URL-Link-Tujuan4'><b>Judul-Tujuan4</b></a></li>
<li><a href='URL-Link-Tujuan5'><b>Judul-Tujuan5</b></a></li>

</ul>



Pada teks yang berwarna Biru sobat isi url tujuan yang di inginkan.
Pada teks yang berwarna Merah sobat isi dengan judul sesuai dari tujuan dari link tersebut.

6. Simpan Lalu lihat hasilnya

7. Selesai




Selamat Mencoba...

2 KomeNtaR..:

ina on November 24, 2009 at 11:22 AM said...

makasih tutornya yah...

Dewi on November 25, 2009 at 3:44 PM said...

okey....

Post a Comment

coMmeNt

Search

Info Blogku


free counters



Powered by  MyPagerank.Net
Widgets for Blogger Find broken links on your website for free with LinkTiger.com

Search Engine Optimization SEO

Locations of visitors to this page

Translator

English French German Spain Italian Dutch Russian Portuguese Japanese Korean Arabic Chinese Simplified
 

dEwie LoveRz ♣ ♣ ♣ Mamanunes Templates ♣ ♣ ♣ Inspiração: Templates Ipietoon
Ilustração: Gatinhos - tubes by Jazzel (Site desativado)