Search This Blog

test

30 January 2012

Cara Membuat Menu Navigasi dengan CSS Type 11

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

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


#menu11 ul {
    list-style:none;
    font-family:'Gill Sans','Gill Sans MT';
    text-transform:uppercase;
    font-size: 28px;
    line-height: 1.2em;
    float:left;
    clear:both;
    margin:20px;
}
#menu11 ul li{
    float:left;
}
#menu11 ul li a{
    display:block;
    text-decoration:none;
    padding:0px 10px 0px 10px;
    width:170px;
    height:55px;
    border-left:8px dotted #fff;
}
#menu11 ul li a span{
    display:block;
}
#menu11 ul li a span.title{
    color:#fff;
}
#menu11 ul li a:hover{
    border-left:8px dotted #fb0303;
}
#menu11 ul li a:hover span.title{
}
#menu11 ul li a span.text{
    color:#fb0303;
    font-size:12px;
    letter-spacing:0px;
    visibility:hidden;
    border-left:16px dotted #fb0303;
    line-height:0px;
    padding-top:4px;
    margin:10px 0px 12px 0px;
}
#menu11 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="menu11">
    <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