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 

16 komentar

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

Menu Nya Dropdown Kok.. ;)

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

apenasaran nih jov , ijin coba ya

Tutorialnya Sangat Bermanfaat :D

Terima Kasih Udah Mampir :D

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

ini yang saya cari, makasih mas gan

BLOG nya menarik sekali keren banget ka kunjungi yang satu ini yaaa biar kalian ga bingung dalam menentukan masalah GEDGET
http://zapplerepair.com/iPhone-6S-masalah-lcd-display-kadang-mau-muncul-kadang-engga.html