Search This Blog

test

30 January 2012

Cara Membuat Menu Navigasi dengan CSS Type 12

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 Kelima caranya :

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


#menu12 ul {
    list-style:none;
    font-family: 'palatino linotype',palatino;
    font-size: 30px;
    letter-spacing: -1px;
    line-height: 1.2em;
    float:left;
    clear:both;
    margin:20px;
    border:5px solid #ccc;
}
#menu12 ul li{
    float:left;
}
#menu12 ul li a{
    display:block;
    text-decoration:none;
    padding:5px 10px 5px 10px;
    background-color:#ddd;
    width:170px;
    text-align:center;
    border:4px double #ddd;
}
#menu12 ul li a span{
    display:block;
}
#menu12 ul li a span.title{
    color:#fff;
    padding-bottom:5px;
    border-bottom:1px solid #fff;
}
#menu12 ul li a:hover{
    background-color:#fff;
    border:4px double #ddd;
}
#menu12 ul li a:hover span.title{
    color:#333;
    border-bottom:1px solid #ddd;
    text-transform:uppercase;
}
#menu12 ul li a span.text{
    color:#999;
    font-size:12px;
    letter-spacing:0px;
    visibility:hidden
}
#menu12 ul li a:hover span.text{
  visibility:visible;
}

2. Masuk ke Rancangan lalu Klik Elemen Laman
3. Tambahkan Gadget , Pilih HTML/JavaSctirp
4. Lalu tambahkan Kode Ini :

<div id="menu12">
    <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