tempat belajar blog dan terhubung teman blogger untuk belajar trik blogger, tips edit blog, trik google, SEO dan SERP

Iklan

Blog ini di Sponsori

Jumat, 07 Maret 2008

Cara Membuat Menu Horisontal di Blogger-Blogspot

Cara Membuat Menu Horisontal di Blogger-Blogspot
Membuat menu horisontal tidaklah begitu rumit, yang penting kita tahu caranya. Pada contoh di bawah ini saya akan mempraktekan cara membuat menu horisontal dengan detail yang mudah di pahami. Oke, mari kita mulai dengan kode css nya dahulu agar lebih gampang dimengerti dan di save. Pada contoh css saya ambil dari menu navigasi di blog ini yang terbagi dari dua bua menu horisontal :
  1. Untuk Menu horisontal yang pertama dengan kode css nya seperti di bawah ini :
    /* MENU PERTAMA */

    #kolomatas {
    position: center;
    clear:both;
    margin: 5px 5px 5px 5px;
    color:#000000;
    float: left;
    background:#454545;
    }
    #kolomatas h2 {
    padding: 5px 0 2px 0;
    margin: 0 0 10px 0;
    color:#ff5a00;
    font-size: 12px;
    letter-spacing: -1px;
    border-bottom: 1px solid #fff;
    }
    #kolomatas ul {
    font-size: 11px;
    font-weight: bold;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: relative;
    text-transform: uppercase;
    }
    #kolomatas ul li {
    float: left;
    list-style: none outside none;
    }
    #kolomatas ul li a,#kolomatas ul li a:visited {
    background-color: #333333;
    border-left: 1px solid #444444;
    border-right: 1px solid #222222;
    color: #FFFFFF;
    display: block;
    font-weight: bold;
    line-height: 14px;
    margin: 0;
    outline: medium none;
    padding: 10px 15px;
    text-decoration: none;
    text-shadow: 1px 1px 2px #000000;
    vertical-align: top;
    }
    #kolomatas li a:hover {
    background-color: #1C1C1C;
    border-left: 1px solid #444444;
    border-right: 1px solid #222222;
    color: #FF6C24;
    display: block;
    font-weight: bold;
    line-height: 14px;
    margin: 0;
    outline: medium none;
    padding: 10px 15px;
    text-decoration: none;
    text-shadow: 1px 1px 2px #000000;
    vertical-align: top;
    }

    #kolomatas ul li a.current, #menukategori ul li a.current:visited, #menukategori ul li a.current:hover {
    background: none repeat scroll 0 0 #FFFFFF;
    color: #FFFFFF;
    margin: 4px;
    padding: 7px;
    }
    #kolomatas-left {
    width: 900px; /* sesuaikan dengan lebar halaman */
    color:#000000;
    float: left;
    background:#454545;
    }
    #kolomatas-right {
    width: 250px;
    margin: 5px 0px 5px 10px;
    color:#000000;
    float: right;
    background:#fff;
    }
    Lalu kode htmlnya sebagai berikut :
    <div id='kolomatas'>
    <div id='kolomatas-left'>
    <ul id='kolomatas'>
    <li><a href='http://admin-belajar.blogspot.com/search/label/seo'>S E O</a></li>
    <li><a href='http://admin-belajar.blogspot.com/search/label/trik'>Trik Blog</a></li>
    <li><a href='http://admin-belajar.blogspot.com/search/label/download'>DOWNLOAD</a></li>
    </ul>
    </div>
    </div>
    Hasilnya seperti ini:
  2. Dan untuk Menu horisontal yang kedua yang saya beri nama MENU ADMIN dengan kode css seperti di bawah ini :

    /* MENU ADMIN */
    #menuadmin {width: 100%; margin-top: -0.3em;margin-left: -0.1em;margin-right: -0.2em;float:left; background-color:#333}
    #menunavadmin { margin: 0;padding: 0; }
    #menunavadmin ul {float: left;list-style: none;margin: 0;padding: 0; }
    #menunavadmin li {list-style: none;margin: 0px;padding: 0; }
    #menunavadmin li a,#menunavadmin li a:link,#menunavadmin li a:visited {height: 22px;color:#FFF;display: block;font-size: 13px;text-decoration: none;margin: 0;padding:10px 13px 9px 13px;border-right: 1px solid #000; border-left: 1px solid #666;}
    #menunavadmin li a:hover,#menunavadmin li a:active {color: #D00; margin: 0;text-decoration: none;background:#444;}
    #menunavadmin li li a, #nav li li a:link,#menunavadmin li li a:visited { background:#444;min-width: 150px;color: #333333;font-size: 14px;font-weight: normal;float: none; margin: 0; padding: 5px 10px;font-weight:bold; font-family:arial;box-shadow: 0px 3px 3px rgba(0,0,0,0.8);-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.8);-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.8);text-align:left; }
    #menunavadmin li li a:hover,#menunavadmin li li a:active {background: #CCC;color: #B00;}
    #menunavadmin li { float: left;padding: 0; border-bottom:1px solid #000; border-top:1px solid #777; }
    #menunavadmin li ul {z-index: 9999;position: absolute;left: -999em;height: auto;width: 170px;margin:0;padding: 0;border-top:1px solid #242424;}
    #menunavadmin li ul a {width: 140px; }
    #menunavadmin li ul ul {margin: -41.5px 0 0 176px;border:none;}
    #menunavadmin li:hover ul ul,#menunavadmin li:hover ul ul ul, #menunavadmin li.sfhover ul ul,#menunavadmin li.sfhover ul ul ul {left: -999em; }
    #menunavadmin li:hover ul, #menunavadmin li li:hover ul,#menunavadmin li li li:hover ul, #menunavadmin li.sfhover ul,#menunavadmin li li.sfhover ul,#menunavadmin li li li.sfhover ul {left: auto; }
    #menunavadmin li:hover, #menunavadmin li.sfhover { position: static; }
    Nah untuk kode html nya sebagai berikut :
    <div id='menuadmin'>

    <ul id='menunavadmin'>
    <li><a href='/'>Home</a></li>
    <li><a href='#yourlink'>Menu 1</a>
    <ul>
    <li><a href='#yourlink'>Menu 1.1</a>
    <ul>
    <li><a href='#yourlink'>Menu 1.1.1</a></li>
    <li><a href='#yourlink'>Menu 1.1.2</a></li>
    <li><a href='#yourlink'>Menu 1.1.3</a></li>
    <li><a href='#yourlink'>Menu 1.1.4</a></li>
    </ul>
    </li>
    <li><a href='#yourlink'>Menu 1.2</a>
    <ul>
    <li><a href='#yourlink'>Menu 1.2.1</a></li>
    <li><a href='#yourlink'>Menu 1.2.2</a></li>
    <li><a href='#yourlink'>Menu 1.2.3</a></li>
    <li><a href='#yourlink'>Menu 1.2.4</a></li>
    </ul>
    </li>
    <li><a href='#yourlink'>Menu 1.3</a>
    <ul>
    <li><a href='#yourlink'>Menu 1.3.1</a></li>
    <li><a href='#yourlink'>Menu 1.3.2</a></li>
    <li><a href='#yourlink'>Menu 1.3.3</a></li>
    <li><a href='#yourlink'>Menu 1.3.4</a></li>
    </ul>
    </li>
    </ul>
    </li>
    </ul></div>
    Hasilnya seperti ini seperti tampilan menu dia atas.
