Pada Tutorial Blogging kali ini mungkin temen temen sudah pernah membaca di internet, namun saya sekedar berbagii kepada yang mungkin belum tahu, selain itu ada salah satu temen saya yang juga merequest widget ini untuk di postingkan kembali di blog saya, dan pada postingan kali ini saya akan memberikan tutorial membuat multi tab menu 3 kolom, bagi temen temen yang belum tahu silahkan dibaca, dan semoga bermanfaat untuk di ambil, Menu Multi Tab yang saya buat ini nanti hasilnya cara ini juga akan membuat blog sedikit lebih rapi dan tidak banyak menguras tempat.
A. CARA PERTAMA HANYA ADD A GADGET SAJA
1. Login ke akun blogger anda
2. Masuk ke Rancangan / Design
3. Pilih Tata Letak
4. Pilih Add New Widget / Tambah Gadget / Element klik HTML/Javascript.
5. Kemudian copy paste kode dibawah ini:
<style type="text/css">
div.TabView div.Tabs a
{
float: left;
display: block;
width: 95px; /* Lebar Kotak Tab */
height: 22px; /* Tinggi Menu Utama Atas */
text-align: center; /* Posisi Teks Menu Tab */
margin: 5px 0px 0px 3px; /* Posisi Kotak Tab */
background-color: #045FB4; ; /* Warna background Kotak Tab */
padding-top: 2px; /* Spasi Atas */
border: 1px solid #ffffff; /* Warna border kotak Tab */
border-bottom: 1px solid #ccc; /*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: #DF7401; /* Warna background utama kotak tab */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #cccccc; /* Warna border Kotak Konten */
overflow: hidden;
background-color: #ffffff; /* Warna background Kotak konten */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 5px; /* Jarak teks dalam kotak content */
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
</style>
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 385px;" class="Tabs">
<a><span style="color:white">TAB 1</span></a>
<a><span style="color:white">TAB 2</span></a>
<a><span style="color:white">TAB 3</span></a>
</div>
<div style="width: 300px; height: 250px;" class="Pages">
<div class="Page">
<div class="Pad">
Ganti Kode HTML content Widget YANG INGIN ANDA TAMPILKAN PADA TAB 1
</div>
</div>
<div class="Page">
<div class="Pad">
Ganti Kode HTML content Widget YANG INGIN ANDA TAMPILKAN PADA TAB 2
</div>
</div>
<div class="Page">
<div class="Pad">
Ganti Kode HTML content Widget YANG INGIN ANDA TAMPILKAN PADA TAB 3
</div>
</div>
</div></div></form>
<script style="text/javascript" src="http://scriptforyou.googlecode.com/files/tabview.js"></script>
<script type="text/javascript">tabview_initialize('TabView');
</script>
B. CARA KE DUA DENGAN EDIT TAMPLATE
Cara kedua ini dengan mengedit html template anda langsung saja caranya :
1. Login ke akun Blogspot,
2. Klik Design/Rancangan >> Edit HTML >> Klik Expand Templates Widget,
3. Cari kode berikut: ]]></b:skin>
4. Lalu copy kode di bawah ini dan taruh persis berada di atas kode tadi:
div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 103px;
text-align: center;
height: 24px;
padding-top: 3px;
vertical-align: middle;
border: 0.5px solid #000000;
border-bottom-width: 0;
text-decoration: none;
font-family: "Arial", Times New Roman, Serif;
font-weight: 900;
color: #000080;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #CEF6CE;
}
div.TabView div.Pages
{
clear: both;
background-color: #FFFFFF;
border: 0.5px solid #000000;
overflow: hidden;
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
5. Jika sudah maka lanjutkan dengan mencari kode ini: </head>
6. Lalu copy kode di bawah ini dan pastekan di atas kode tadi:
<script type='text/javascript'>
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);
// ----- Tabs -----
var Tabs = TabView.firstChild;
while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;
var Tab = Tabs.firstChild;
var i = 0;
do
{
if (Tab.tagName == "A")
{
i++;
Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
Tab.className = (i == id) ? "Active" : "";
Tab.blur();
}
}
while (Tab = Tab.nextSibling);
// ----- Pages -----
var Pages = TabView.firstChild;
while (Pages.className != 'Pages') Pages = Pages.nextSibling;
var Page = Pages.firstChild;
var i = 0;
do
{
if (Page.className == 'Page')
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
Page.style.overflow = "auto";
Page.style.display = (i == id) ? 'block' : 'none';
}
}
while (Page = Page.nextSibling);
}
// ----- Functions -------------------------------------------------------------
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
</script>
7. Save templates dan lanjutkan ke langkah selanjutnya,
8. Klik Design/Rancangan >> Page Element >> Add a Gadget >> HTML/Javascript,
9. Copy kode di bawah ini dan masukkan ke dalam konten HTML/Javascript lalu atur (edit) sesuai dengan keterangan masing-masing:
<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 315px;">
<a>Judul Tab 1</a>
<a>Judul Tab 2</a>
<a>Judul Tab 3</a>
</div>
<div class="Pages" style="width: 315px; height: 250px;">
<div class="Page">
<div class="Pad">
Isi tab 1
</div>
</div>
<div class="Page">
<div class="Pad">
Isi tab 2
</div>
</div>
<div class="Page">
<div class="Pad">
Isi tab 3
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 315px;">
<a>Judul Tab 1</a>
<a>Judul Tab 2</a>
<a>Judul Tab 3</a>
</div>
<div class="Pages" style="width: 315px; height: 250px;">
<div class="Page">
<div class="Pad">
Isi tab 1
</div>
</div>
<div class="Page">
<div class="Pad">
Isi tab 2
</div>
</div>
<div class="Page">
<div class="Pad">
Isi tab 3
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>
10. Jika dirasa sudah benar, lalu Save. Semoga tutorial kali ini bisa bermanfaat.
إرسال تعليق