Membuat Hidangan Vertikal Pelangi Di Blogspot

Membuat Menu Vertikal Pelangi Di Blogspot Membuat Menu Vertikal Pelangi Di Blogspot
Membuat Menu Vertikal Pelangi Di Blogspot yaitu hidangan tegak yang biasa digunakan di blogger akan tetapi menampilkan tampilan yang berwarna-warni. Sebenarnya menciptakan hidangan pelangi di blogspot sangat gampang sekali. Yuk menciptakan hidangan pelangi di blog kita!
Sebenarnya kelebihan dari hidangan vertikal pelangi di blog ini yaitu untuk menarik pengunjung dengan warna-warna pelangi untuk menjelajahi isi blog kita. Benar bukan?
Dalam menciptakan hidangan pelangi di blogspot kita hanya membutuhkan arahan CSS dan HTML sebagai kunci utamanya. Dengan cara ini kemungkinan penggunaan gambar sebagai background untuk menciptakan hidangan juga dapat kita lakukan.
Sejuta Trik Blogger berharap blog ini tidak menyerupai kelemahan pelangi. Yaitu bentuknya elok tapi cepat menghilang. Wah jangan hingga ya! Kalau itu terjadi, saya hanya bilang TERLALU!ha ha ha. Untuk yang sudah master CSS mohon dibetulkan bila saya keliru dalam kodenya!

Baik pribadi saja kita membuatnya.

A. Pada bab EDIT HTML (Design) kita akan taruh arahan CSS di bawah ini :

Untuk CSSnya kita hanya menambahkan “request” warna untuk menjadikannya pelangi. Kodenya yaitu 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 hingga 5 yaitu hidangan 1 hingga 5
5) 

#leftnav a:hover, #leftnav a.request:hover
{
background-color: #FA5858;

dan seterusnya yaitu warna yang tampil

6)

#leftnav a.request2
{
color: #12366A;
background-color: #F5D0A9;
}

yaitu warna perubahan

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

B. Jika sudah masukkan arahan HTML di Add Widget menyerupai 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, kini sudah terperinci kan cara membuat hidangan vertikal pelangi di blogspot? Semoga trik sederhana ini membantu sahabat semua.

Demo :

Close Menu