August 13, 2012

tutorial : combine 3 sidebar widget dalam satu box (tabler widget)

korang sukakan kekemasan?nak jimat space?
korang memang patut cuba benda ni sebab ianya akan memperkemaskan blog korang.
una share tutorial ni sebab una rasa mesti ramai tercari-cari cara macam mana nak kemaskan blog , kata pun dah nak raya dah takkan rumah je kemas, blog pun nak jugak kan? *angkat kening*.

-okay stop mukadimah jom kita start?-



nampak yang dah dikotakkan dengan warna merah tu?
okay macam tu lah rupanya tabler widget tu

<style type="text/css">
.tabber {
 padding: 0px !important;
 border: 0 solid #bbb !important;
}
.tabber h2 {
 float: left;
 margin: 0 1px 0 0;
 font-size: 12px;
 padding: 3px 5px;
 border: 1px solid #bbb;
 margin-bottom: -1px; /*--Pull tab down 1px--*/
 overflow: hidden;
 position: relative;
 background: #e0e0e0;
 cursor:pointer;
}
html .tabber h2.active {
 background: #fff;
 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 : 3
 });
});
</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>



ARAHAN 

step 1) copy code di atas
step 2) pergi ke design > add gadget > pilih html java script
step 3) pastekan code tadi dan save
step 4) susun kotak yang dipastekan dengan code tadi diatas 3 sidebar widget yang kita hendak masukkan ke dalam kotak dan siapp!!! ;)






p/s: jadi tak? kalau jadi cer komen sikit, like fanpage kalau sudi, klik iklan nak beli choki2 :D 










Post a Comment