Membuat Menu Vertikal Pelangi Di Blogspot ialah sajian tegak yg biasa digunakan di blogger akan tetapi menampilkan tampilan yg berwarna-warni. Sebenarnya mem.buat sajian pelangi di blogspot sangat gampang sekali. Yuk mem.buat sajian pelangi di blog kita!
Sebenarnya kelebihan dari sajian vertikal pelangi di blog ini ialah untuk menarik pengunjung dengan warna-warna pelangi untuk menjelajahi isi blog kita. Benar bukan?
Dalam mem.buat sajian pelangi di blogspot kita hanya membutuhkan instruksi CSS dan HTML sebagai kunci utamanya. Dengan tips ini kemungkinan penggunaan gambar sebagai background untuk mem.buat sajian juga bis,a kita lsayakan.
Sejuta Trik Blogger berharap blog ini tidak ibarat kelemahan pelangi. Yaitu bentuknya bagus tapi cepat menghilang. Wah jangan hingga ya! Kalau itu terjadi, aku hanya bilang TERLALU!ha ha ha. Untuk yg sudah master CSS mohon dibetulkan kalau aku keliru dalam kodenya!
Baik eksklusif saja kita mem.buatnya.
A. Pada bab EDIT HTML (Design) kita akan taruh instruksi CSS di bawah ini :
Untuk CSSnya kita hanya menambahkan "request" warna untuk menjadikannya pelangi. Kodenya ialah 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 ialah sajian 1 hingga 5
5)
#leftnav a:hover, #leftnav a.request:hover
{
background-color: #FA5858;
dan seterusnya ialah warna yg tampil6)
#leftnav a.request2
{
color: #12366A;
background-color: #F5D0A9;
}
ialah warna perukomponen
7) Selanjutnya edit sendiri ya? Jika butuh instruksi warna silakan kunjungi KODE WARNA HTML. Atau kalau menemukan instruksi dan tidak tahu warnanya silakan gunakan tool PARSE KODE WARNA. Tinggal masukkan kodenya lalu enter!
8) Paste instruksi di atas di atas ]]></b:skin>
9) Warna hover paling final menghipnotis perukomponen pada kepala sajian vertikal tersebut. Kaprikornus apabila warna perukomponen atau hover paling final berwarna hijau, maka kepala sajian vertikal akan berubah hijau pula.
10) Untuk menambah link silakan tambah ke request 6, dan seterusnya.
B. Jika sudah masukkan instruksi HTML di Add Widget ibarat 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 terang kan tips mem.buat sajian vertikal pelangi di blogspot? Semoga trik sederhana ini membantu sobat semua.
Demo :
