Cara Mudah Membuat Navigasi Menu Full Color

↑ Grab this Headline Animator

Cara Mudah Membuat Navigasi Menu Full Color

Hay sabat ilmuane kali saya share " Cara Mudah Membuat Navigasi Menu Full Color  " , ssangat menarik jika blog sobat di buat dengan navigasi menu seperti gambar di atas , tentu juga dengan blog sobat yang menarik akan membuat pengunjung betah dan merasa enak di pandang oleh pengunjung blog sobat . Dengan menu yang Full Color dan dapat di setting sesuai keinginan warna yang sobat mau . Sangat mudah memasang Navigasi menu Full Color ini , cuma  menambahkan class yang berisi background untuk setiap warnanya pada link menu . 

Berikut Tutorial Memasangnya :

1. Masuk Blogger

2. Dashboard >Pilih Template > Edit HTML

3. Cari code ]]></b:skin> supaya mudah , Pake CTRL+F aja

4. Masukan Code CSS tepat di atas ]]></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;

5. Selanjutnya letakan HTML ke dalam template,

    Pilih  Tata Letak > Tambah Widget ( di Atas Pos ) pilih > HTML/Javascript.

6. Copy kode berikut ini, lalu paste ke dalam widget HTML/Javascript

<div class='navmenu'>

<ul class='navfullcolor'>

    <li><a expr:href='data:blog.homepageUrl' class='blue'>Home</a></li>

    <li><a href='http://ilmuane11.blogspot.com' class='red'>Menu 1</a>

        <ul>

        <li><a href='http://ilmuane11.blogspot.com'>Sub Menu 1</a></li>

        <li><a href='http://ilmuane11.blogspot.com'>Sub Menu 2</a></li>

        <li><a href='http://ilmuane11.blogspot.com'>Sub Menu 3</a></li>

        <li><a href='http://ilmuane11.blogspot.com'>Sub Menu 4</a></li>

        <li><a href='http://ilmuane11.blogspot.com'>Sub Menu 5</a></li>

        </ul>

    </li>

    <li><a href='http://ilmuane11.blogspot.com' class='yellow'>Menu 2</a>

        <ul>

        <li><a href='http://ilmuane11.blogspot.com'>Sub Menu 1</a></li>

        <li><a href='http://ilmuane11.blogspot.com'>Sub Menu 2</a></li>

        <li><a href='http://ilmuane11.blogspot.com'>Sub Menu 3</a></li>

        <li><a href='http://ilmuane11.blogspot.com'>Sub Menu 4</a></li>

        </ul>

    </li>

    <li><a href='http://ilmuane11.blogspot.com' class='green'>Menu 3</a>

        <ul>

        <li><a href='http://ilmuane11.blogspot.com>Sub Menu 1</a></li>

        <li><a href='http://ilmuane11.blogspot.com'>Sub Menu 2</a></li>

        <li><a href='http://ilmuane11.blogspot.com'>Sub Menu 3</a></li>

        </ul>

    </li>

    <li><a href='http://ilmuane11.blogspot.com' class='purple'>Menu 4</a>

        <ul>

        <li><a href='http://ilmuane11.blogspot.com'>Sub Menu 1</a></li>

        <li><a href='http://ilmuane11.blogspot.com'>Sub Menu 2</a></li>

        </ul>

    </li>

    <li><a href='http://ilmuane11.blogspot.com' class='red'>Menu 5</a></li>

    <li><a href='http://ilmuane11.blogspot.com' class='yellow'>Menu 6</a></li>

    <li><a href='http://ilmuane11.blogspot.com' class='green'>Menu 7</a></li>

</ul>

</div>

7. Klik Simpan > Selseai tinggal Review deh . jangan kaget  kalau sangat keren

Selsai , sekian tutorial blog dari saya , semoga bermanfaat :D

Dunia Aneh
Kumpulan Artikel Unik dan Aneh sepanjang Masa
Catatan dosen

Tips Android dan BBM
Kumpulan Ulasan tentang Tips Android dan BBM
Putera Dosen

Meme Lucu Banget
Kumpulan Meme Lucu yang lagi ngetren
Cds Blog

Kumpulan Artikel Menarik
Semua Artikel yang Kamu Cari Ada di sini
230 Penulis
Ads by BLOGGER

Posted by Very Handika

Tweet