Seperti biasa ikuti langkah pertamanya :
1. Login ke Blog
2. Klik Tab Tata Letak
3. Klik Tab Edit HTML
4. Beri tanda centang pada kotak kecil Expand Template Widget
5. Silahkan cari di dalam template anda kode </head>
6. Persis sebelum kode tersebut, pastekan script di bawah ini :
<script src='http://h1.ripway.com/pinginbelajar/campuran/menu_tab.js' type='text/javascript'/>
7. Silahkan cari lagi di dalam template sobat kode ]]></b:skin>
8. Persis sebelum kode tersebut, pastekan script di bawah ini :
div.TabView div.Tabs { width: 100%; overflow: hidden; border-bottom: 0px solid #000000; font: bold 13px Arial; list-style-type: none; }
div.TabView div.Tabs a { float: left; display: block; text-decoration: none; margin-right: 2px; margin-bottom: 2px; padding: 3px 3px 3px 3px; color: #FFFFFF; background: #0B615E; }
div.TabView div.Tabs a:hover { color: #000000; background:#DF0101; }
div.TabView div.Tabs a.Active { color: #000000; background:#2E2EFE; }
div.TabView div.Pages { width: 100%; overflow: hidden; clear: both; border: 0px solid #E6E6E6; margin: 25px 0px 5px 5px; padding: 0px 0px 0px 0px; }
div.TabView div.Pages div.Page { height: 100%; padding: 0px; overflow: hidden; }
div.TabView div.Pages div.Page div.Pad { padding: 0px 0px; }
9. Klik Simpan Template
Sekarang ikuti langkah duanya...:
1. Masuk ke Blog
2. Klik Tab Tata Letak
3. Klik Tab Elemen Halaman
4. Klik Tambah Gadget
5. Klik pilihan HTML/JavaScript
6. Pastekan ke dalam kolom Konten script di bawah ini :
<div style="overflow:auto; width:100%px; height:100%px; padding:5px 5px 5px 5px; border:1px solid #999999;">
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 100%;" class="Tabs">
<a>Judul 1</a>
<a>Judul 2</a>
<a>Judul 3</a>
<a>Judul 4</a>
<a>Judul 5</a>
</div>
<div style="width: 100%; height: 250px;" class="Pages">
<div class="Page">
<div class="Pad">
Entri data anda di sini yang akan tampil di kolom Judul 1
</div>
</div>
<div class="Page">
<div class="Pad">
Entri data anda di sini yang akan tampil di kolom Judul 2
</div>
</div>
<div class="Page">
<div class="Pad">
Entri data anda di sini yang akan tampil di kolom Judul 3
</div>
</div>
<div class="Page">
<div class="Pad">
Entri data anda di sini yang akan tampil di kolom Judul 4
</div>
</div>
<div class="Page">
<div class="Pad">
Entri data anda di sini yang akan tampil di kolom Judul 5
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>
</div>
7. Klik Simpan
Jika para sobat mengalami kesulitan dalam pemasangannya sobat langsung bisa menuju TKP tempat sumber yang memposting artikel ini dia adalah Guru saya silahkan sobat lansung menuju ketempatnya [ uda ].
Di sana banyak tutorial yang mungkin sobat cari..
Selesai semoga dapat membantu tembusan tutorial ini.
Salam blogger Indonesia.
Baca Atikel ini juga :