Loading...

Cara Menu Bar Keren Untuk Bloger

Halo semua,, setelah sebelumnya bangiz berbagi foto sampul juga pernah membahas cara membuat menu bar horizontal dengan CSS lihat disini untuk membacanya. Untuk kali ini akan berbagi lagi tentang blogging. Adapun yang akan dibahas kali ini yaitu tentang Cara membuat menu bar yang keren. 

Jika tertarik bagaimana cara membuat menu bar atau menu horizontal dengan efek hover keren, silahkan ikuti caranya berikut ini:
menu bar keren
Menu bar keren
1. Masuk dasbor blogger > Template > Edit HTML.

2. Cari kode ]]></b:skin>

3. Kalau sudah ketemu, tinggal copy-paste saja kode berikut tepat sebelum / diatas kode tadi.
#menu1 ul {    list-style:none;    font-family: Oswald, Georgia, serif;    font-size: 20px;    font-style: italic;    font-weight: normal;    letter-spacing: normal;    line-height: 0.8em;    border:2px solid #000;    border-left:none;    float:left;    clear:both;    margin:10px;}#menu1 ul li{    float:left;}#menu1 ul li a{    display:block;    text-decoration:none;    background-color:#444;    padding:5px 5px;    color:#fff;    width:140px;    border-right:1px solid #666;    border-left:1px solid #000;}#menu1 ul li a span{    display:block;}#menu1 ul li a span.title{    border-bottom:1px solid #444;}#menu1 ul li a:hover span.title{    border-bottom:1px dashed #f0f0f0;    color:#ef0000;}#menu1 ul li a span.text{    visibility:hidden;    font-size:12px;    text-align:right;}#menu1 ul li a:hover span.text{    visibility:visible;}
4. Save template. Untuk merubah warna Anda bisa lihat disini atau disini

5. Selanjutnya tambahkan HTML/Javascript. Dari Tata Letak > Tambahkan Gadget > cari Tambahkan HTML/Javascript.
<div id="menu1"> <ul> <li><a href="#"> <span class="title">About</span> <span class="text">Who we are</span> </a> </li> <li><a href="#"> <span class="title">Blog</span> <span class="text">What we talk about</span> </a> </li> <li><a href="#"> <span class="title">Facebook</span> <span class="text">Join us</span>                    </a> </li> <li><a href="#"> <span class="title">Twitter</span> <span class="text">Follow us</span> </a> </li><li><a href="#"> <span class="title">Google+</span> <span class="text">Add us</span>
Note:
  • Silahkan ganti tulisan merah dengan kata-kata yang Anda inginkan
  • Ganti # dengan alamat URL
5. Simpan dan lihat hasilnya.

Untuk hasilnya Anda bisa lihat gambar di bawah:
menu bar keren
Normal dan hover

/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 Menu Bar Keren Untuk Bloger
Cara Menu Bar Keren Untuk Bloger
Cara membuat menu bar keren untuk blog. Bikin menu bar unik dan bagus sekali, menu bar blog keren, Tombol menubar untuk blogger, membuat menu bar yang bagus banget untuk blog, menu bar dengan efek hover keren
https://3.bp.blogspot.com/-k-Tsh-EFKRc/UekQacIvdxI/AAAAAAAAGZY/fkiBSWKNbFg/s320/menubar.jpg
https://3.bp.blogspot.com/-k-Tsh-EFKRc/UekQacIvdxI/AAAAAAAAGZY/fkiBSWKNbFg/s72-c/menubar.jpg
Bangiz
https://bangiz.blogspot.com/2013/07/Menubar-Keren.html
https://bangiz.blogspot.com/
https://bangiz.blogspot.com/
https://bangiz.blogspot.com/2013/07/Menubar-Keren.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