Membuat Navigasi Menu Full Color di Blog

Membuat Navigasi Menu Full Color di Blog – setelah beberapa waktu lalu membaca komentar dari Bang Ancis maka timbul dalam pikiran untuk membagikan menu navigasi ini kepada siapapun yang ingin mencobanya dan mohon maaf Bang Ancis baru sekarang saya baru bisa share tutorial ini. Sebetulnya pada hari itu juga sudah langsung jadi namun apa daya seperti yang sudah saya katakan pada komentar sebelumnya. Untuk membagikan tutorial ini saya nunggu postingan yang sudah saya jadwalkan sebelumnya, harap di maklumi. Oke sekarang kembali ke inti tutorial, bagaimana cara untuk membuat navigasi menu full color di blog? Untuk membuat navigasi menu supaya menjadi full color atau warna-warni sebenarnya tidak susah. Membuat navigasi menu dengan warna yang berbeda-beda di setiap link menu sama saja khalayak membuat navigasi menu pada umumnya, hanya saja untuk membuat navigasi menu menjadi full color kita perlu menambahkan class yang berisi background untuk setiap warnanya pada link menu satu per satu. Namun biarpun begitu saya rasa hasilnya juga tidak cukup mengecewakan karena navigasi menu ini juga lumayan serasi di terapkan ke template blog, apalagi jika menggunakan template Metro UI. Untuk lebih jelasnya, berikut tutorial untuk Cara Membuat Navigasi Menu Full Color di Blog.

1. Login ke akun blogger.
2. Langsung menuju Template klik Edit HTML.
3. Copy kode CSS berikut ini, lalu taruh 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://mas-andes.blogspot.com' class='red'>Menu 1</a> <ul> <li><a href='http://mas-andes.blogspot.com'>Sub Menu 1</a></li> <li><a href='http://mas-andes.blogspot.com'>Sub Menu 2</a></li> <li><a href='http://mas-andes.blogspot.com'>Sub Menu 3</a></li> <li><a href='http://mas-andes.blogspot.com'>Sub Menu 4</a></li> <li><a href='http://mas-andes.blogspot.com'>Sub Menu 5</a></li> </ul> </li> <li><a href='http://mas-andes.blogspot.com' class='yellow'>Menu 2</a> <ul> <li><a href='http://mas-andes.blogspot.com'>Sub Menu 1</a></li> <li><a href='http://mas-andes.blogspot.com'>Sub Menu 2</a></li> <li><a href='http://mas-andes.blogspot.com'>Sub Menu 3</a></li> <li><a href='http://mas-andes.blogspot.com'>Sub Menu 4</a></li> </ul> </li> <li><a href='http://mas-andes.blogspot.com' class='green'>Menu 3</a> <ul> <li><a href='http://mas-andes.blogspot.com'>Sub Menu 1</a></li> <li><a href='http://mas-andes.blogspot.com'>Sub Menu 2</a></li> <li><a href='http://mas-andes.blogspot.com'>Sub Menu 3</a></li> </ul> </li> <li><a href='http://mas-andes.blogspot.com' class='purple'>Menu 4</a> <ul> <li><a href='http://mas-andes.blogspot.com'>Sub Menu 1</a></li> <li><a href='http://mas-andes.blogspot.com'>Sub Menu 2</a></li> </ul> </li> <li><a href='http://mas-andes.blogspot.com' class='red'>Menu 5</a></li> <li><a href='http://mas-andes.blogspot.com' class='yellow'>Menu 6</a></li> <li><a href='http://mas-andes.blogspot.com' class='green'>Menu 7</a></li> </ul> </div>

Keterangan:
Ganti http://mas-andes.blogspot.com dengan label link blog anda.

6. Setelah tersimpan silahkan lihat hasilnya.

• Home
• Menu 1
  • Sub Menu 1
  • Sub Menu 2
  • Sub Menu 3
  • Sub Menu 4
  • Sub Menu 5
• Menu 2
  • Sub Menu 1
  • Sub Menu 2
  • Sub Menu 3
  • Sub Menu 4
• Menu 3
  • Sub Menu 1
  • Sub Menu 2
  • Sub Menu 3
• Menu 4
  • Sub Menu 1
  • Sub Menu 2

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.

Demikian tutorial untuk Cara Membuat Navigasi Menu Full Color di Blog, lakukan yang mana yang lebih mudah. Akhir kata hanya bisa saya sampaikan untuk sedikit motivasi “Not an error when you try and then fail. The only mistake is when you do not dare try for fear of failure”. Sekian dan keep blogging!

Disalisn dari sumber Artikel : Mas-andes.blogspot.com