-->

Pages

Sabtu, 26 Maret 2011

Menu Navigasi

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...

Tidak ada komentar: