Search This Blog

test

30 January 2012

Cara Membuat Menu Navigasi dengan CSS Type 10

Kali ini saya akan berbagi  Tutorial Blog tentang bagaimana cara Membuat menu Navigasi yg Menarik dengan sentuhan CSS . Sebenarnya trik ini hanya Copas dari Tympanus.net
tapi karena Tympanus berbahasa inggris kadang kala ada yg kesulitan untuk menerapkannya di Blog .
Langsung saja

Menu model Kesepuluh caranya :

1. Cari Kode ]]></b:skin> lalu taruh kode dibawah ini di atas kode b:skin tersebut :


#menu10 ul {
    list-style:none;
    font-family: Georgia, serif;
    font-size: 40px;
    letter-spacing: -3px;
    line-height: 1.2em;
    float:left;
    clear:both;
    margin:20px;
    border:3px solid #5F3B2F;
}
#menu10 ul li{
    float:left;
}
#menu10 ul li a{
    display:block;
    text-decoration:none;
    padding:5px 10px 5px 10px;
    background-color:#955542;
    width:170px;
    text-align:center;
}
#menu10 ul li a span{
    display:block;
}
#menu10 ul li a span.title{
    color:#fff;
    padding-bottom:5px;
}
#menu10 ul li a:hover{

}
#menu10 ul li a:hover span.title{
    font-family: Georgia, serif;
    font-size: 10px;
    font-style: normal;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 2em;
    color:#fff;
    border:1px dashed #fff;
    padding-bottom:3px;
    background-color:#AF6C57;
}
#menu10 ul li a span.text{
    padding:0px 5px;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: normal;
    line-height: 1.4em;
    color:#fff;
    background-color:#5F3B2F;
    visibility:hidden;
    border-bottom:1px groove #AF6C57;
}
#menu10 ul li a:hover span.text{
    line-height: 3.4em;
    visibility:visible;
}
2. Masuk ke Rancangan lalu Klik Elemen Laman
3. Tambahkan Gadget , Pilih HTML/JavaSctirp
4. Lalu tambahkan Kode Ini :

<div id="menu10">
    <ul>
        <li><a href="">
                <span class="title">About</span>
                <span class="text">Who we are</span>
            </a>
        </li>
        <li><a href="">
                <span class="title">Portfolio</span>
                <span class="text">What we do</span>
            </a>
        </li>
        <li><a href="">
                <span class="title">Blog</span>
                <span class="text">What we talk about</span>
            </a>
        </li>
        <li><a href="">
                <span class="title">Contact</span>
                <span class="text">How to get in touch</span>
            </a>
        </li>
    </ul>
</div>
5. Lalu Klik Simpan
Maka hasilnya akan seperti :







Tambahan : Silahkan dirubah tulisan 'Url-ygInginDitambahkan' dengan url Sobat
Contoh :

<li><a href="http://tandichasgalih.blogspot.com/search/label/Misteri%20Dunia"><span class="title">Misteri Dunia</span><span class="text">Misteri yg Ada di Dunia</span>
</a></li>

Lalu jika sobat ingin menambahkan Menunya lagi tinggal ditambah lagi kode :


<li><a href="url-yg-dituju"><span class="title">Jdul Navigasi</span><span class="text">Text</span>
</a></li>


Jika Tutorial ini tidak Berhasil Dimohon untuk menambahkan Komentar

Jika anda Ingin Melihat type-type lain silahkan cari disini :

Navigasi Type 1
Navigasi Type 2
Navigasi Type 3
Navigasi Type 4
Navigasi Type 5
Navigasi Type 6
Navigasi Type 7
Navigasi Type 8
Navigasi Type 9
Navigasi Type 10
Navigasi Type 11
Navigasi Type 12