Disini saya akan share gimana sech 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,
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 kodenya
<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 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 a href="http://icaldownload.blogspot.com/"><span style="color: white">DOWNLOAD</span></a>
<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 white style="color:"></span>
</div></div></form>
Berikut contoh tampilan 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 kodenya
<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 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 a href="http://icaldownload.blogspot.com/"><span style="color: white">DOWNLOAD</span></a>
<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 white style="color:"></span>
</div></div></form>
save... selesai
0 komentar:
Posting Komentar