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

40 Kumpulan pantun yang berkaitan dengan hujan, tentang hujan, dengan kata hujanm hujan turun, akhirnya hujan turun, penantian hujan, bahagia hujan. gerimis, grimis

40 Kumpulan pantun yang berkaitan dengan hujan, tentang hujan, dengan kata hujanm hujan turun, akhirnya hujan turun, penantian hujan, bahagia hujan. gerimis, grimis Bunga mekar di musim semi, Bunga putih bernama melati. Bila hujan turun ke bumi, ada segaris rindu dalam hati. Kembang sepatu kembang selasih, Jatuh ke sungai airnya keruh. Rinduku kepada sang kekasih, yang kini sedang merantau jauh. Ikan betik ada di kali, ikan gabus tidak berduri. Hujan turun deras sekali, kedinginan duduk sendiri. Jalan-jalan ke Ciamis, jangan lupa membeli petis. Kalau turun hujan gerimis, kangen kamu yang romantis. Di pantai banyak para nelayan, sedang menjaring ikan tongkol. Dingin begini enaknya makan, makan mie instan ditambah jengkol Siang hari pergi ke kebun Di kebun menanam jagung Sekarang ini musim hujan Jangan lupa membawa payung Bersembunyi dibawah pohon Di atas pohon melihat monyet Jangan bermain dibawah air hujan Kalau tidak mau badanmu sakit Habis mandi...