SEO Blogger | Google Adsense | Sejuta Trik: Menu

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

#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 :

Banyak perubahan yang dilakukan oleh Google. Tidak hanya di Blogger, Google+, dan Google Web Search pun ikut didesign ulang. Sejuta trik blogger masuk di fomumnya Google menemukan bocoran tentang Tampilan dan Design Baru Navbar Google. Bagaimana tampilan dan design baru navbar Google? Berikut ini gambarnya

Dari gambar tersebut terlihat menu navbar yang dulunya hitam memanjang sekarang menjadi menu dropdown. Menu navbar dropdown ini bisa dimunculkan hanya dengan mengklik logo Google. Jika sahabat ingin mencari layanan lain, cukup klik "More" untuk menu lain yang lebih lengkap.

Untuk menampilan dan design baru Google ini header Google juga akan didesign ulang. Boleh dikatakan menu-menu google akan dipindah di sebelah kiri. Sementara untuk akun dan setting tidak mengalami perubahan yang signifikan dan berada di sebelah kanan.

Entah kenapa navbar masih menggunakan warna hitam. Juli lalu penolakan navbar warna hitam mencapai 99%. Tapi sekarang mungkin sudah melupakan anggapan miring itu. Mungkin masih cinta kali ya? He2. Akhir kata seperti itulah tampilan dan design baru navbar google. Semoga menambah wawasan bagi yang belum mengetahuinya.

Happy Blogging! by. Sejuta Trik Blogger Thanks for reading !