16 May 2010

Belajar Memasang Tab View tanpa edit HTML

Pada saat rifweb mengecek visit box, ternyata sobat blog ada yang menanyakan bagaimana caranya memasang widget tab view tanpa edit html ?? sebenarnya karna source kode pada setiap template berbeda-beda terkadang ada saja masalah pemasangan widget ini.

Contoh kasus di template si 'A' widget ini bisa diterapkan tapi di si 'B' widget tidak dapat dipasang sesuai dengan fungsinya. Oleh karna itu rifweb mencoba berbagi beberapa sourch kode yang bisa langsung dipasang pada add gedget > HTML/JavaScript pada blog sobat .

Monggo silahkan Dicoba >>,,,.

#Gambar1.

Ini source kode gambar-1 :
<style type="text/css">
div.TabView div.Tabs
{height: 30px;overflow: hidden}
div.TabView div.Tabs a {float:left; display:block; width: 98px; /* Lebar Menu Utama Atas */
text-align:center ; height: 30px; /* Tinggi Menu Utama Atas */
padding-top:8px; vertical-align:middle; border:1px solid #BDBDBD; /* Warna border Menu Atas */
border-bottom-width:0; text-decoration: none; font-family: "Verdana", Serif; /* Font Menu Utama Atas */
font-weight:bold; color:#00BF08; /* Warna Font Menu Utama Atas */ -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {background-color: #EF8100; /* Warna background Menu Utama Atas */ }
div.TabView div.Pages {clear:both; border:1px solid #BDBDBD; /* Warna border Kotak Utama */ overflow:hidden; background-color:#EF8100; /*

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: 300px;" class="Tabs">
<a>Judul Ke-1</a>
<a>Judul Ke-2</a>
<a>Judul Ke-3</a>
</div>
<div style="width:300px; height:250px; " class="Pages">
<div class="Page">
<div class="Pad">
Isi judul Ke-1
</div>
</div>
<div class="Page">
<div class="Pad">
Isi judul Ke-2
</div>
</div>
<div class="Page">
<div class="Pad">
Isi judul Ke-3
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>

#Gambar2.

ini source kode gambar-2 :

<style type="text/css">
/*------------TabView--------*/
div.TabView div.Tabs {
height : 20px;
overflow : hidden;
}
div.TabView div.Tabs a {
float : left;
display : block;
width : 100px;
text-align : center;
height : 20px;
padding-top : 0px;
vertical-align : middle;
border-top : 1px solid #999999;
border-left : 1px solid #999999;
border-right : 1px solid #999999;
border-bottom : 1px solid #999999;
font-family : "verdana", Serif;
font-weight : 90px;
color : #1e62b6;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {
background-color : #f2f2f2;
}
div.TabView div.Pages {
clear : both;
border-left : 1px solid #999999;
border-right : 1px solid #999999;
border-bottom : 1px solid #999999;
overflow : hidden;
background-color : #f2f2f2;
}
div.TabView div.Pages div.Page {
height : 100%;
padding : 0;
overflow : hidden;
}
div.TabView div.Pages div.Page div.Pad {
padding : 3px 5px;
}
</style>



<script src="http://andi8lumut.googlepages.com/tabview.js" type="text/javascript">
</script>


<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 310px;" class="Tabs">
<a>Judul Tab 1</a>
<a>Judul Tab 2</a>
<a>Judul Tab 3</a>
</div>

<div style="width:310px; height:275px; " class="Pages">


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

Isi teks tab 1

</div>
</div>


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

Isi teks tab 2

</div>
</div>

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

Isi teks tab 3

</div>
</div>
</div>
</div>
</form>

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

Selamat memilih dan semoga source kode-nya ada yang cocok untuk blog sobat.

Riquest from : http://www.belajar-sholat.co.cc//

Belajar Memasang Tab View tanpa edit HTML Rating: 4.5 Diposkan Oleh: Sarifa Marwa

5 komentar:

  1. pertamax ga ya..???

    makasih gan atas tutornya pasti berguna buat ane...

    ReplyDelete
  2. keduaxx..!!
    rumit banget ya

    ReplyDelete
  3. kunjungan sore...
    makasih banget sob tas tips....dah Q praktekin nech, n alhmd bisa
    semangat .....semoga ilmunya bisa bermanfaat.

    ReplyDelete
  4. Ow, aQ kirain tanpa edit html tuh apa...., ternyata edit source code dari template ya, Kalau yang itu emang bisa langsung widget dengan javascript sih...

    ReplyDelete
  5. bang..
    tutornya keren..
    saya sukses bikin tabnya
    tp gmn cara isi tabnya bang..
    mumet lagi ane..

    ReplyDelete

Komentar Spam, Link Aktif, dan URL Blog Takkan Muncul. Tidak semua pertanyaan sempat/bisa dijawab.