Browse » Beranda » , » Membuat Tabview dengan Widget

Membuat Tabview dengan Widget

7:36 AM  jagoBlog.com  4 comments

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; /* Tinggi Menu Utama Atas */
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; /* Jenis Font Menu Utama Atas */
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; /* Warna background Menu Utama Atas */ }
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">

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...


Thank's for reading the article of jagoblog.com. Please give us your support and advice with your comment. Do not forget to click one button below to share. Life for sharing...

Artikel Terkait Lainnya:

Blogger
Tutorial


Posted in: ,

4 komentar:

thanks sob artikelnya bermanfaat
Endowed with a taste of the atmosphere, not necessarily from the brilliant and luxurious appearance package, not necessarily brand men's shoes, lv men's shoes, the expensive noble shoes
cara "MEMASUKAN CODE WIDGET" gimana mas ???

:)) :)] ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} ~x( :-t b-( :-L x( =))

Post a Comment

Mari budayakan komentar yang positif dan mohon kebijaksanaannya untuk tidak melakukan spamming. Jangan menyertakan link di dalam komentar, karena akan terdeteksi sebagai spam oleh google Life for sharing...