Tutorial Blog Mas Andes Official - Tips Blogging | Trik Blogger | Tutorial Blogger | Widget Blogger | Blog Design | Taktik SEO (Search Engine Optimization)

Cara Membuat Navigasi Menu Full Color di Blog

Navigasi Menu Metro UI Blogger 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.
.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.


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!

Berlangganan artikel via email

71 Response to "Cara Membuat Navigasi Menu Full Color di Blog"

membuat blog lebih berwarna ya mas :)

Balas

mununya keren nih mas Andes kaya pelangi berwarna-warni hehe :)

Balas

kombinasi beberapa warna kayaknya lebih keren juga mas

Balas

silakan bang Ancis, diseruput menu plus kodenya :D sarapan pagi ya mas Andes, dikasih kode banyak gini langsung kenyang :D

Balas

wew kereen sekali mas. kyk windows 8 bnyk warnanya. Ntar kpn2 saya cb y?

Balas

Pokok nya mantaap sekali mas andes...

Balas

keren sob, bikin blog fullcolor tapi klo dipasang diblog ane gk cocok, hehe

Balas

kalau navigasi menu full color bisa membuat hidup kita full color juga ga ya *galau hehe...

kayanya agak kurang cocok ya mas kalau di pasang di blog WS

Balas

keren, warna menunya
sangat cerah

Balas

Mantap mas .. jadi hidup makin hidup hehe

Balas

Pasti tambah keren ya mas kalau menu navigasi blog bisa warna warni. Jadi bisa lebih trlihat elegance dan cute :)

Balas

pasti tambah ceeria ya mas blog nya, bisa kayak pelangi mkasih mas tas share nya

Balas

blognya udah di buat kang, tinggal membuat menu :)

Balas

apalagi kalo liat duit ya mas, pasti lebih warna warni lagi :) hehehe

Balas

suka yang keren2 apa yang cantik2 aja mas :) hehehe

Balas

hehe lumayan juga mas buat sarapan

Balas

boleh dipasang kok di blog mbak ririn :D

Balas

mantap mas, warnanya fantastis. :-d

Balas

ga keren2 amat mas.. hehe
iya silahkan, semoga bermanfaat mas

Balas

ga mantap2 amat mas.. hehe

Balas

iya mungkin kang WS abis belom jodoh jadinya kurang cocok :) hehe

Balas

waduh kalo itu kayak kampanye kang :) hehe

Balas

mbak ririn paling suka kalo soal elegance elegance :) hehe

Balas

iya mas lebih ceria, kayak kalo ambil gaji itu sihh.. hehehe

Balas

tapi ga romantis kan mas :) hehehe

Balas

kalau liat duit jadinya ijo mas hehe...

Balas

engga sih mas cuma ekonomis doank hehe...

Balas

iya mas Andes, mbak Ririn paling suka sama elegance dan semangka hehe...

Balas

Mantap sob tampilan menunya,
warnanya padu,
izin simak dulu lebih dalam lagi.

Balas

Full Colorr Kerennn haha Blog serasa Hidup :D
Nice Info dah gan ^_^

Balas

wah blognya menjadi lebih berwarna ya mas... fullcolor banget ... makasih mas atas tutornya.. ijin save dulu...

Balas

mantap mas, warna-warni kaya pelangi......

Balas

Kalo menurut sy..malah keliat lebih dinamit sama ceria ya mas :)

Balas

Eya lagh....buru2 keserimpet nulisnya...
Dinamis maksude mas..hehe :)

Balas

Ijo royo royo... :)

Balas

Seratus buat mas Anthonie hehe :)

Balas

menunya keren nih mas Andes kaya pelangi berwarna-warni hehe :)
jangan lupa kunjungan baliknya mas

Balas

kapan nih mau share template :| .

Balas

kalo share saya belom kepikiran miz.. tapi saya ada saran, kayaknya blog kamu cocok kalo pake template magazine. templatenya bisa lihat di blog mas alex
http://joens-tutorial.blogspot.com/2013/10/high-quality-premium-blogger-template.html

