Home » » Membuat Menu Navigasi Horizontal Glossy di Blog

Membuat Menu Navigasi Horizontal Glossy di Blog

Friday, September 21, 2012 | 0 comments

Kembali saya akan berikan tutorial dalam modifikasi menu navigassi horisontal di blog anda. Seperti yang sudah saya jelaskan sebelumnya menu navigasi pada blog merupakan elemen yang penting di  alam sebuah blog yang mementingkan penampilan dan style untuk setiap detilnya. Setelah sebelumnya saya memberikan tutorial membuat multi level menu drop down, kali ini saya akan berikan lagi penjelasan membuat menu horisontal glossy...


Langsung saja. berikut ini tutorial membuat glossy horizontal menu
  1. Login ke blogger dengan akun anda 
  2. Kemudian pada dasbor  klik Rancangan >> Edit HTML 
  3. Tambahkan kode CSS berikut diatas tag  ]]></b:skin>
    /*Credits: By Santosh Setty (http://suryacomunityseven.com) */
    .glossymenu{
        position: relative;
        padding: 0 0 0 34px;
        margin: 0 auto 0 auto;
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlp34YiKCA75MqrxWvhDVXBE6magTYqopC6HtN-gGrG9taqUe8njJ39e1cHl62bC_nE-jV25SnwyIU3tVjP3pR3ScpMwDpv_0ZFKMAstMuR_aWaNd0irsw8ImYvdklcmTopQ1FvZCcOfo/s1600/maskolis+menu.png) 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCq4Hdk8SPN2GN3G6KdkdKZjnKLY4XJeWo7dyhkzCfm7IaBl5WpuK6O_Jt9SKuHvzu2HAEzL9OFezv12udmVdNOHTqvcez1ZjCw8bT11JQtOqoqPCuP-_mQyFrNc3d92abo4hnW8qhHsY/s1600/maskolis+nav.png) no-repeat; /*left tab image path*/
        background-position: left;
    }
    .glossymenu li.current a b, .glossymenu li a:hover b{
        color: #fff;
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN9RX_t1V9LpGCWfrgH8HFgqq4keRNHbA8_-ldrjNVB0hiy4EHNJX7aGM5NoEHvTItLr4VmL9RwT2MdHsAofVbzZkMvS8cQPnU-vh5rLo4a-cEjcSJv6NkJcH8Iz3yCUqxftN-37Gq5TM/s1600/naskolis+leftnav.png) no-repeat right top; /*right tab image path*/
    }
    Jika gambarnya tidak cocok, bisa anda ganti sesuaikan dengan template yang dipakai. Di bawah ini adalah contoh gambar background yang bisa anda gunakan :
    image 
  4. Silahkan upload dulu image diatas ke tempat hosting masing-masing. 
  5. Terakhir tambahkan kode HTML berikut diatas <div id='header-wrapper'>
    <ul class='glossymenu'>
    <li class='current'><a href='http://suryacomunityseven.blogspot.com/'><b>Home</b></a></li>
    <li><a href='http://suryacomunityseven.blogspot.com/search/label/tutorial blog' title='tutorial blog'><b>Tutorial Blog</b></a></li>
    <li><a href='http://suryacomunityseven.blogspot.com/search/label/SEO' title='SEO'><b>SEO</b></a></li>
    <li><a href='http://suryacomunityseven.blogspot.com/search/label/wordpress' title='wordpress'><b>Wordpress</b></a></li>
    <li><a href='http://suryacomunityseven.blogspot.com/search/label/affiliate' title='affiliate'><b>Affiliate</b></a></li> 
    <li><a href='http://suryacomunityseven.blogspot.com/search/label/hosting' title='hosting'><b>Hosting</b></a></li> 
    </ul>
  6. Temen-temen bisa edit link dan anchor teks kode HTML diatas 
  7. Terakhir Save template anda
Memang banyak sekali menu navigasi horisontal yang dapat kita pakai untuk memperindah blog. Pada postingan selanjutnya saya akan coba memberikan cara membuat menu navigasi animasi dengan jQuery..Tunggu tanggal mainnya.....

Related Post:

Share This Article :

0 comments:

Post a Comment

Saya tidak online 24 Jam dan hanya sendiri mengurus blog ini, mohon maaf bila komentar anda tidak di balas.
Mohon gunakan kata-kata yang sopan dalam memberikan komentar.
Komentar SPAM, SARA, dan sejenisnya tidak akan di tampilkan.

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. SURYA COMMUNITY SEVEN - All Rights Reserved
Template Modify by Creating Website
Proudly powered by Blogger