Tutorial : Tab Menu Di Sidebar *Tabber Widget - Dayang Deno

11.8.13

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!


10 comments:

  1. Lepastu akak, menu tab kat atas tu nak buat macam mana?

    ReplyDelete
  2. thanks adik nanti akak cuba thanks for this tuto

    ReplyDelete
  3. Kalau nak tambah tab, kena tukar kat code tu je kan? Ke macam mana?

    ReplyDelete
  4. Kak deno, nak mintak pasangkan boleh tak ? miza cuba banyak kali tak dapat :( ni email miza : miza_idgihat@yahoo.com

    ReplyDelete
  5. tq ye kak, dah jadi dah :)

    ReplyDelete
  6. Terima kasih ^_^ Dah jadi tapi memang tak boleh buat dua ke?

    ReplyDelete
  7. Kak deno , boleh x buat tutorial macam mna nak buat macam dkt sidebar kak deno ni ? Yang history , lovely bloggers , labels tu ? cntik !

    ReplyDelete