Balas

Mampir diblog baru ane ya sob http://onspe.blogspot.com/2013/10/about-me.html

Balas

Nylekutis juga ya mas hehe :)

Balas

Seratus untuk semuanya. Biar adil mas hehe :)

Balas

kayak nano-nano ya mas hehe :)

Balas

Kalau membuat blog lagi capek kang ngurus nya hehe :)

Balas

hati-hati mas bud, ntar meledak lho hehe :)

Balas

klu sya mah dua2nya mas ya keren ya cantik hehehehe

Balas

sayang bang ancis nya belum muncul lagi ke sini :D

Balas

jangan diurus sendiri mbak biar nggak capek :)

Balas

Bisa membuat blog lebih rame nih mas :D keren keren.

#Salam kenal

Balas

mantabbb, keren tambah cantikkk blognyaaa

Balas

Koment disini aja akh biar keliatan....

Wah wah.. terima kasih sudah dibuatin tutorialnya... maaf kalo hampir 2 mingguan ga buka blogger.com jadinya ga maen ke sini... sepertinya tutorial dan hasil yg di atas sesuai dengan keinginan saya... nanti saya coba dulu di blog abal2 saya, kalo sukses baru dihajarrrrr di blog pribadi.... sekali lagi terima kasih ya Mas Andes....

Balas

Koment di sini lagi biar afdol... hahahaha...

Wah wah.. terima kasih sudah dibuatin tutorialnya... maaf kalo hampir 2 mingguan ga buka blogger.com jadinya ga maen ke sini... sepertinya tutorial dan hasil yg di atas sesuai dengan keinginan saya... nanti saya coba dulu di blog abal2 saya, kalo sukses baru dihajarrrrr di blog pribadi.... sekali lagi terima kasih ya Mas Andes....

Balas

Hahahaha,,, maap baru mampir... seminggu lebih ga buka blogger... sudah saya sedot tuh code2nya... tp baru sekedar njajal di blog abal2

Balas

sudah saya terapkan di blog saya :) mohon di periksa :)

Balas

Menu nya jadi ramai dengan warna dan warni
perlu di coba, kebetulan di blog saya lagi butuh peyumbang Warna
langsung ancrub deh saya praktek yah Mas Andes..

Balas

sore mas
aku mau tanya terus gimana cara saya nulis di menu2 tersebut, klo di klik menu2-y bisa langsung baca

Balas

ganti http://mas-andes.blogspot.com dengan URL halaman artikelnya mas

Balas

mantap mas menunya. simple, tapi menarik. :D

Balas

mas Andes yth, knp ya sub menu nya tidak tampil hanya menu utama saja..

Balas

ijin yimak mas sambil nerapkan salam kenal

Balas

Supaya bisa rata tengah gimana ya masbro?

>>----Menu1-Menu2-Menu3----<<

Balas

Bg. dlm pembuatan template. Apa yg pertama di lakukan, ?? Mohon memberikan langka-langkah dlm pembuatan template blogger. , .??

Balas

Sangat bermanfaat mas ilmu nya, terimakasih mas..

Balas

mantap oi.... lebih hidup jadinya....

Balas

Info yang bermanfaat gan, boleh dicoba nih .

kunjungi juga
http://satores.blogspot.com

Balas

ini... INI,,
ini baru blog yang berkualitasss TINGGIII....

waaahhhh.... 5 hari, 5 malam saya belajar gan.. dengan blog2 yang lain namun tiada hasil,bahkan kepala makin puyel..sampai rokok habis 7 bungkus..hehehe.. "curhat dikit"
setelah dapat yang satu ini saya langsung sukses dalam mempraktekkannya.
MAKASI YEAH GAN... kami tunggu Karya2 SUPER yang selanjudnya.......

SAlam Kreatiff....

Balas

mantap buat diterapkan diblog.

Balas
  • Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
  • Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
  • Apabila artikel yang berjudul "Cara Membuat Navigasi Menu Full Color di Blog" ini bermanfaat, share ke jejaring sosial.
Konversi Kode