Ini adalah cara cepat untuk membuat tab view pada blog , caranya seperti berikut :
1. Buka Account Blogger anda
2. Klik Tata letak
3. Klik Add Gadget
4. Pilih Add Javascript/HTML
5. Copy dan Paste code HTML berikut
<style type="text/css">
.h_mnu_01{
width: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
font-style: normal;
text-decoration: none;
}
.h_mnu_01 ul{
margin: 0;
padding: 0;
float: left;
width: 100%;
background: #000000;
border-top-width: 1px;
border-right-width: 0;
border-bottom-width: 1px;
border-left-width: 0;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #000000;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000
}
.h_mnu_01 ul li{
display: inline;
}
.h_mnu_01 ul li a{
float: left;
color: #FFFFFF;
padding: 5px 11px;
text-decoration: none;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #000000;
}
.h_mnu_01 ul li a:visited{
color: #FFFFFF;
}
.h_mnu_01 ul li a:hover, .h_mnu_01 ul li .selected{
color: #FFFF00 !important;
padding-top: 5px;
padding-bottom: 5px;
background: #008000;
}
</style>
</head>
<body>
<div class="h_mnu_01">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">PROFILLE</a></li>
<li><a href="#">PRODUCT</a></li>
<li><a href="#">MY BLOG</a></li>
<li><a href="#">ABOUT</a></li>
</ul>
</div>
</body>
</html>
6. Ganti "HOME, (http://mahessawiehendra.blogspot.com)PROFILLE,PRODUCT, MY BLOG, ABOUT" terserah kalian, dan tanda # diganti dengan alamat dari menu tersebut. misalnya seperti dibawah ini.
<li><a href="mahessawiehendra.blogspot.com">MY BLOG</a></li>
7. Setelah proses pengeditan selesai, klik Simpan.
1. Buka Account Blogger anda
2. Klik Tata letak
3. Klik Add Gadget
4. Pilih Add Javascript/HTML
5. Copy dan Paste code HTML berikut
<style type="text/css">
.h_mnu_01{
width: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
font-style: normal;
text-decoration: none;
}
.h_mnu_01 ul{
margin: 0;
padding: 0;
float: left;
width: 100%;
background: #000000;
border-top-width: 1px;
border-right-width: 0;
border-bottom-width: 1px;
border-left-width: 0;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #000000;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000
}
.h_mnu_01 ul li{
display: inline;
}
.h_mnu_01 ul li a{
float: left;
color: #FFFFFF;
padding: 5px 11px;
text-decoration: none;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #000000;
}
.h_mnu_01 ul li a:visited{
color: #FFFFFF;
}
.h_mnu_01 ul li a:hover, .h_mnu_01 ul li .selected{
color: #FFFF00 !important;
padding-top: 5px;
padding-bottom: 5px;
background: #008000;
}
</style>
</head>
<body>
<div class="h_mnu_01">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">PROFILLE</a></li>
<li><a href="#">PRODUCT</a></li>
<li><a href="#">MY BLOG</a></li>
<li><a href="#">ABOUT</a></li>
</ul>
</div>
</body>
</html>
6. Ganti "HOME, (http://mahessawiehendra.blogspot.com)PROFILLE,PRODUCT, MY BLOG, ABOUT" terserah kalian, dan tanda # diganti dengan alamat dari menu tersebut. misalnya seperti dibawah ini.
<li><a href="mahessawiehendra.blogspot.com">MY BLOG</a></li>
7. Setelah proses pengeditan selesai, klik Simpan.