Tutorial : Mini Tab di Sidebar

Assalamualaikum.



Tutorial ini request oleh adik DianeeyA dan juga Miss Balqis.


Okay harapnya betul lah ini yang korang cari.

ini rupanyaa diaa~ 


1. Copy code ni dan pastekan di Add gadget

<style type="text/css">
.tabber {
 padding: 0px !important;
 border: 0 solid #bbb !important;
}
.tabber h2 {
 float: bottom;
 margin: 0 1px 0 0;
 font-family: Calibri;
font-size: 12px;
letter-spacing: 2px;
text-align:center;
 padding:3px 5px;
 border: 1px solid #FFD5D5;
 margin-bottom: 1px; /*--Pull tab down 1px--*/
 overflow: hidden;
 position: relative;
 background: #FFD5D5;
 cursor:pointer;
}
html .tabber h2.active {
 background: #D8D8D8;
 border-bottom: 1px solid #fff; /*--"Connect" active tab to its content--*/
}
.tabber .widget-content {
 border: 1px solid #bbb;
 padding: 10px;
 background: #fff;
 clear:both;
 margin:0;
}
.codewidget, #codeholder {
 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://greenlava-code.googlecode.com/svn/trunk/publicscripts/bloggertabs0.1_min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
 $('#codeholder').bloggerTabber ({
  tabCount : 5
 });
});
</script>
<!-- to make sure the widget works, do not alter the code below -->
<div id='codeholder'><p><a href="http://www.bloggersentral.com/2011/05/create-tabbed-content-blogger-widgets.html" target="_blank"></a></p></div>

XOXO : Ubah warna ikut kesukaan anda.
XOXO : ubah berapa gadget nak diletakkan bawahnya.


2. Susun macam ni. 


Nampak bulat merah tu tak? Make sure letak dekat atas gadget yang korang nak dia masuk dalam Tab tu.

Faham tak? Boleh tanya.


Sekian. 
//Code are not mine.



Aina Akmal

AINA AKMAL. Seorang gadis comel yang berasal dari utara Malaysia. Punya impian sebesar alam semesta dan seorang yang bercakap banyak. Pemegang status pelajar seumur hidup. Keep learning and never give up adalah prinsip beliau. Masih bujang terang tang tang kata orang. Nak berkenal? Boleh jenguk bawah ni.

12 comments:

  1. dia ada ganggu apa2 tak if guna macam ni?
    uhu..kita ingat nak buat mcm ni tapi macam tak selesa so guna tab 2 in 1 ja..

    ReplyDelete
  2. Talima tatih! ^_^ I cari kat semua blog lain tu yang biasa punya, mujur ada orang tu yang pandai coding. I tak fahamlah nak adjust code dia, code blogskin bolehlah~ :3 Ok nanti I try~ ^_^

    ReplyDelete
  3. akk mmg da lme dpt code nie tp still xjadi..nk mrajuk bawak diri aa cenggini (T.T)

    ReplyDelete
  4. Pewitttt...boleh save side bar tu kann

    ReplyDelete
  5. Nak cuba nanti menjadi ke tak..hehe..thank Aina :)

    ReplyDelete
  6. Tak jadilah~ Mungkin memang tak boleh untuk Picture window. Kena tunggu new look dulu baru boleh buatlah nampaknya~ T^T

    ReplyDelete
  7. Akk mcm biase la
    Pening tgk cod2 cmni
    Oh mannn....

    ReplyDelete
  8. ala, x jadi.. sobs.. agaknya sebab code template ni x sesuai kot. nak sangat macam awak pnya ni.. sedihnya

    ReplyDelete