Skip to main content

Membuat Menu Vertikal Pelangi Di Blogspot

menu pelangi
Membuat Menu Vertikal Pelangi Di Blogspot adalah menu tegak yang biasa dipakai di blogger akan tetapi menampilkan tampilan yang berwarna-warni. Sebenarnya membuat menu pelangi di blogspot sangat mudah sekali. Yuk membuat menu pelangi di blog kita!

Sebenarnya kelebihan dari menu vertikal pelangi di blog ini adalah untuk menarik pengunjung dengan warna-warna pelangi untuk menjelajahi isi blog kita. Benar bukan?

Dalam membuat menu pelangi di blogspot kita hanya membutuhkan kode CSS dan HTML sebagai kunci utamanya. Dengan cara ini kemungkinan penggunaan gambar sebagai background untuk membuat menu juga bisa kita lakukan.

Sejuta Trik Blogger berharap blog ini tidak seperti kelemahan pelangi. Yaitu bentuknya cantik tapi cepat menghilang. Wah jangan sampai ya! Kalau itu terjadi, saya hanya bilang TERLALU!ha ha ha. Untuk yang sudah master CSS mohon dibetulkan jika saya keliru dalam kodenya!

Baik langsung saja kita membuatnya.
A. Pada bagian EDIT HTML (Design) kita akan taruh kode CSS di bawah ini :
Untuk CSSnya kita hanya menambahkan "request" warna untuk menjadikannya pelangi. Kodenya adalah sebagai berikut:

#leftnav {
width: 200px;
position: relative;
margin-left: 5px;
margin-top: 20px;
float: left;
margin-right: 5px;
margin-bottom: 5px;
}
#leftnav ul
{
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
}

#leftnav a
{
display: block;
padding: 3px;
width: 160px;
background-color: #12366A;
border-bottom: 1px solid #eee;
}

#leftnav a:link, #navlist a:visited
{
color: #EEE;
text-decoration: none;
}

#leftnav a:hover, #leftnav a.request:hover
{
background-color: #FA5858;
color: #000;
}
#leftnav a.request
{
color: #12366A;
background-color: #F5A9A9;
}






#leftnav a:hover, #leftnav a.request2:hover
{
background-color: #FE9A2E;
color: #000;
}
#leftnav a.request2
{
color: #12366A;
background-color: #F5D0A9;
}







#leftnav a:hover, #leftnav a.request3:hover
{
background-color: #F4FA58;
color: #000;
}
#leftnav a.request3
{
color: #12366A;
background-color: #F3F781;
}






#leftnav a:hover, #leftnav a.request4:hover
{
background-color: #ACFA58;
color: #000;
}
#leftnav a.request4
{
color: #12366A;
background-color: #ACFA58;
}





#leftnav a:hover, #leftnav a.request5:hover
{
background-color: #58FA58;
color: #000;
}
#leftnav a.request5
{
color: #12366A;
background-color: #A9F5A9;
}

Keterangan :
1) background-color: #12366A;  (Warna Kepala Menu)
2) width: 200px; (Lebar kotak)
3) font-family: Arial, Helvetica, sans-serif; : (Jenis Huruf)
4) 1 sampai 5 adalah menu 1 sampai 5
5) 
#leftnav a:hover, #leftnav a.request:hover
{
background-color: #FA5858;
dan seterusnya adalah warna yang tampil
6)
#leftnav a.request2
{
color: #12366A;
background-color: #F5D0A9;
}


adalah warna perubahan
7) Selanjutnya edit sendiri ya? Jika butuh kode warna silakan kunjungi KODE WARNA HTML. Atau jika menemukan kode dan tidak tahu warnanya silakan gunakan tool PARSE KODE WARNA. Tinggal masukkan kodenya kemudian enter!
8) Paste kode di atas di atas ]]></b:skin>
9) Warna hover paling akhir mempengaruhi perubahan pada kepala menu vertikal tersebut. Jadi apabila warna perubahan atau hover paling akhir berwarna hijau, maka kepala menu vertikal akan berubah hijau pula.
10) Untuk menambah link silakan tambah ke request 6, dan seterusnya.

