Tab view sendiri merupakan salah
satu trik untuk menghemat penggunaan tempat di sidebar blog anda agar
tidak terlalu penuh dengan gadget sehingga blog anda lebih rapi dan
loadingnya lebih cepat. Mungkin anda masih bingung tab view itu seperti
apa, contohnya bisa anda liat di sidebar saya yang bertuliskan “Games | Tips blog | profil | (ini terserah dengan keinginan anda saja)”. Kerjanya mirip dengan tab view pada office 2007. Berikut cara singkatnya :
- Upload dulu template anda, dan simpan untuk menghindari kejadian yang tidak diinginkan ^^
- Buka design >>> edit HTML
- Centang “expand widget template”
- Cari (ctrl+f) kode ]]></b:skin>
- Copy (ctrl+c) kode berikut ini, lalu pasang diatas ]]></b:skin>
div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 84px; /* Lebar Menu Utama Atas */
text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #999999; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #1E62B6; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FFFFFF; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #999999; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #FFFFFF; /* 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;
}
div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 84px; /* Lebar Menu Utama Atas */
text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #999999; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #1E62B6; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FFFFFF; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #999999; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #FFFFFF; /* 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;
}
- Lihat text yang berwarna, itu untuk pengaturannya. Bisa anda rubah sesuka hati
- Cari (ctrl+f) kode </head>
- Copy (ctrl+c) kode berikut ini, lalu pasang diatas
<script type='text/javascript'>
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>
<script type='text/javascript'>
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>
- Kemudian klik “save”
- Lalu masuk ke “page elements”
- Klik add a gadget >>> pilih “HTML/java script”
- Masukkan atau paste-kan (ctrl+v) kode dibawah ini kedalamnya
<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Title menu 1</a>
<a>Title menu 2</a>
<a>Title menu 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">
<div class="Page">
<div class="Pad">
<a href="http://ryanmrf.blogspot.com/2011/12/assassins-creed-revelations-engspa-rip.html">1. Assassin Creed Revelation-Engspa </a> <br />
<a href="http://ryanmrf.blogspot.com/2011/11/assassins-creed-revelations.html">2. Assassin Creed Revelation</a> <br />
<a href="http://ryanmrf.blogspot.com/2011/10/pes-2012.html">3. Pes 2012</a> <br />
<a href="http://ryanmrf.blogspot.com/2011/10/shaun-white-skateboarding.html">4. Shaun White Skateboarding </a> <br />
</div>
</div>
<div class="Page">
<div class="Pad">
<a href="http://ryanmrf.blogspot.com/2011/12/assassins-creed-revelations-engspa-rip.html">1. Assassin Creed Revelation-Engspa </a> <br />
<a href="http://ryanmrf.blogspot.com/2011/11/assassins-creed-revelations.html">2. Assassin Creed Revelation</a> <br />
<a href="http://ryanmrf.blogspot.com/2011/10/pes-2012.html">3. Pes 2012</a> <br />
<a href="http://ryanmrf.blogspot.com/2011/10/shaun-white-skateboarding.html">4. Shaun White Skateboarding </a> <br />
</div>
</div>
<div class="Page">
<div class="Pad">
<a href="http://ryanmrf.blogspot.com/2011/12/assassins-creed-revelations-engspa-rip.html">1. Assassin Creed Revelation-Engspa </a> <br />
<a href="http://ryanmrf.blogspot.com/2011/11/assassins-creed-revelations.html">2. Assassin Creed Revelation</a> <br />
<a href="http://ryanmrf.blogspot.com/2011/10/pes-2012.html">3. Pes 2012</a> <br />
<a href="http://ryanmrf.blogspot.com/2011/10/shaun-white-skateboarding.html">4. Shaun White Skateboarding </a> <br />
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>
- Masukkan atau paste-kan (ctrl+v) kode dibawah ini kedalamnya
<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Title menu 1</a>
<a>Title menu 2</a>
<a>Title menu 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">
<div class="Page">
<div class="Pad">
<a href="http://ryanmrf.blogspot.com/2011/12/assassins-creed-revelations-engspa-rip.html">1. Assassin Creed Revelation-Engspa </a> <br />
<a href="http://ryanmrf.blogspot.com/2011/11/assassins-creed-revelations.html">2. Assassin Creed Revelation</a> <br />
<a href="http://ryanmrf.blogspot.com/2011/10/pes-2012.html">3. Pes 2012</a> <br />
<a href="http://ryanmrf.blogspot.com/2011/10/shaun-white-skateboarding.html">4. Shaun White Skateboarding </a> <br />
</div>
</div>
<div class="Page">
<div class="Pad">
<a href="http://ryanmrf.blogspot.com/2011/12/assassins-creed-revelations-engspa-rip.html">1. Assassin Creed Revelation-Engspa </a> <br />
<a href="http://ryanmrf.blogspot.com/2011/11/assassins-creed-revelations.html">2. Assassin Creed Revelation</a> <br />
<a href="http://ryanmrf.blogspot.com/2011/10/pes-2012.html">3. Pes 2012</a> <br />
<a href="http://ryanmrf.blogspot.com/2011/10/shaun-white-skateboarding.html">4. Shaun White Skateboarding </a> <br />
</div>
</div>
<div class="Page">
<div class="Pad">
<a href="http://ryanmrf.blogspot.com/2011/12/assassins-creed-revelations-engspa-rip.html">1. Assassin Creed Revelation-Engspa </a> <br />
<a href="http://ryanmrf.blogspot.com/2011/11/assassins-creed-revelations.html">2. Assassin Creed Revelation</a> <br />
<a href="http://ryanmrf.blogspot.com/2011/10/pes-2012.html">3. Pes 2012</a> <br />
<a href="http://ryanmrf.blogspot.com/2011/10/shaun-white-skateboarding.html">4. Shaun White Skateboarding </a> <br />
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>
- Done
Tambahan :
- Tulisan warna hijau, untuk “judul tab” misal Artikel (pada tab 1). Komentar (pada tab 2) dst
- Tulisan yang berwarna merah bisa diganti dengan link yang ingin kamu tuju / link postingan mu
- Tulisan yang berwarna putih adalah tampilan menunya
- Jika ingin merubah warna background sesuai dengan blog anda, bisa membuka disiniSemoga BERHASIL dan BERMANFAAT
0 komentar: