Wednesday, May 7, 2014

Cara Buat Menu bar Keren Di Blogspot

By La Alami at 10:10 PM Tips dan Trik Blog No comments

Cara Buat Menu bar Keren Di Blogspot

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

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/AVvXsEi0D3YY0xv4pjJLHVJZlLUxxE4RdPZY3h7kZabyLAAeUye9e_-_FAXTGqNzct_izBZhswlc4LkXy_Ll-rDepgBw3gnY0rApyBQuGcgR-He7oWSFwarWA4t0QlNxR8O2SSuhp7gMRIza6eY/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  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  tidak ketemu carilah kode yang mirip atau memiliki kesamaan,  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 !

Blog Sederhana

Wednesday, May 7, 2014