Nah mudah bukan? kamu tinggal memodifikasi sesuai kebutuhan. Oke deh, mudah-mudahan artikel ini bermanfaat untuk kita semua dan untuk tanya jawab jangan lupa menggunakan kolom komentar... sekian dulu ya,,
jangan lupa kalau mengcopy artikel ini harap cantumkan sumber: http://admin-belajar.blogspot.com
Comments
0 Comments

Tidak ada komentar:

Posting Komentar

Maaf jika sebagian komen sobat tidak terbalas di karenakan kesibukan admin.

-Berbahasa sopan, no spam dan fokus pada artikel adalah ciri blogger yang baik.
Thanks for visit :

 

SMS Gratis

Tips Hari Ini

jika blog anda sudah hilang tombol Monetize untuk Adsense, langkah mudahnya adalah dengan menulis http://www.blogger.com/adsense-overview.g?blogID=IDBLOG-ANDA di Address bar browser lalu tekan enter

memasukan iklan teks dalam postingan cukup dengan mengetikan kode <div id="adsleft" style="width:100px;height:100px">Isi Iklan</div>

untuk membuat optimasi SEO pada URL tambahkan ID seperti id="ycusoy+admin.belajar.blogspot.com" dan TITLE seperti title="Judul Posting"

untuk membuat optimasi SEO pada Gambar tambahkan ALT seperti alt="JUDUL POSTING"

Sepatah Kata:

mencoba berbagi berdasar pengalaman pribadi dan referensi internet

INFO LAINNYA

2009 Admin-Belajar Blog. All rights reserved.
Powered by Ycusoy and Blogger.
blogger seo friendly from www.yantocusoy.tk