Cara Buat Menu bar Keren Di Blogspot - semua halaman
blog di lihat dengan mudah oleh pengunjung dan salah satu cara dari kian
banyak cara jika anda ingin blog agan tampil lebih menarik.
Kali ini saya akan mencoba berbagi tips tentang cara membuat menu bar di
blogspot dengan mudah yang hanya di butuhkan sedikit keahlian dalam
mengedit HTML. Sebelum kita melanjutkan tutorial tentang cara membuat
menu bar di blogspot, terlebih dahulu silahkan lihatlah gambar di bawah
ini yang menampilkan hasil akhir dari menu bar di blogspot. ini adalah screenshotnya:
berikut caranya:
1. Login ke akun Blogger sobat
5. Letakan kode di bawah tepat di atas kode ]]></b:skin>
berikut caranya:
1. Login ke akun Blogger sobat
2. Sekarang Klik Template
3. Klik EDIT HTML
4. Sekarang Cari Kode ]]></b:skin> agar mudah dalam pencarian tekan Ctrl+f
5. Letakan kode di bawah tepat di atas kode ]]></b:skin>
/* Menu Horisontal
---------------------------------------------*/
.menupic{width:100%;margin:0 auto;padding:0 auto;}
.menuhorisontal{background:#e9e9e9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibsvYRuaqMP5xNpAGMjQHwkLSaBo-xhWz2jBpuwXwbLNpAj2pAxAKokoMYWFxoMmlRVE4B5k1Rj96gqN3GRVlTIhOpZNCaEW63kF9KrB6y0AgHJ-dVqebV53EvSWbsY-QbwF2wLwLRMkI/s1600/bg_menu.gif) repeat-x bottom left;width:980px;height:30px;margin:0 auto; padding:0 auto;border-left:1px solid $bordercolor;border-right:1px solid $bordercolor;border-top:solid 1px $bordercolor;}
.menuhorisontal ul{margin: 0; padding-left: 0px;color:#357798;text-transform: capitalize;list-style-type: none;font:bold 12px Arial, Helvetica,Arial,Verdana,sans-serif;}
.menuhorisontal li{display: inline; margin: 0;}
.menuhorisontal li a{float: left;display: block;text-decoration:none;
padding:7px 7px 7px 7px;border-right:1px solid #dadcde;border-bottom:solid 1px #d2d4d6;color:#357798;}
.menuhorisontal li a:visited{color:#357798;}
.menuhorisontal li a:hover {background:#fff;color:#333;text-decoration:none;border-bottom:solid 1px #fff; /*Background Setelah Pointer Diarahkan */}
.menuhorisontal li.selected a {background:#fff;color:#333;border-bottom:solid 1px #fff;padding:7px 10px 7px 10px;}
6. Sekarang Cari Kode <!-- /header-wrapper --> lalu letakan kode di bawah tepat di bawahnya
<div class='menupic'> <div class='menuhorisontal'> <ul> <li><a href='http://henry-multimedia-informasi.blogspot.com/'>HOME</a></li> <li><a href='#'>About Us</a></li> <li><a href='#'>Contact Us</a></li> </ul> </div> </div>Perhatian!
Jika Kode <!-- /header-wrapper --> tidak ketemu carilah kode yang mirip atau memiliki kesamaan, <!-- /header-wrapper --> biasanya terletak di bawah tag <body>
Jika Sebelumnya Template anda telah memiliki kode menu, hapus saja lalu ganti dengan kode diatas
Langkah-langkah di atas sudah saya coba sendiri dan berhasil. Bila dalam prosesnya anda mengalami kegagalan, mungkin itu dikarenakan ada hal di atas yang anda lewatkan. Demikian update saya kali ini mengenai Cara Buat Menu bar Keren Di Blogspot. Semoga bermanfaat !
0 komentar :