Tutorial Tabber Widget

24.5.14

Assalamualaikum wbt.
Heyyo GG!

haritu, Nina ada minta zizie buatkan tutorial tabber widget macam zizie punya.



1. Pergi ke dashboard dan pilih menu layout.
2. Tekan Add A Gadget dan pilih HTML/Javascript.
3. Copy dan paste code di bawah.

<style type="text/css">
.tabber {
 padding: 0px !important;
 border: 0 solid #bbb !important;
}
.tabber h2 {
 float: center;
 margin: 1px 1px 0 0;
 font-size: 20px;
 padding: 3px;
 border: 1px solid #fff;
width:240px;
height:20px;
 margin-bottom: -1px; /*--Pull tab down 1px--*/
 overflow: hidden;
 position: relative;
 background: #0095FF;
 cursor:pointer;
}
html .tabber h2.active {
color: #fff;
background: #00DEFF; /*--"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>Get this <a href="http://www.bloggersentral.com/2011/05/create-tabbed-content-blogger-widgets.html" target="_blank">tabber widget</a></p></div>

ketebalan,jenis dan warna border
lebar dan ketinggian tab. ikut ukuran yang sesuai dengan blog korang.
background sebelum dan selepas ditekan.
saiz tulisan. ( boleh juga ditambah jenis tulisan).
warna tulisan selepas ditekan.
bilangan tab.

4. save dan letakkan HTML/Javasript di atas tab yang ingin disusun.

selamat mencuba :)

You Might Also Like

8 comments

  1. Best..zizie yang pemurah..bagus..alhamdulillah..

    ReplyDelete
  2. Tq Zizie kerana kongsikan tips ini... Selamat berhujung minggu yer :))

    ReplyDelete
  3. Waaa~ zizie, tq follow. Btw nk buat tuto ni kt hp xleh pulak. Hm..tq for sharing. :)

    ReplyDelete
  4. Cantik... boleh kawe try.. Tapi di mana ya? Boleh ke kat WP? :D

    ReplyDelete
  5. kak zizie , thanks for this tuto :)

    ReplyDelete
  6. penat betul try dah lebih dari 30 kali try tak dapat2 jgak..hukhukhuk TT^TT

    apalah nasib TT^TT

    ReplyDelete
  7. Thanks Zizie... sangat membantu :)

    ReplyDelete

blog ini berbentuk blog personal yang berkongsi tentang kehidupan zizie, dan beberapa informasi yang berguna untuk manusia sejagat. sebarang bahan bacaan di dalam blog ini bebas untuk ditulis semula kecuali bahan yang berunsur peribadi dan merupakan hak milik zizie. pihak zizie juga tidak bertanggungjawab terhadap komen-komen daripada para pembaca.