picture

Cara Memasang Lebih dari Satu Menu Tabview di Blog

byGemaDakwah — 0
TABVIEW 2

  • Ini adalah script yang harus dipasang di atas: </head>
<script src='http://tipspackjs.googlecode.com/files/Tabview2.js' type='text/javascript'/>


  • Ini Script yang harus dipasang diatas: ]]></b:skin>
div.TabView2 div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView2 div.Tabs a
{
float: left;
display: block;
width: 90px; /* Lebar Menu Utama Atas */ text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #A9F5A9; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Arial", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #000; /* Warna Font Menu Utama Atas */
}
div.TabView2 div.Tabs a:hover, div.TabView2 div.Tabs a.Active
{
background-color: #A9F5A9; /* Warna background Menu Utama Atas */
}
div.TabView2 div.Pages
{
clear: both;
border: 1px solid #A9F5A9; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #; /* Warna background Kotak Utama */
}
div.TabView2 div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView2 div.Pages div.Page div.Pad
{
padding: 3px 5px;
}


  • Ini adalah script yang harus anda tambahkan di page element:
<form action="tabview2.html" method="get">
<div class="TabView2" id="TabView2">
<div class="Tabs" style="width: 350px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">


<div class="Page">
<div class="Pad">
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />
</div>
</div>


<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />
</div>
</div>


<div class="Page">
<div class="Pad">
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />
</div>
</div>


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


<script type="text/javascript">
tabview2_initialize('TabView2');
</script>



TABVIEW 3


  • Ini adalah script yang harus dipasang di atas: </head>
<script src='http://tipspackjs.googlecode.com/files/Tabview3.js' type='text/javascript'/>


  • Ini Script yang harus dipasang diatas: ]]></b:skin>
div.TabView3 div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView3 div.Tabs a
{
float: left;
display: block;
width: 90px; /* Lebar Menu Utama Atas */ text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #A9F5A9; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Arial", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #000; /* Warna Font Menu Utama Atas */
}
div.TabView3 div.Tabs a:hover, div.TabView3 div.Tabs a.Active
{
background-color: #A9F5A9; /* Warna background Menu Utama Atas */
}
div.TabView3 div.Pages
{
clear: both;
border: 1px solid #A9F5A9; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #; /* Warna background Kotak Utama */
}
div.TabView3 div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView3 div.Pages div.Page div.Pad
{
padding: 3px 5px;
}



  • Ini adalah script yang harus anda tambahkan di page element:
<form action="tabview3.html" method="get">
<div class="TabView3" id="TabView3">
<div class="Tabs" style="width: 350px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">


<div class="Page">
<div class="Pad">
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />
</div>
</div>


<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />
</div>
</div>


<div class="Page">
<div class="Pad">
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />
</div>
</div>


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


<script type="text/javascript">
tabview3_initialize('TabView3');
</script>

TABVIEW 4


  • Ini adalah script yang harus dipasang di atas: </head>
<script src='http://tipspackjs.googlecode.com/files/Tabview4.js' type='text/javascript'/>


  • Ini Script yang harus dipasang diatas: ]]></b:skin>
div.TabView4 div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView5 div.Tabs a
{
float: left;
display: block;
width: 90px; /* Lebar Menu Utama Atas */ text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #A9F5A9; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Arial", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #000; /* Warna Font Menu Utama Atas */
}
div.TabView6 div.Tabs a:hover, div.TabView4 div.Tabs a.Active
{
background-color: #A9F5A9; /* Warna background Menu Utama Atas */
}
div.TabView4 div.Pages
{
clear: both;
border: 1px solid #A9F5A9; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #; /* Warna background Kotak Utama */
}
div.TabView4 div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView4 div.Pages div.Page div.Pad
{
padding: 3px 5px;
}



  • Ini adalah script yang harus anda tambahkan di page element:
<form action="tabview4.html" method="get">
<div class="TabView4" id="TabView4">
<div class="Tabs" style="width: 350px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">


<div class="Page">
<div class="Pad">
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />
</div>
</div>


<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />
</div>
</div>


<div class="Page">
<div class="Pad">
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />
</div>
</div>


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


<script type="text/javascript">
tabview4_initialize('TabView4');
</script>
<script type="text/javascript">
tabview3_initialize('TabView3');
</script>


TABVIEW 5


  • Ini adalah script yang harus dipasang di atas: </head>
<script src='http://tipspackjs.googlecode.com/files/Tabview5.js' type='text/javascript'/>


  • Ini Script yang harus dipasang diatas: ]]></b:skin>
div.TabView5 div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView5 div.Tabs a
{
float: left;
display: block;
width: 90px; /* Lebar Menu Utama Atas */ text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #A9F5A9; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Arial", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #000; /* Warna Font Menu Utama Atas */
}
div.TabView5 div.Tabs a:hover, div.TabView5 div.Tabs a.Active
{
background-color: #A9F5A9; /* Warna background Menu Utama Atas */
}
div.TabView5 div.Pages
{
clear: both;
border: 1px solid #A9F5A9; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #; /* Warna background Kotak Utama */
}
div.TabView5 div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView5 div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

  • Ini adalah script yang harus anda tambahkan di page element:
<form action="tabview5.html" method="get">
<div class="TabView5" id="TabView5">
<div class="Tabs" style="width: 350px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">


<div class="Page">
<div class="Pad">
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />
</div>
</div>


<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />
</div>
</div>


<div class="Page">
<div class="Pad">
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />
</div>
</div>


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


<script type="text/javascript">
tabview5_initialize('TabView5');
</script>
span style="color: rgb(255, 0, 0);" >

Sumber
Tags:

GemaDakwah

Gema Dakwah memeberikan sedikit Artikel- artikel Islam, taujihat, hikmah, khazanah, berita dan informasi kepada masyarakat pada umumnya, terkhusus pada ummat Islam.
Editor : H. Abu Athar Ahmad, Lc

Icon Name facebook twitter instagram youtube linkedin external-link

KATA MEREKA

Kontak Gema Dakwah : tarqiyahonline@gmail.com

Posting Komentar

Kontak Gema Dakwah : tarqiyahonline@gmail.com

Lebih baru Lebih lama