Cara Buat Tab View keren tanpa Edit HTML v2

Unknown

Saturday 21 December 2013

1 Komentar

Hi sahabat blogger yang baik hatinya, nah saya ingin melanjutkan tutorial yang sebelumnya ane post tentang Cara Buat Tab View keren tanpa Edit HTML. Sekarang ane mau post yang versi keduanya nih, setelah oprak oprek kode CSS selama 3 jam kini saya post dan berbagi kepada para pembaca blogger mania .

Langsung ajah nih kita jalankan ke garis awalnya
Buka Blogger anda di Blogger.com
Pilih Layout > Pilih Add Element/Tambah Element
PIlih HTML/Javascript
Masukan kode ini :

<style>
div.TabView div.Tabs
{
height: auto;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 95px; text-align: left;
height: 26px;
padding-top: 3px;
vertical-align: middle;
border: 3px solid #eeeeee;
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif;
font-weight: 900;
color: #fff;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #0054bb;
}
div.TabView div.Pages
{
clear: both;
border: 3px solid #eeeeee;
overflow: hidden;
background-color: #f5f5f5;
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}</style>

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a><h2>Tab1</h2></a>
<a><h2>Tab2</h2></a>
<a><h2>Tab3</h2></a>
</div>
<div class="Pages" style="width: 100%; height: 200px;">

<div class="Page">
<div class="Pad">

Tab 1|Tab 1|

 </div></div>

<div class="Page">
<div class="Pad">

Tab 2|Tab 2|

 </div></div>

<div class="Page">
<div class="Pad">

Tab 3|Tab 3|

 </div></div>
</div>
</div>
</form>
 <script type="text/javascript" src="http://yourjavascript.com/102311116102/tabview.js"><

/script><script type="text/javascript">
tabview_initialize('TabView');
</script>

Klik Simpan/Save

*Note*

Ganti kata yang berwarna merah dan biru

Nah sampai disini dulu tutor yang saya bagikan jangan lupa komentar yah gan terus terus kunjungi blog saya yang sederhana ini yh