Rabu, November 11, 2009

Cara Membuat Menu Bar Pada Blog

Membuat Menu Bar Pada Blog - Disini saya akan share gimana cara membuat menu bar dengan sangat mudah sudah sekali, bagi yang sudah tau sech, hehehe. Untuk membuat menu bar bisa banyak langkah yang ditempuh, cara ini merupakan cara yang menurut saya paling menu untuk dipraktekkan,
Berikut contoh tampilan menu bar yang akan ical sharing.
menu bar
indah bukan???

Pertama Kamu login ke blog, pilih blog yang ingin diedit, pilih layout, trus page element

Add Gadget Di bawah Nav Bar, kalo belum muncul add gadgetnya, ke edit html dulu, cari kode Show add element kalo terset no ubah menjadi yes. ngerti kan friend. Setelah add gadget sudah ada, pilih itu

Pilih Html/javascript
Kopi paste kode di bawah ini, edit seperlunya.ok

Ni kode Membuat Menu Bar Pada Blog
<style type="text/css">
div.TabView div.Tabs a
{
float: left;
display: block;
width: 137px; /* Lebar Kotak Tab */
height: 22px; /* Tinggi Menu Utama Atas */
text-align: center; /* Posisi Teks Menu Tab */
margin: 1px 0px 0px 1px; /* Posisi Kotak Tab */
background-color:blue; /* Warna background Kotak Tab */
padding-top: 1px; /* Spasi Atas */
border: 0px color:none; /* Warna border kotak Tab */
border-bottom: 0px color:none; /*Warna border bawah kotak tab */
font-family: "Arial, Helvetica, sans-serif", Arial; /* Font Kotak Tab */
font-weight: 900; /* Ketebalan Teks kotak tab */

}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color:red; /* Warna background utama kotak tab */ }
div.TabView div.Pages
{
clear: both;
border: 1px ,color:blue /* Warna border Kotak Konten */
overflow: unhidden;
background-color: blue; /* Warna background Kotak konten */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px; /* Jarak teks dalam kotak content */
overflow: none;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 0px 0px;
}

</style>

<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 1000px;" class="Tabs">

<a href="http://icalholic.blogspot.com/2009/05/welcome-to-my-blog-my-name-is-ical-19th.html"><span style="color: white">HOME</span></a>

<a href="http://icaldownload.blogspot.com/"><span style="color: white">DOWNLOAD</span></a>

<a href="http://id-id.facebook.com/people/Ical-Holic/1580822406"><span style="color: white">MY FACEBOOK</span></a>

<a href="http://icalholic.blogspot.com/search/label/Cara%20Mudah%20Dapat%20Uang">PROGRAM PTC</a><span style="color:white"></span>


<a href="http://www.emailmeform.com/fid.php?formid=326752">CONTACT ME</a>
<span style="color:white"></span>
</div></div></form>

Kalo sudah di paste, save dan lihat hasilnya.
Baca juga yang di bawah ini...


Sudah baca koment yach...

Artikel Terkait

Cara Membuat Menu Bar Pada Blog
4/ 5
Oleh

Berlangganan

Suka dengan artikel di atas? Silakan berlangganan gratis via email

11 komentar

02 Mei, 2010 02:53 delete

Thanks informasinya bro .. sangat membantu

Reply
avatar
17 Juni, 2011 22:26 delete

sama2 bro, hehehe, berkunjung lagi yah.....

Reply
avatar
03 Juli, 2011 00:21 delete

informasi yang perlu di coba,,,thanks gan

Reply
avatar
03 Juli, 2011 00:43 delete

makasih gan, berkat kmu, kodenya udah ical perbaiki, ada kesalahan,,, dikarenakn mainenis blogger

Reply
avatar
23 November, 2011 10:05 delete

ni yang saya cari thanks buat infonya gan.....

Reply
avatar
22 Mei, 2012 12:06 delete

kalau untuk link nya thu gimna kwan msalkan untuk menu facebook thu

Reply
avatar
28 Mei, 2012 18:29 delete

THANK'S Q BERHASIL
kunjungi blogku di http://blogsyaikhul.blogspot.com

Reply
avatar
10 Juni, 2012 15:03 delete

menu bar udah jadi, tapi kalau klik link nya gimana supaya bisa kita isi

Reply
avatar
13 Januari, 2013 14:59 delete

terima kasih sahabat,nuwun sewu nyuwun copas kodenya.semoga tetap sukses.

Reply
avatar