1997: Tutorial : Letak Tab Menu di Sidebar

Tutorial : Letak Tab Menu di Sidebar

25 November 2015

Dengan adanya widget ni dalam blog korang, korang boleh sace space unutk bahagian sidebar korang so bahagian sidebar korang takde lah messy sangat. Kalau tak tahu apa yang aku duk cakap ni, refer gadget bawah.

Code tab 1
Code tab 2
Code tab 3

Okay dah nampak dah pebende yang aku duk bebel tadi? Nampak tak bertapa bergunanya widget ni. hoho. So meh kita buat.

Template Designer
  1. Buka Layout > Add Gadget > HTML/JAVASCRIPT
  2. Copy paste code dalam blockquote masuk ruangan HTML tersebut
Classic Template/Blogskins
  1. Buka template korang
  2. Copy paste code dalam blockquote dekat tempat korang nak gadget ni berada
Code : 
<style type="text/css">
div.TabView div.Tabs{
height: 30px;
overflow: hidden
}
div.TabView div.Tabs a {
float:left;
display:block;
text-align:center;
padding-top:8px;
vertical-align:middle;
border-bottom-width:0;
text-decoration: none;
font-weight:bold;
width: 92px; /* Width Menu Navigation Atas */
height: 30px; /* Height Menu Navigation Atas */
border:1px solid #222222; /* Warna Border Navigation Atas */
background-color: #FEFEFE; /* Warna Background Navigation Utama Atas */ 
font-family: "Verdana", Serif; /* Font Navigation Utama Atas */
color:#222222; /* Warna Font Navigation Utama Atas */ 
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {
background-color: #222222; /* Warna background Navigation Utama Atas Active & Hover */ 
}
div.TabView div.Pages {
clear:both;
overflow:hidden;
border:1px solid #222222; /* Warna border Kotak Utama */  
background-color:#222222; /* Warna background Kotak Utama */
color:#FFFFFF; /* Warna Font 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>
<center><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>Title 1</a>
<a>Title 2</a>
<a>Title 3</a>
</div>
<div style="width: 300px; height:250px; " class="Pages">
<div class="Page">
<div class="Pad">
<center>
Code tab 1
</center>
</div>
</div>
<div class="Page">
<div class="Pad">
<center>
Code tab 2
</center>
</div>
</div>
<div class="Page">
<div class="Pad">
<center>
Code tab 3
</center>
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script></center>
Baiki apa yang patut. Make sure Title 1 untuk Code Tab 1, Title 2 untuk Code Tab 2 and same goes to 3. Korang kena pandai pandai main dengan width untuk Code ni. Complicated sikit, tapi jangan give up.

Code tab 1/Code tab 2/Code tab 3 tu isi dengan code yang korang nak ada dalam tab tu. Sebagai contoh code Follower box, code Facebook like Page, code Shoutmix.

Save then tengok hasil dia.

No comments:

Post a Comment

Related Posts Plugin for WordPress, Blogger...