Showing posts with label Menu. Show all posts
Showing posts with label Menu. Show all posts

Sunday, December 22, 2013

Cara Membuat Menu Horizontal di Blog

Bagi anda yang ingin mempercantik tampilan blog, salah satunya menambahkan menu horizontal/menu mendatar.pastinya blog anda belum lengkap tanpa menu. langsung saja saya bagikan buat sobat pecinta blogger semua.
berikut langkah langkah nya :
1.login dulu di blogger anda
2.klik rancangan/template lalu klik edit html
3.setelah itu anda klik lanjutkan kemudian centrang widget
4.cari ]]></b:skin>. untuk lebih mudah pencarian tekan ctrl + f
5.copy pastekan kode di bawah ini tepat di atas ]]></b:skin>

/* Navigasi tabs http://
www.gochiochio.com/ Starts */
a.burastabs, a.burastabs:link, a.burastabs:visited {display:block; width:102px; height:30px; background:#444444; border:1px solid #ebebeb; margin-top:2px; text-align:center; text-decoration:none; font-family:arial, sans-serif; font-size:12px; font-weight:bold;color:#FFFFFF; line-height:25px; overflow:hidden; float:left;}
a.burastabs:hover {color:#FFFFFF; background:#666666;}
#burasbar {width:auto; margin:0 auto;}
/* Navigasi tabs http://
www.gochiochio.com/ Ends */
6.lalu klik save template
7.sekarang masuk kita ke tata letak/page elements
8.klik add gadget/tambah gadget.nanti akan muncul jendela baru dan kita cari/tambah kan HTML/javascript
9.lalu copy pastekan kode di bawah ini

<!-- Navigasi tabs http://www.gochiochio.com/ Starts -->
<div id='burasbar'>
<a href="#" class="burastabs">Home</a>
<a href="#" class="burastabs">About</a>
<a href="#" class="burastabs">Blog Tips</a>
<a href="#" class="burastabs">SEO Tips</a>
<a href="#" class="burastabs">Contact</a>
<a href="#" class="burastabs">Sitemap</a>
<a href="#" class="burastabs">Advertise</a>
</div>
<!-- Navigasi tabs http://
www.gochiochio.com/ Ends -->
10.save


Catatan : tanda # yg berwarna merah untuk anda edit sesuai dengan link yang anda.
dan tanda yang berwarna Biru edit sesuai menu selera anda....
Related Posts Plugin for WordPress, Blogger...