Membuat Navigasi Menu Warna Warni Pada Blog

Membuat Navigasi Menu warna-warni pada blog, Seperti hal yang pernah saya bahas sebelumnya yaitu cara membuat menu Navigasi pada blog. Tpi kali ini sedikit berbeda yaitu bagaimana cara membuat Navigasi menu yang pada setiap linknya mempunyai warnah yang berbeda beda.

Caranya sangat muda kita hanya perlu menambahkan class kode background color untuk setiap link menu yang akan kita beri warna, Jika anda berminat untuk memasangnya maka silahkan simak langka-langka berikut :

1. Login terlebih dahulu ke akun blogger anda.
2. Setelah itu menuju Template > Edit HTM.
3. Cari kode ]]></b:skin> untuk memudahkan pencarian gunakan Ctrl+f
4. Copy kode CSS berikut ini, lalu taruh di atas kode ]]></b:skin>

HTML CODE                                                                                                                              </>

.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; }
.aqua{background-color:#00FFFF !important;} .aqua:hover{background-color:#7FFFD4 !important;}
.Blueviolet{background-color:#8A2BE2!important;} .Blueviolet:hover{background-color:#9932CC !important;}
.Chartreuse{background-color:#7FFF00!important;} .Chartreuse:hover{background-color:#ADFF2F !important;}
.Deeppink{background-color:#FF1493 !important;} .Deeppink:hover{background-color:#FF00FF !important;}
.Lightseagreen{background-color:#20B2AA  !important;} .Lightseagreen:hover{background-color:#66CDAA !important;}

5. Kemudian Simpan template anda.
6. Selanjutnya masuk ke Tata Letak > "Tambahkan Widget" dan pilih HTML/Javascript.
7. Selanjutnya Copy kode berikut ini, lalu paste ke dalam widget HTML/Javascript

HTML CODE                                                                                                                              </>

<div class='navmenu'>
<ul class='navfullcolor'>
    <li><a expr:href='data:blog.homepageUrl' class='aqua'>Home</a></li>
    <li><a href='http://berbagiitrick.blogspot.co.id/' class='Blueviolet'>Menu 1</a>
        <ul>
        <li><a href='http://berbagiitrick.blogspot.co.id/'>Sub Menu 1</a></li>
        <li><a href='http://berbagiitrick.blogspot.co.id/'>Sub Menu 2</a></li>
        <li><a href='http://berbagiitrick.blogspot.co.id/'>Sub Menu 3</a></li>
        </ul>
    </li>
    <li><a href='http://berbagiitrick.blogspot.co.id/' class='Chartreuse'>Menu 2</a>
        <ul>
        <li><a href='http://berbagiitrick.blogspot.co.id/'>Sub Menu 1</a></li>
        <li><a href='http://berbagiitrick.blogspot.co.id/'>Sub Menu 2</a></li>
        <li><a href='http://berbagiitrick.blogspot.co.id/'>Sub Menu 3</a></li>
        </ul>
    </li>
    <li><a href='http://berbagiitrick.blogspot.co.id/' class='Deeppink'>Menu 3</a>
        <ul>
        <li><a href='http://berbagiitrick.blogspot.co.id/'>Sub Menu 1</a></li>
        <li><a href='http://berbagiitrick.blogspot.co.id/'>Sub Menu 2</a></li>
        <li><a href='http://berbagiitrick.blogspot.co.id/'>Sub Menu 3</a></li>
        </ul>
    </li>
    <li><a href='http://berbagiitrick.blogspot.co.id/' class='Lightseagreen'>Menu 4</a>
        <ul>
        <li><a href='http://berbagiitrick.blogspot.co.id/'>Sub Menu 1</a></li>
        <li><a href='http://berbagiitrick.blogspot.co.id/'>Sub Menu 2</a></li>
        <li><a href='http://berbagiitrick.blogspot.co.id/'>Sub Menu 3</a></li>
        </ul>
    </li>
    <li><a href='http://berbagiitrick.blogspot.co.id/' class='Chartreuse'>Menu 5</a></li>
    <li><a href='http://berbagiitrick.blogspot.co.id/' class='Lightseagreen'>Menu 6</a></li>
    <li><a href='http://berbagiitrick.blogspot.co.id/' class='aqua'>Menu 7</a></li>
</ul>
</div>

Selanjutnya simpan Template anda.