B. Jika sudah masukkan kode HTML di Add Widget seperti biasa
<div id="leftnav">
<ul id="navlist">
<li id="active"><a href="http://www.unitcoins.us/" id="current">Home</a></li>
<li><a class="request" href="http://www.unitcoins.us/quote.shtml">Request a Quote</a></li>
<li><a class="request2" href="http://www.unitcoins.us/quote.shtml">Request a Quote</a></li>
<li><a class="request3" href="http://www.unitcoins.us/quote.shtml">Request a Quote</a></li>
<li><a class="request4" href="http://www.unitcoins.us/quote.shtml">Request a Quote</a></li>
<li><a class="request5" href="http://www.unitcoins.us/quote.shtml">Request a Quote</a></li>
</ul>
</div>
Happy Blogging! by. Sejuta Trik Blogger

Nah, sekarang sudah jelas kan cara membuat menu vertikal pelangi di blogspot? Semoga trik sederhana ini membantu sahabat semua.
Demo :

Popular posts from this blog

Profile Biodata Foto Renie Arumsari

Biodata Renie Arumsari Nama Lengkap : Agustina Renie Arum Sari Nama Lain : Renie Arumsari Asal : Yogyakarta Kebangsaan : Indonesia Pekerjaan : Aktris, Model, MC Twitter : https://twitter.com/rerenie Instagram : https://www.instagram.com/renieas Prestasi Renie Arumsari Putri Pariwisata Indonesia DIY 2017 Putri Pariwisata Indonesia Best National Costume Putri Pariwisata Indonesia Putri Bunga Miss Tea Indonesia 2017 Miss Jogjatronik Sahabat Larissa Puteri Bandara 2013 Duta Bandara Adisutjipto Sinetron Renie Arumsari 2018 – Orang Ketiga, sebagai Kartika – SCTV Sitkom : 2015 – Kos-kosan Jogja, sebagai Gendhis View this post on Instagram A post shared by Renie Arumsari (@renieas) on Jun 21, 2019 at 10:03pm PDT View this post on Instagram A post shared by Renie Arumsari (@renieas) on May 30, 2019 at 2:47am PDT ...

Pemain Asisten Cantik Naik Pangkat

@OfficialRCTI Asisten Cantik Naik Pangkat adalah FTV yang tayang di RCTI. Berikut ini adalah Pemain Asisten Cantik Naik Pangkat Layar Drama RCTI Pemain Asisten Cantik Naik Pangkat loading... Syifa Hadju View this post on Instagram A post shared by Syifa Hadju (@syifahadjureal) on May 12, 2019 at 1:47am PDT Rizky Alatas View this post on Instagram A post shared by Rizky Alatas (@rizkyalatas) on Jul 24, 2019 at 1:18am PDT Kevin Ardilova loading... View this post on Instagram Eyes, They never lie. A post shared by Kevin Ichwal Ardilova (@kevinardillova) on Jul 22, 2019 at 4:57am PDT Alfath Rivansyah Dieno Ramli Savira Kaunang Havida loading...

Profil Biodata dan Foto Sattaphong Phiangphor

Sattaphong Phiangphor atau juga dikenal dengan nama Tao Phiangphor adalah aktor, model dan penyanyi Thailand yang lahir di Kalasin, Thailand, 3 Mei 1990. Pria ganteng yang akrab disapa dengan nama Tao ini memulai karir di industri Entertainment Thailand melalui ajang menyanyi Academia Fantasy Thailand Season 8 di tahun 2011. Tao Phiangphor lalu mulai menginjakkan kaki di dunia akting tahun 2012 dengan menjalani debut akting di serial drama Coffe Prince yang diadaptasi dari drama Korea, serta debut di film melalui film berjudul Super Salaryman di tahun yang sama. Namanya pun mulai dikenal ketika sering membintangi drama seperti drama Sandy, Room Alone, Kiss, Kiss Me The Series dan lainnya. Nama dan wajah tampan Sattaphong Phiangphor lalu semakin dikenal dan melejit setelah ia memerankan pangeran Inn di serial Drama adaptasi dari Korea berjudul P rincess Hours yang ia bintangi bersama Ungsumalynn Sirapatsakmetha di tahun 2017. Baca : Profil Biodata dan Foto Ungsumalynn Sirapatsakmeth...