1. buka software Css tab design 2.
2. klik pada bagian Fill with samples >> pilih tab menu pilih tap menu yang sesuai dengan template tentunya.
dimana anda menyimpan file tadi dan ubah extensinya menjadi TXT ( pada file klik kanan >> open with >> notepad),
kita akan mendapatkan kode kira-kira seperti dibawah ini....
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Free CSS Navigation Menu Designs 1 at exploding-boy.com</title>
<style type="text/css">
<!--
body {
margin:0;
padding:0;
font: bold 11px/1.5em Verdana;
}
h2 {
font: bold 14px Verdana, Arial, Helvetica, sans-serif;
color: #000;
margin: 0px;
padding: 0px 0px 0px 15px;
}
/*- Menu Tabs H--------------------------- */
#tabsH {
float:left;
width:100%;
background:#000;
font-size:93%;
line-height:normal;
}
#tabsH ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsH li {
display:inline;
margin:0;
padding:0;
}
#tabsH a {
float:left;
background:url("tableftH.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsH a span {
float:left;
display:block;
background:url("tabrightH.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsH a span {float:none;}
/* End IE5-Mac hack */
#tabsH a:hover span {
color:#FFF;
}
#tabsH a:hover {
background-position:0% -42px;
}
#tabsH a:hover span {
background-position:100% -42px;
}
#tabsH #current a {
background-position:0% -42px;
}
#tabsH #current a span {
background-position:100% -42px;
}
-->
</style>
</head>
<body>
<h2>Tab Menu H</h2>
<div id="tabsH">
<ul>
<!-- CSS Tabs -->
<li id="current"><a href="Home.html"><span> Home </span></a></li>
<li><a href="Products.html"><span> Products </span></a></li>
<li><a href="Services.html"><span> Services </span></a></li>
<li><a href="Support.html"><span> Support </span></a></li>
<li><a href="Order.html"><span> Order </span></a></li>
<li><a href="News.html"><span> News </span></a></li>
<li><a href="About.html"><span> About </span></a></li>
</ul>
</div>
</body>
</html>
>>>
code warna hijau adalah file gambar yang ikut tersimpan pada langkah ketiga...
upload file gambar tersebut pada http://picasaweb.google.com/home dan ganti code warna hijau dengan Url gambar yang telah di upload.
perhatikan gambar. yang dilingkari adalah Url gambar
4. sekarang loging di blogger anda dasbor >> rancangan >> edit HTML
5. cari code </b:skin> ( pencarian lebih cepat tekan Ctrl+f dan masukkan kata yang ingin dicari pada kotak find).
6. copy code warna merah di atas dan paste diatas code </b:skin>...
7. simpan.
8. lalu pilih tab elemen halaman pada blog anda tambah gadget >> pilih Html/javascript Copas code warna biru disini...
yang bercetak tebal bisa diganti dengan link tujuan anda
9. simpan
Tidak ada komentar:
Posting Komentar
Silahkan berkomentar dengan sopan dan jelas dan apabila komentar anda tidak sopan, kami anggap itu sebagai SPAM.