Membuat Menu Vertikal Pelangi Di Blogspot

Membuat Menu Vertikal Pelangi Di Blogspot adalah menu tegak yang biasa dipakai di blogger akan tetapi menampilkan tampilan yang berwarna-wa...

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 :

Name

About US,1,activate,1,ADDMEFAST,1,AdLinkFly,1,Adsense,2,ANALISA WEB,1,android,1,Artikel,11,Backlink,5,Backlinks,18,Backup,1,Best 140+ Do-follow Web 2.0,1,Best 59+ Free Ping Submission Sites For Faster Indexing,1,Best High DA Dofollow Blog Commenting,1,BIN,1,Blog,2,Blog Design,2,Blogger,1,Bounce Rate,1,CDN,1,Copy Artikel,1,cPanel,1,crack,2,Desain,1,DIGITAL MARKETING,1,Disposable E-mail Free,1,domain,1,DropMyLink,1,Dunia Kampus,1,EDU BACKLINKS,5,Express Vpn Premium Account,1,FAQ SCHEME PAGE,1,followers tool,1,Footer,1,free,1,Free Image Submission Sites,1,Free Profile Creations Sites List 2020-2021,1,Free Video Submission Sites List 2020-2021,1,Gmail,1,Google,3,GOOGLE ADS,1,Google Adsense,1,GOOGLE ANALYTICS,1,google drive,2,Google My Business Customer Reviews,1,GOOGLE SEARCH ENGINE,1,GoogleNews,1,Header,3,High Authority Blog Submission Sites List,1,High DA/PA PPT Submission Sites List 2020-2021 for SEO,1,hosting,1,Hotstar Premium,1,How To,1,How to Activate,3,HTML,5,IDM,1,Info Blog,11,Info Google,13,Inspirasi,5,Instagram,2,Instagram Likes,1,Jejaring Sosial,12,JNews,1,JSON-LD,1,Kapita Selekta,3,Komentar,8,Kurikulum 2013,2,Label,3,Link,14,Lynda.com,1,MENINGKATKAN SEO WORDPRESS,1,Menu,2,MICRODATA SEO,1,MyThemeShop,1,Netflix Accounts,1,News,38,newsmag,1,newspaper,1,Noor theme,1,Nord Vpn Premium Account In April 2020,1,NORD VPN PREMIUM ACCOUNTS,1,On Page SEO,8,online shop,1,Opini,10,Page Speed,1,Pagerank,8,PDF Submission,3,PDF Submission Sites,1,Pembelajaran,4,Pixelyoursite,1,plugin,1,plugins,2,post views,1,Posting,10,Privacy Policy,1,Produk,1,PVANISH PREMIUM ACCOUNT,1,RSS,1,RSS Feed Submission Sites List 2020-2021,1,Schema,1,Search Engine,4,SEARCH QUALITY RATERS,1,Secret Hacks,1,SEF,8,seo,93,SEO WORDPRESS,1,Settings,1,Shopping,1,Shortcode,1,Sidebar,2,Spotify,1,Spotify Premium Accounts,1,tagdiv,1,Template,9,themes,2,Tips,2,Tips & Tricks,3,TIPS DAN TRIK,2,Tokoh,1,Tools,10,Tricks,9,Trik,1,Web 2.O Sites List 2020,1,Web Hosting,2,Webmaster Tools,5,Website,3,Widget,10,wordpress,13,WORDPRESS & WOOCOMMERCE TUTORIALS,1,WP Rocket,1,youtube,1,
ltr
item
Trik.My.ID - Trik dan Tips Untuk Semuanya: Membuat Menu Vertikal Pelangi Di Blogspot
Membuat Menu Vertikal Pelangi Di Blogspot
http://3.bp.blogspot.com/-9ITTrQe5HHY/TvQZMNT49uI/AAAAAAAAA6Q/V_41FnwKU4E/s1600/Menu+Pelangi.gif
http://3.bp.blogspot.com/-9ITTrQe5HHY/TvQZMNT49uI/AAAAAAAAA6Q/V_41FnwKU4E/s72-c/Menu+Pelangi.gif
Trik.My.ID - Trik dan Tips Untuk Semuanya
https://www.trik.my.id/2011/12/membuat-menu-vertikal-pelangi-di.html
https://www.trik.my.id/
https://www.trik.my.id/
https://www.trik.my.id/2011/12/membuat-menu-vertikal-pelangi-di.html
true
3610684226484108978
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy Table of Content