Cara Membuat Navigasi Menu Full Color Di Blog

Cara Membuat Navigasi Menu Full Color Di Blog

Rio Ilham Hadi

13 March 2014

Cara Membuat Navigasi Menu Full Color Di Blog - Sekarang saya akan memberikan Tutorial ''Cara Membuat Navigasi Menu Full Color Di Blog'' ada pengunjung di blog ini yang bertanya, ''bagaimana cara membuat menu navigasi berwarna'' dan saya berfikir apa ada orang lain yang bertanya demikian,,, dengan itu sekarang saya akan membagikan tips cara membuat navigasi menu berwarna, (Full Color) ternyata membuat navigasi menu berwarna itu cukup mudah, hanya menambahkan class yang berisi background untuk setiap warnanya pada link menu satu per satu. Untuk lebih jelasnya silahkan ikuti tutorial dibawah ini...

1. Masuk ke Akun Blogger

2. Pilih Dashboard > Template > Edit HTML

3. Masukan kode CSS ini di atas kode ]]></b:skin> Kemudian Simpan Template

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

4. Selanjutnya taruh HTML ke dalam template, letaknya bisa menyesuaikan template lama atau agar lebih mudah masuk Tata Letak > Tambah Widget > HTML/Javascript.
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://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>

Keterangan:
Ganti http://blanter-forever.blogspot.com dengan label link blog anda.

6. Setelah tersimpan silahkan lihat hasilnya.

• HOME
• MENU 1
• MENU 2
• MENU 3
• MENU 4

Apabila bagi yang masih kesulitan dalam melakukan Edit HTML template, bisa langsung memasukan seluruh kode diatas ke dalam widget HTML/Javascript agar lebih mudah. Caranya seperti di bawah ini:

<style type="text/css" scoped>

Taruh CSS yang terdapat pada point 3 disini

</style>

Taruh HTML yang terdapat pada point 5 disini

Kemudian Simpan.

Itulah Tutorial ''Cara Membuat Navigasi Menu Full Color Di Blog'' Jangan Lupa Like, Komen, dan Follownya ya,,, Terimakasih sudah berkunjung... dan semoga Tutorial ini Bermanfaat untuk sobat semua.... :D

Source : http://mas-andes.blogspot.com/2013/10/cara-membuat-navigasi-menu-full-color-blogger.html

Share This