Showing posts with label Tutorial Tabber Widget. Show all posts

Tutorial : Tab Menu Di Sidebar *Tabber Widget

Pagi2 tutorial lagi^^



Ada beberapa blogger yang bertanyakan deno macam mana cara nak buat tabber widget macam blog deno ni ~ Kebaikan tabber widget ni.. kita dapat jimatkan ruang dalam blog dan blog pun jadi lebih kemas!:)

Jadi, apa kata kita cuba tutor ni? senang dan ringkas!

First, Login > Dashboard > HTML/Javascript > Then korang copy semua kod bawah ni :
<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: #ffffff;
     cursor:pointer;
    }
    html .tabber h2.active {
     background: #BDBDBD;
     border-bottom: 1px solid #BDBDBD; /*--"Connect" active tab to its content--*/
    }
    .tabber .widget-content {
     border: 2px solid #BDBDBD;
     padding: 10px;
background: #fffffff;
     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>


Merah :  warna background active tab & kaler border bawah tab
Biru : ketebalan border
Hijau : warna border tab
Kuning : warna background sidebar title
Merah jambu : bilangan tab


*lain2 korang boleh adjust mengikut kesukaan korang..... warna korang boleh cari kat SINI:)

Then, pada layout, korang kena susun sidebar widget macam kat bawah ni :


Pada HTML kod tabber widget tu, korang jangan letak apa2 tajuk.. Just susun tab yang korang nak letak kat bawah HTML tu.. Macam deno, tab tu deno letak tiga sahaja, jadi tiga je tajuk.. Tak kira letak apa2 pun, tapi mesti ada tajuk ya... :)

Dah siap susun, boleh SAVE! :)



p/s: selamat mencuba!