Cara 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.
4. Selanjutnya taruh HTML ke dalam template, letaknya bisa menyesuaikan template lama atau agar lebih mudah masuk Tata Letak > Tambah Widget > HTML/Javascript..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 berikut ini, lalu paste ke dalam widget HTML/Javascript kemudian klik Simpan.
Keterangan:<div class='navmenu'> <ul class='navfullcolor'> <li><a expr:href='data:blog.homepageUrl' class='blue'>Home</a></li> <li><a href='http://mas-arie69.blogspot.com' class='red'>Menu 1</a> <ul> <li><a href='http://mas-arie69.blogspot.com'>Sub Menu 1</a></li> <li><a href='http://mas-arie69.blogspot.com'>Sub Menu 2</a></li> <li><a href='http://mas-arie69.blogspot.com'>Sub Menu 3</a></li> <li><a href='http://mas-arie69.blogspot.com'>Sub Menu 4</a></li> <li><a href='http://mas-arie69.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-arie69.blogspot.com'>Sub Menu 1</a></li> <li><a href='http://mas-arie69.blogspot.com'>Sub Menu 2</a></li> <li><a href='http://mas-arie69.blogspot.com'>Sub Menu 3</a></li> <li><a href='http://mas-arie69.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-arie69.blogspot.com'>Sub Menu 1</a></li> <li><a href='http://mas-arie69.blogspot.com'>Sub Menu 2</a></li> <li><a href='http://mas-arie69.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-arie69.blogspot.com'>Sub Menu 1</a></li> <li><a href='http://mas-arie69.blogspot.com'>Sub Menu 2</a></li> </ul> </li> <li><a href='http://mas-arie69.blogspot.com' class='red'>Menu 5</a></li> <li><a href='http://mas-arie69.blogspot.com' class='yellow'>Menu 6</a></li> <li><a href='http://mas-arie69.blogspot.com' class='green'>Menu 7</a></li> </ul> </div>
Ganti
http://mas-arie69.blogspot.com dengan label link blog anda.
6. Setelah tersimpan silahkan lihat hasilnya.
