Loading...

Cara Membuat Menu Bar Vertikal Keren

Berikut ini Bangiz akan berbagi tentang widget menu bar yang tempilannya vertikal. Untuk kali ini dengan menggunakan kode CSS jadi Anda tidak perlu mengedit HTML. Oke langsung saja jika Anda tertarik untuk membuatnya langsung ikuti saja langkah-langkahnya berikut ini:
Vertikal Bar
Menu bar vertikal
Anda hanya perlu menambahkan kode berikut ini:

Jika Anda belum tahu cara menambahkannya kode HTML/Javascript, silahkan baca dulu di sini.
<style>/*------Vertical navigation menu bar from bangiz.blogspot.com---------*/#nav-vr01 {list-style:none;margin:0;padding:0;}#nav-vr01 li {margin:0;padding:0;}#nav-vr01 li a:link,#nav-vr01 li a:visited {display:block;font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;width:180px;text-transform:capitalize;text-decoration:none;font-weight:bold;padding:6px 6px 6px 40px;color:#111111;background:#EBEBEE;border-bottom:1px dotted white;}#nav-vr01 li a:hover {border:1px solid rgba(81,81,84,0.58);-khtml-border-top-right-radius:5px;-webkit-border-top-right-radius:5px;border-top-right-radius:5px;border-bottom-right-radius:5px;-moz-box-shadow:0px 0pz 3px 0px #EFEEF4;-webkit-box-shadow:0px 0pz 3px 0px #EFEEF4;box-shadow:0px 0px 3px 0px #EFEEF4;color:#48A2AE;background:#AFAFB8;-moz-transition:all .3s cubic-bezier 0.05s;-webkit-transition:all .3s cubic-bezier 0.05s;-o-transition:all .3s cubic-bezier 0.05s;transition:all .3s cubic-bezier 0.05s;}#nav-vr01 li a:active {color:#4848AE;background:#AEAEB0;text-decoration:none;-moz-transition:all .2s linear;-webkit-transition:all .2s linear;-o-transition:all .2s linear;transition:all .2s linear;}</style><ul id="nav-vr01"><li><a href="#" title="#title1">Home</a></li><li><a href="#" title="#title2">Facebook</a></li><li><a href="#" title="#title3">Twitter</a></li><li><a href="#" title="#title4">Google+</a></li><li><a href="#" title="#title5">About</a></li><li><a href="#" title="#title6">Contact</a></li><li><a href="#" title="#title7">FAQ</a></li></ul>
Keterangan:
> Ganti tanda # dengan alamat URL Anda.
> Ganti judul yang berwarna biru dengan yang Anda inginkan.
> Untuk mendapat warna yang cocok silahkan lihat kode warna CSS atau HTML.
> width:180px; untuk mengatur lebar supaya sesuai dengan template yang Anda miliki.

/fa-thumbs-up/ RELATED$type=list-tab$hide=home

Name

Android,5,Blogging,108,CorelDRAW,14,Desain Grafis,24,Facebook,22,Foto Sampul,34,Gambar,54,Info,18,Internet,31,Kata Mutiara,26,Kesehatan,31,Komputer,25,Microsoft Word,12,Office,12,PhotoScape,10,Resep,6,SEO,10,Sosial media,21,Tutorial,36,Wallpaper,20,
ltr
item
Bangiz: Cara Membuat Menu Bar Vertikal Keren
Cara Membuat Menu Bar Vertikal Keren
Cara membuat menu bar vertikal keren, Menu vertikal bar blogger keren, bikin Vertical bar dengan css, menu bar unik dan menarik untuk blog-blogger-blogspot,
https://3.bp.blogspot.com/-ErL47-mnmYw/Uanwj9PZpII/AAAAAAAAFTg/LLqEdy9BXWQ/s1600/menu.jpg
https://3.bp.blogspot.com/-ErL47-mnmYw/Uanwj9PZpII/AAAAAAAAFTg/LLqEdy9BXWQ/s72-c/menu.jpg
Bangiz
https://bangiz.blogspot.com/2013/06/Menu-Vertikal.html
https://bangiz.blogspot.com/
https://bangiz.blogspot.com/
https://bangiz.blogspot.com/2013/06/Menu-Vertikal.html
true
5131493432912556385
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 CONTENT IS PREMIUM Please share to unlock 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