Cara Membuat Menu Navigasi Warna Warni Di Blog

How To Make Navigation Menu Full Color In Blog - Kali ini saya akan membagikan salah satu tips yang lumayan sering dicari oleh para pecinta blogger di Dunia, yaitu cara  membuat menu navigasi menjadi full color atau warna warni 
Cara ini tergolong lumayan mudah menurut saya. oke jika agan belum tau penampakannya bagaimana. saya akan memberikan ScreeenShotnya :

Cara Membuat Menu Navigasi Warna Warni Di Blog 

nah itu sedikit penampakan dari blog ini setelah menggunakan full color . oke langsung saja untuk langkah langkahnya dibawah ini

1. Masuk Dulu Ke akun Blogger Sobat
2. Masuk Template > Edit HTML
3. Cari Kode ]]></b:skin> dan Masukkan Kode dibawah ini

.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;}

Untuk CSS Full Color diatas anda bisa tambahkan Color yang kurang atau mengganti Color diatas Dengan kesukaan anda sendiri 

4. Selanjutnya Cari Kode Menu Navigasi anda di Edit HTML. Dan ganti dengan Kode Menu Navigasi yang ada dibawah ini

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

5. Setelah itu Simpan  Template anda

Demo

oke Sekian dari saya semoga dapat bermanfaat dan Terimakasih

Resource : Disini

Tweet

Posted by Unknown