Saturday, July 10

Add Tab kat Sidebar

untitled Kalau nak tengok contoh leh refer kat ruang chat box ai..kan ada chat-wawwi-follower-twitter..Tu la contoh tab yang ai nak tunjuk ni.

Korang yang minat nak mencuba..leh ikut step-step ni ok..sangat simple.

1)Macam biasa login blog –> design –> edit html

2)Search ]]></b:skin> kemudian copy code kat bawah dan pastekan betul-betul kat atas ]]></b:skin>

/* Tabbed Sidebar Widgets
--------------------------------- */
.widget-wrapper2{
border:1px solid #494e52;
background-color:#636d76;
padding:8px;
}

.widget-tab {
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topright:5px;
-webkit-border-radius-bottomleft:5px;
-webkit-border-radius-bottomright:5px;
-webkit-border-radius-topright:5px;
background:#FFFFFF url(http://i195.photobucket.com/albums/z105/dantearaujo/tabcontentbg.gif) repeat-x scroll left bottom !important;
border:1px solid #CFCFCF;
font-family:Arial,Helvetica,sans-serif;
padding:15px !important;
}

.widget-tab ul {
margin:0px;
padding:0px 20px 0px 20px;
}
.widget-tab ul li {
list-style:none;
border-bottom:1px solid #d6dde0;
padding-top:10px;
padding-bottom:10px;
font-size:13px;
}
.widget-tab ul li:last-child {
border-bottom:none;
}
.widget-tab ul li a {
text-decoration:none;
color:#3e4346;
}
.widget-tab ul li a small {
color:#8b959c;
font-size:9px;
text-transform:uppercase;
font-family:Verdana, Arial, Helvetica, sans-serif;
position:relative;
left:4px;
top:0px;
}
.tab-content ul li a:hover {
color:#a59c83;
}
.tab-content ul li a:hover small {
color:#baae8e;
}

.active-tab{
background:#FFFFFF url(http://i195.photobucket.com/albums/z105/dantearaujo/tabtopbg.gif) repeat-x scroll left top !important;
border-color:#CFCFCF #CFCFCF #FFFFFF #CFCFCF !important;
border-style:solid !important;
border-width:1px 1px 2px !important;
color:#282E32 !important;

}

ul.tab-wrapper {
margin:0px; padding:0px;
margin-top:5px;
margin-bottom:6px;
}
ul.tab-wrapper li {
-webkit-border-radius-topleft:5px;
-webkit-border-radius-topright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
background:#191919 url(http://i195.photobucket.com/albums/z105/dantearaujo/tabinactivebg.gif) repeat-x scroll left top;
border:1px solid #464C54;
color:#FFFFFF;
cursor:pointer;
display:inline;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:9px;
font-weight:bold;
line-height:2em;
list-style-image:none !important;
list-style-position:outside !important;
list-style-type:none !important;
margin-right:1px;
padding:8px 14px;
text-align:center;
text-decoration:none;
text-transform:uppercase;
}



3) Search /head.Pastu pastekan code kat bawah betul-betul kat atas /head




<!-- jQuery Call -->

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

<!-- End of jQuery Call –>



4)Pastu copy code kat bawah dan pastekan betul-betul selepas /head



<script type="text/javascript">
var starttab=0;
var endtab=2;
var sidebarname="sidebar1";
</script>
<script type="text/javascript" src="http://scriptabufarhan.googlecode.com/svn/trunk/bloggertabv1.0-min.js"></script>



5)Save 


P/S:


1)Korang leh tukar nombor pada var ikut kedudukan widget korang.



var starttab=0;

var endtab=2;


var sidebarname="sidebar";




2)Pastu untuk var sidebarname tu korang letak id sidebar korang.



<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>



3)Cara bilangan nombor widget korang



image



image



4) Semua widget kat sidebar perlu ada title,baru tab akan berfungsi dengan betul

16 comments:

Wan_hazel on July 9, 2010 at 6:14 PM said... [Reply]

law yg gune template cam wan camne??

Hadi Cemas on July 9, 2010 at 7:21 PM said... [Reply]

nak request tutorial boleh tak ? macam mana nak buat menu bar . menu bar saja .

Leeza on July 9, 2010 at 9:08 PM said... [Reply]

@Wan_hazel,boleh je klu template cam wan pun..sesuai kat semua jnis template tab ni..try le wat yer..

Leeza on July 9, 2010 at 10:24 PM said... [Reply]

Hadi Cemas,nak wat menu bar leh refer kat sini
http://www.lovejurnal.com/2010/05/buat-menu-kat-blogger.html

suhaisweet on July 10, 2010 at 6:55 AM said... [Reply]

Visiting here friend, cool blog n n3..nice..Very special brought for u.. Check it out!

kakyong on July 10, 2010 at 7:40 AM said... [Reply]

kakyong dah sembunyikan few widget.. template lama dulu penah buat tab bar ni.. pastu ade masa2 tertentu dia tak function... adeeyyy.. hangin sungguh.. tp nanti kalo teringin, kalo dtg ker sini erkkk..

hahaha... tu la dia, suka-suki nak mencuba..

Purpleroses on July 10, 2010 at 10:41 AM said... [Reply]

Nak tnye, sidebar tu kene create yang baru ke cmne? macam saya ade sidebar(kanan) and left sidebar(yg kiri).

Leeza on July 10, 2010 at 11:27 AM said... [Reply]

purpleross-->tak yah create yg baru..guna id salah satu sidebar..smada sidebar yg kanan atau yg kiri

Lindonut on July 10, 2010 at 9:03 PM said... [Reply]

this is fantastic! thxxx!!

Wan_hazel on July 11, 2010 at 12:21 PM said... [Reply]

nape wan tak leh eh.....tak dapat pun

Leeza on July 11, 2010 at 12:48 PM said... [Reply]

wan xleh buat ker..sidebar id betul tak..sptutnya xde prob

DaHLia on July 11, 2010 at 10:25 PM said... [Reply]

smart lorrr mende alah niii..
nanti nk buat jugerkk.. :)
tunggu template baru...huhu

Khidhir on July 18, 2010 at 3:40 PM said... [Reply]

Memang best..Tapi bila nak post tutorialni utk wordpress lak..huhu

suffer8zine on July 23, 2010 at 11:16 PM said... [Reply]

akak, koding atas ni ade error la, mybe akak ade tertinggal kod,

Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The string "--" is not permitted within comments.

leeza on July 26, 2010 at 10:03 AM said... [Reply]

@suffer8zine try delete code ni

<!-- jQuery Call -->

<!-- End of jQuery Call –>

pastu save..kalau ada error lg bgtau yer..sebab akak dah try kt blog lain,takde prob..kdg2 comment query tu html xleh detect..

azieda razak on August 10, 2010 at 2:20 PM said... [Reply]

akk... kite da cube coding atas nie..
sama gak cam @suffet8zine...
mybe sbb
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.

xde closing dia kot...

Post a Comment

 

Ratuhati Kami

  • Harith
  • Harith
  • Harith
  • Harith
  • Harith
  • Harith
  • Harith
  • Harith

Celebs Blog

Our Love Journal Copyright © 2010 Love Journal is Sponsored by HazlizaHusaini'sFamily