Cara Membuat Tab Menu View Pada Blogspot

Posting kali ini adalah membuat tab menu view yang mana sesuai dipasang pada blog yang mempunyai side bar yang luas.Pemasangan menu seperti ini adalah menjimatkan ruangan kerana menu disatukan secara tab pada satu tempat.Satu lagi kelebihan menu ini adalah tidak perlu mengedit template,Cuma di masukkan pada add gadget.Jadi lebih mudah untuk membuatnya tanpa perlu khuatir tidak berfungsi setelah membuatnya.Cuma kita perlu mengubah sedikit saiz dan juga warna pada kod agar bersesuaian dengan template kita.  

jika sekiranya berminat untuk membuatnya ikuti langkah ini:

Masuk  keblogger
Pilih design-Layout
Add a Gadget
Pilih  HTML/Javascript
Dan masukkan kode ini

<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:3px ridge#A9A9F5; /* Warna border Menu Atas */
border-bottom-width:0; text-decoration: none; font-family: "Verdana", Sans Serif; font-size: 12px; text-shadow: 0 0 3px #000, 0 -1px 0px #ff3, 1px -1px 0px #fff, -1px -3px 1px #f80, 1px -3px 1px #f20; /* Font Menu Utama Atas */
font-weight:italic; color:#FFFFFF; /* 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:#003333; /* Warna background Menu Utama Atas */ }
div.TabView div.TabMenu {clear:both; border:3px groove#A9A9F5; /* Warna border Kotak Utama */ overflow:hidden; background:#EAEAEA; -moz-border-radius-bottomleft:12px; -moz-border-radius-bottomright:7px;-moz-border-radius-topright:7px  /* Warna background Kotak Utama */ }
div.TabView div.TabMenu div.Page {height:100%; padding:0px; overflow:hidden}
div.TabView div.TabMenu 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);
// ----- TabMenu -----
var TabMenu = TabView.firstChild;
while (TabMenu.className != 'TabMenu') TabMenu = TabMenu.nextSibling;
var Page = TabMenu.firstChild;
var i = 0;
do
{
if (Page.className == 'Page')
{
i++;
if (TabMenu.offsetHeight) Page.style.height = (TabMenu.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: 330px;" class="Tabs">
<a>BLOG</a>
<a>WORDPRESS</a>
<a>KOMPUTER</a>
</div>
<div style="width:310px; height:190px; " class="TabMenu">
<div class="Page">
<div class="Pad">

<ul>
<li><a href="#">List Judul 1 Tutorial Blogspot</a></li>
<li><a href="#">List Judul 2 Tutorial Blogspot</a></li>
<li><a href="#">List Judul 3 Tutorial Blogspot</a></li>
<li><a href="#">List Judul 4 Tutorial Blogspot</a></li>
<li><a href="#">List Judul 5 Tutorial Blogspot</a></li>
<li><a href="#">List Judul 6 Tutorial Blogspot</a></li>
<li><a href="#">List Judul 7 Tutorial Blogspot</a></li>
</ul>
</div>
</div>
<div class="Page">
<div class="Pad">
<ul>
<li><a href="#">List Judul 1 Tutorial Wordpress</a></li>
<li><a href="#">List Judul 2 Tutorial Wordpress</a></li>
<li><a href="#">List Judul 3 Tutorial Wordpress</a></li>
<li><a href="#">List Judul 4 Tutorial Wordpress</a></li>
<li><a href="#">List Judul 5 Tutorial Wordpress</a></li>
<li><a href="#">List Judul 6 Tutorial Wordpress</a></li>
<li><a href="#">List Judul 7 Tutorial Wordpress</a></li>
</ul>
</div>
</div>
<div class="Page">
<div class="Pad">
<ul>
<li><a href="#">List Judul 1 Tutorial Komputer</a></li>
<li><a href="#">List Judul 2 Tutorial Komputer</a></li>
<li><a href="#">List Judul 3 Tutorial Komputer</a></li>
<li><a href="#">List Judul 4 Tutorial Komputer</a></li>
<li><a href="#">List Judul 5 Tutorial Komputer</a></li>
<li><a href="#">List Judul 6 Tutorial Komputer</a></li>
<li><a href="#">List Judul 7 Tutorial Komputer</a></li>
</ul>
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>

Kemudian klik save

Judul : Cara Membuat Tab Menu View Pada Blogspot
Peringkat : 7 / 10 . 264 voting. 197 pengguna.
URL : http://seotipsku.blogspot.com/2013/12/cara-membuat-tab-menu-view-pada-blogspot.html
Ditulis Oleh : EraVisi