Membuat Tabview dengan Widget

Contoh tabview jagoBlog.com (gambar hanya ilustrasi)

Jagoan mengidamkan sebuah template yang minimalis, ringkas, dan tetap menarik? Mungkin dengan adanya penambahan tabview pada template jagoan bisa mewujudkan template idaman jagoan. Tabview bisa menghemat dan meringkas ruang template, jadi pengunjung blog jagoan tidak pusing ngeliatin blog jagoan. Trus gimana bikinnya?

1. Tambahkan widget HTML/Javascript dan letakkan dimana tempat tebwiew yang jagoan kehendaki

2. Copi dan pastekan kode dibawah ini pada widget HTML yang udah jagoan buat sebelumnya

<style type=”text/css”>div.TabView div.Tabs{height: 30px;overflow: hidden}div.TabView div.Tabs{background-color: #ffffff; /* Warna background Menu Utama Atas */ }
div.TabView div.Tabs a {float:left; display:block; width: 86.5px; /* Lebar Menu Utama Atas */
text-align:center ; height: 30px; /* div.TabView div.Tabs a {float:left; display:block; width: 86.5px; /* Lebar Menu Utama Atas */text-align:center ; height: 30px; /* div.TabView div.Tabs a {float:left; display:block; width: 86.5px; /* Lebar Menu Utama Atas */text-align:center ; height: 30px; /* div.TabView div.Tabs a {float:left; display:block; width: 86.5px; /* Lebar Menu Utama Atas */text-align:center ; height: 30px; /* Tinggi Menu Utama Atas */
padding-top:0px; vertical-align:middle; border:3px solid #000000; /* padding-top:0px; vertical-align:middle; border:3px solid #000000; /* padding-top:0px; vertical-align:middle; border:3px solid #000000; /* padding-top:0px; vertical-align:middle; border:3px solid #000000; /* Warna border Menu Atas */
border-bottom-width:0; text-decoration: none; font-family: “Courier”, Serif; /* border-bottom-width:0; text-decoration: none; font-family: “Courier”, Serif; /* border-bottom-width:0; text-decoration: none; font-family: “Courier”, Serif; /* border-bottom-width:0; text-decoration: none; font-family: “Courier”, Serif; /* Jenis Font Menu Utama Atas */
font-weight:bold; color:#000; /* font-weight:bold; color:#000; /* font-weight:bold; color:#000; /* font-weight:bold; color:#000; /* Warna Font Menu Utama Atas */ -moz-border-radius-topleft:0px; -moz-border-radius-topright:0px}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {background-color: #B22222; /*div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {background-color: #B22222; /*div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {background-color: #B22222; /*div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {background-color: #B22222; /* Warna background Menu Utama Atas */ }
div.TabView div.Pages {clear:both; border:3px solid #000000; /* Warna border Kotak Utama */ overflow:hidden; background-color:#000000; /* div.TabView div.Pages {clear:both; border:3px solid #000000; /* Warna border Kotak Utama */ overflow:hidden; background-color:#000000; /* div.TabView div.Pages {clear:both; border:3px solid #000000; /* Warna border Kotak Utama */ overflow:hidden; background-color:#000000; /* div.TabView div.Pages {clear:both; border:3px solid #000000; /* Warna border Kotak Utama */ overflow:hidden; background-color:#000000; /* Warna background Kotak Utama */ }
div.TabView div.Pages div.Page {height:100%; padding:0px; overflow:hidden}
div.TabView div.Pages div.Page div.Pad {padding: 5px 5px}
</style>
<script type=’text/javascript’>
//<![CDATA[
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>
<form action=”tabview.html” method=”get”>
<div id=”TabView” class=”TabView”>
<div style=”width: 280px;” class=”Tabs”>
<a>Nama tabview 1</a>
<a>Nama tabvier 2</a>
<a>Nama tabview 3</a>
</div>
<div style=”width:273px; height:400px; ” class=”Pages”>
<div class=”Page”>
<div class=”Pad”>div.TabView div.Pages div.Page {height:100%; padding:0px; overflow:hidden}div.TabView div.Pages div.Page div.Pad {padding: 5px 5px}</style><script type=’text/javascript’>//<![CDATA[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><form action=”tabview.html” method=”get”><div id=”TabView” class=”TabView”><div style=”width: 280px;” class=”Tabs”><a>Nama tabview 1</a> <a>Nama tabvier 2</a> <a>Nama tabview 3</a>
</div><div style=”width:273px; height:400px; ” class=”Pages”><div class=”Page”><div class=”Pad”>
div.TabView div.Pages div.Page {height:100%; padding:0px; overflow:hidden}div.TabView div.Pages div.Page div.Pad {padding: 5px 5px}</style><script type=’text/javascript’>//<![CDATA[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><form action=”tabview.html” method=”get”><div id=”TabView” class=”TabView”>

<div style=”width: 280px;” class=”Tabs”><a>Nama tabview 1</a> <a>Nama tabvier 2</a> <a>Nama tabview 3</a>
</div><div style=”width:273px; height:400px; ” class=”Pages”><div class=”Page”><div class=”Pad”>
div.TabView div.Pages div.Page {height:100%; padding:0px; overflow:hidden}div.TabView div.Pages div.Page div.Pad {padding: 5px 5px}</style><script type=’text/javascript’>//<![CDATA[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><form action=”tabview.html” method=”get”><div id=”TabView” class=”TabView”><div style=”width: 280px;” class=”Tabs”><a>Nama tabview 1</a> <a>Nama tabvier 2</a> <a>Nama tabview 3</a>
</div><div style=”width:273px; height:400px; ” class=”Pages”><div class=”Page”><div class=”Pad”>Masukkan kode widget untuk tabview 1 di sini</div></div><div class=”Page”><div class=”Pad”>Masukkan kode widget untuk tabview 2 di sini</div> </div><div class=”Page”><div class=”Pad”>Masukkan kode widget untuk tabview 3 di sini</div> </div></form><script type=”text/javascript”>tabview_initialize(‘TabView’);</script>

3. Modifikasi kode yang diberi keterangan berwarna Merah dan Hijau sesuai dengan template dan selera jagoan

4. Simpan dan semoga berhasil. Life for sharing…

Sumber: Membuat Tabview dengan Widget | jagoBlog.com

1 Comment

Leave a Reply to Anonim Cancel reply