Cara Membuat Navigasi lebih berwarna ( full color )

Cara Membuat Navigasi lebih berwarna_ Selamat Pagi menjelang siang
Warga Blogger yang saya cintai :v Berawal dari chat banyak yang bertanya
bagai mana cara membuat Menu navigasi full collor 
seperti yang ada pada blog ini jadi
apa salahnya saya membagikan tutorial ini.. 
sebenernya sudah banyak sekali tutorial
membuat menu navigasi yang keren ini 
tapi saya akan share ulang untuk catatan saya
dan untuk teman teman saya yang belum tau caranya 
oke langsung aja kita simakn caranya.

Navigasi Full Collor

1. Seperti Biasa Login Terlbih dahulu :v
2. Masuk Ke template klik Edit HTML
3. Cari kode ini ]]></b:skin>
4. Copy kode di bawah ini dan letakan 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;}

     5. Copy kode di bawah ini dan letakan di 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://mas-andes.blogspot.com' class='red'>Menu 1</a>
        <ul>
        <li><a href='http://Kang-maftuhi.blogspot.com'>Sub Menu 1</a></li>
        <li><a href='http://Kang-maftuhi.blogspot'>Sub Menu 2</a></li>
        <li><a href='http://Kang-maftuhi.blogspot'>Sub Menu 3</a></li>
        <li><a href='http://Kang-maftuhi.blogspot'>Sub Menu 4</a></li>
        <li><a href='http://Kang-maftuhi.blogspot'>Sub Menu 5</a></li>
        </ul>
    </li>
    <li><a href='http://Kang-maftuhi.blogspot' class='yellow'>Menu 2</a>
        <ul>
        <li><a href='http://Kang-maftuhi.blogspot'>Sub Menu 1</a></li>
        <li><a href='http://Kang-maftuhi.blogspot'>Sub Menu 2</a></li>
        <li><a href='http://Kang-maftuhi.blogspot'>Sub Menu 3</a></li>
        <li><a href='http://Kang-maftuhi.blogspot'>Sub Menu 4</a></li>
        </ul>
    </li>
    <li><a href='http://Kang-maftuhi.blogspot' class='green'>Menu 3</a>
        <ul>
        <li><a href='http://Kang-maftuhi.blogspot'>Sub Menu 1</a></li>
        <li><a href='http://Kang-maftuhi.blogspot'>Sub Menu 2</a></li>
        <li><a href='http://Kang-maftuhi.blogspot'>Sub Menu 3</a></li>
        </ul>
    </li>
    <li><a href='http://Kang-maftuhi.blogspot' class='purple'>Menu 4</a>
        <ul>
        <li><a href='http://Kang-maftuhi.blogspot'>Sub Menu 1</a></li>
        <li><a href='http://Kang-maftuhi.blogspot'>Sub Menu 2</a></li>
        </ul>
    </li>
    <li><a href='http://Kang-maftuhi.blogspot' class='red'>Menu 5</a></li>
    <li><a href='http://Kang-maftuhi.blogspot' class='yellow'>Menu 6</a></li>
    <li><a href='http://Kang-maftuhi.blogspot' class='green'>Menu 7</a></li>
</ul>
</div>

Keterangan..!

Ganti http://Kang-maftuhi.blogspot.com dengan URL blog sahabat..

Apa bila sahabat masih kebingungan juga sahabat bisa pke cara yang satu ini

<style type="text/css" scoped>

Taruh CSS yang terdapat pada point 3 disini

</style>

Taruh HTML yang terdapat pada point 5 disini

Semoga Bermanfaat apa bila sahabat masih belum paham dengan Tutorial ini
silahkan berkomentar atau bisa chat saya di fb Maftuhi Jore 

Sumber Scrive : Mas Andres