Tutorial : Tabbed Content Widget


Macam mana nak dapatkan kotak seperti gambar di atas....

1.   Pergi ke Design > Page Element n click Add A Gadget > Select HTML/Javascript

2. Copy and Paste code di bawah


<style type="text/css">
.tabber {
 padding: 0px !important;
 border: 0 solid #bbb;
}
.tabber h2 {
 float: left;
 margin: 0 1px 0 0;
 font-size: 20px;
 padding: 3px 5px;
 border: 1px solid #bbb;
 margin-bottom: -1px; /*--Pull tab down 1px--*/
 overflow: hidden;
 position: relative;
 background: transparent;
 cursor:pointer;
 -moz-border-radius:5px 5px 0 0;
 border-radius:5px 5px 0 0;
}
html .tabber h2.active {
 background: #c27ba0;
 border-bottom: 1px solid #fff; /*--"Connect" active tab to its content--*/
}
.tabber .widget-content {
 border: 1px solid #bbb;
 padding: 10px;
 background: transparent;
 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>


<div id='codeholder'><p>Get this <a href="http://www.bloggersentral.com/2011/05/create-tabbed-content-blogger-widgets.html" target="_blank">widget</a></p></div>

tabCount : 5 > Tukarkan angka 5 tu sekiranya korang nak tambah kan TAB

3 . Kosongkan kotak tajuk.... dan Letakkan kotak widget lain anda di bawahnya. Seperti gambar di bawah.


Previous
Next Post »

2 Komen

Write Komen
Momo
AUTHOR
Khamis, Ogos 02, 2012 3:24:00 PTG delete

kamek plah sik jadi kak..huhu..

Reply
avatar
Masz Sidek
AUTHOR
Khamis, Ogos 02, 2012 4:19:00 PTG delete

@Momo kena jadi macam ya ohh...
coba ktk rujuk sumber tuto ya...

Reply
avatar

[PENAFIAN] : www.mreena.com dan pemilik blog ini secara khusus tidak akan bertanggungjawab terhadap apa juga liabiliti, kerosakan, kehilangan, kerugian atas risiko, peribadi mahu pun sebaliknya yang berlaku akibat, secara langsung atau tidak langsung daripada penggunaan dan aplikasi, daripada apa juga kandungan yang diperolehi dari blog ini.

Pemilik blog juga tidak akan bertanggungjawab sama sekali terhadap komen-komen yang di siarkan dan ianya adalah tanggungjawab penulis komen itu sendiri.
ConversionConversion EmoticonEmoticon