Banner 468x60

Cara Membuat Navigasi Menu Full Color

Cara Membuat Navigasi Menu Full Color



Cara Membuat Navigasi Menu Full Color - Hello Sobat Cyber Creative.. Maaf Admin Sekarang Udah Jarang Post.. Karena Saya Sekarang Sedang Menghadapi Kurikulim 2013 Jadi Udah Sibuk Deh...

Ok Kali Ini Saya Akan Share Tutorial Yang Berjudul " Cara Membuat Navigasi Menu Full Color "
Bagaimana? Penasaran Untuk Membuat Navigasi Menu Full Color?
Langsung Aja Kita Ke TKP



  • Login Ke Blogger Masing-Masing
  • Pilih Template > Edit HTML
  • Copy Code CSS Berikut Tepat Di Atas Kode ]]></b:skin>


.navmenu { background: #111; border-bottom: 5px solid #0091d6; position: relative; height:35px; margin: 0 auto; text-transform: uppercase; z-index: 1; }
ul.navfullcolor { list-style: none; padding: 0; font: 14px Arial; font-weight: bold; width:auto; line-height: 15px; margin: auto; }
ul.navfullcolor li { float: left; position: relative; margin: 0px 1px 0px 0px; }
ul.navfullcolor li a, ul.navfullcolor li a:link { color: #fff; text-decoration: none; display: block; padding: 10px 26px; transition: all 0.2s ease; }
ul.navfullcolor li a:hover { color: #fff; transition: all 1s ease; }
ul.navfullcolor li ul { display: none; top: 35px; border-top: 5px solid #FF8000; }
ul.navfullcolor li:hover ul { position: absolute; display: block; padding: 0; list-style: none; }
ul.navfullcolor li ul li { float: none; background: #282321; border-bottom: 1px solid #191614; border-top: 1px solid #3a3230; width:210px; }
ul.navfullcolor li ul li a, ul.navfullcolor li ul li a:link { color: #aaa; display: block; }
ul.navfullcolor li ul li a:hover { background: #FF8000; }
.green{background-color:#01A451 !important;} .green:hover{background-color:#52e052 !important;}
.yellow{background-color:#FBC700 !important;} .yellow:hover{background-color:#FFE500 !important;}
.red{background-color:#D52100 !important;} .red:hover{background-color:#ff0000 !important;}
.purple{background-color:#660099 !important;} .purple:hover{background-color:#D580FE !important;}
.blue{background-color:#0091d6 !important;} .blue:hover{background-color:#80C8FE !important;}


  • Selanjutnya Taruh Code HTML Di Bawah <header id='header-wrapper'>
5. Copy kode berikut ini, lalu paste ke dalam widget HTML/Javascript kemudian klik Simpan.

<div class='navmenu'>
<ul class='navfullcolor'>
    <li><a expr:href='data:blog.homepageUrl' class='blue'>Home</a></li>
    <li><a href='http://www.cyber-cre4tive.blogspot.com/' class='red'>Menu 1</a>
        <ul>
        <li><a href='http://www.cyber-cre4tive.blogspot.com/'>Sub Menu 1</a></li>
        <li><a href='http://www.cyber-cre4tive.blogspot.com/'>Sub Menu 2</a></li>
        <li><a href='http://www.cyber-cre4tive.blogspot.com/'>Sub Menu 3</a></li>
        <li><a href='http://www.cyber-cre4tive.blogspot.com/'>Sub Menu 4</a></li>
        <li><a href='http://www.cyber-cre4tive.blogspot.com/'>Sub Menu 5</a></li>
        </ul>
    </li>
    <li><a href='http://www.cyber-cre4tive.blogspot.com/' class='yellow'>Menu 2</a>
        <ul>
        <li><a href='http://www.cyber-cre4tive.blogspot.com/'>Sub Menu 1</a></li>
        <li><a href='http://www.cyber-cre4tive.blogspot.com/'>Sub Menu 2</a></li>
        <li><a href='http://www.cyber-cre4tive.blogspot.com/'>Sub Menu 3</a></li>
        <li><a href='http://www.cyber-cre4tive.blogspot.com/'>Sub Menu 4</a></li>
        </ul>
    </li>
    <li><a href='http://www.cyber-cre4tive.blogspot.com/' class='green'>Menu 3</a>
        <ul>
        <li><a href='http://www.cyber-cre4tive.blogspot.com/'>Sub Menu 1</a></li>
        <li><a href='http://www.cyber-cre4tive.blogspot.com/'>Sub Menu 2</a></li>
        <li><a href='http://www.cyber-cre4tive.blogspot.com/'>Sub Menu 3</a></li>
        </ul>
    </li>
    <li><a href='http://www.cyber-cre4tive.blogspot.com/' class='purple'>Menu 4</a>
        <ul>
        <li><a href='http://www.cyber-cre4tive.blogspot.com/'>Sub Menu 1</a></li>
        <li><a href='http://www.cyber-cre4tive.blogspot.com/'>Sub Menu 2</a></li>
        </ul>
    </li>
    <li><a href='http://www.cyber-cre4tive.blogspot.com/' class='red'>Menu 5</a></li>
    <li><a href='http://www.cyber-cre4tive.blogspot.com/' class='yellow'>Menu 6</a></li>
    <li><a href='http://www.cyber-cre4tive.blogspot.com/' class='green'>Menu 7</a></li>
</ul>
</div>

Keterangan : Ganti Code http://www.cyber-cre4tive.blogspot.com/ Dengan Link Blog Anda
  • Klik Save ^_^



Ok Sekian Tutorial Dari Blog Cyber Creative
Terus Kunjungi Blog Ini Yah.. Walaupun Admin Jarang Nge Post ^_^ 


Oh Iya Ketinggalan DEMO Nya... Silahkan Liat Demo Nya :v 

13 komentar

Kayaknya Pas Nih.. Buat Template Saya..
Menu Nya Dropdown Ngak Mas ?

Ok Deh... Makasih Buat Tutorial Nya Mas :D

Tutorialnya Sangat Bermanfaat :D

Mantep sob, bisa dijadikan referensi.. Jangan lupa visit back..

ini yang saya cari, makasih mas gan