Breaking News
Loading...
Thursday, August 8, 2013

Cara Membuat Tab View Multi Widget Blogger

Hello Sobat TKB , sekarang saya mau share tutor cara membuat Tab View di blogger , tab view ini juga baru di pasang di blog ku hehe , sebenernya sih awalnya ga tau namanya apa , terus aku coba keyword tab view nah setelah mondar mandir nyari narasumber bisa deh buat Tab View yang simpel , langsung aja ya gan

Cara 1 ( Simpel Way )

Step 1 : Login Ke Blogger - > Layout - > HTML 
Step 2 : Cari </head> terus kasih Kode ini tepat di atas kode </head> 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
Step 3 : Simpan Template 
Step 4 : Ke Tata Letak - > Add Widget masukin Script ini 


       <style type="text/css">
 .blogtabs {padding: 0px !important;border: 0 solid #bbb;}

        .blogtabs h2 {float: left;margin: 0 2px 4px 0;font-size: 12px;padding: 3px 5px;border: 1px solid #bbb;overflow: hidden;position: relative;background: #e0e0e0;cursor:pointer;}

        html .blogtabs h2.active {background: #fff;}

        .blogtabs .widget-content {border: 1px solid #bbb;padding: 10px;background: #fff;clear:both;margin:0;}

        .btab, #showtabs {display:none;}

        </style>

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>

        <script type="text/javascript" src="http://ayriyzone.googlecode.com/files/SimpleTabViewJQuery.js"></script>

        <script type="text/javascript">

        $(document).ready(function() {

        $('#showtabs').simpleBlogTab ({organictabs: 3});

        });

        </script>

        <div id="showtabs"></div>

Step 5 : Save 

nah kurang lebih sistemnya kaya gini : 1. Gadget Paling atas itu Multi Widget / Tab viewnya , yang bawah urutan 2 , Tab 1 , urutan 3 , Tab 2 , Urutan 4 , Tab 3 , jadi 3 widget yang bawah jadi Tabnya


Cara 2 ( HTML Mode )

Step 1 : Masuk Ke Blogger lalu , Template - > Html - > Cari kode </head> lalu masukan Kode berikut di atas </head>


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

Step 2 : Lalu Cari Kode ]]></b:skin> Masukan Kode berikut di atas kode ]]></b:skin> 

div.TabView div.Tabs
{
height: 30px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 98px; /* Lebar Menu Atas */ text-align: center; height: 30px; /* Tinggi Menu Atas */ padding-top: 3px; 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: #000; /* 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: #E6E6E6; /* Warna background Menu Utama Atas */ } div.TabView div.Pages { clear: both; border: 1px solid #BDBDBD; /* Warna border Kotak Utama */ overflow: hidden; background-color: #E6E6E6; /* 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: 3px 5px; }

Step 3 : Save Template 
Step 4 : Ke tata letak - > Add Gadget - > Html/JavaScript , Masukan Kode Berikut

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 300px;">
<a>
Menu 1</a>
<a>
Menu 2</a>
<a>
Menu 3</a>
</div>
<div class="Pages" style="width:
300px; height: 250px;">
<div class="Page">
<div class="Pad">
Letakkan konten menu 1 disini
</div></div>
<div class="Page">
<div class="Pad">
Letakkan konten menu 2 disini
</div></div>
<div class="Page">
<div class="Pad">
Letakkan konten menu 3 disini
</div></div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>

Keterengan, kode warna merah adalah kode-kode ukuran, kode warna biru adalah kode-kode warna yang bisa sobat ubah. Masukan judul Tab pada tulisan berwaana hijau. Dan masukan kode HTML widget pada tulisan warna ungu.

Selesai Deh Sob ,Demikian Pembahasan Tentang Cara Membuat Tab View Multi Widget Blogger Semoga Bermanfaat ya Sob ^^

2 comments:

  1. Itu widget yang dipasang diblog ini ya? mantap :D

    ReplyDelete
  2. @viper iya gan yang di pasang disini hehe

    ReplyDelete

 
Toggle Footer