Wednesday, 4 November 2015

tutorial letak tabber widget di sidebar blog

Assalammualaikum :) memandangkan ada yang request tutorial tabber widget sidebar jom nak share sekali..sebenarnya tutorial memang dah ada tapi belum post je..bila terbaca kat cbox baru rasa macam nak post, mana tau ada yang minat nak apply mungkin juga boleh bantu mereka yang nak blog lebih kemas dan simple . bila klik mana2 tab akan keluar info kat bawah tu.. ni saya share yang saya tahu dan buat kat blog je lah ye..:) jom follow je step ni. tag mawar assufi



1. Dashboard-->Layout-->Add a Gadjet-->HTML/JavaScript

2. Copypaste code kat bawah ni dalam html/javascript tu k



<style type="text/css">
    .tabber {
     padding: 0px !important;
     border: 0 solid #D7D7D7 !important;
     }
    .tabber h2 {
     float: center;
     margin: 0 1px 0 0;
     font-size: 12px;
     padding: 2px 5px;
     border: 1px solid #D7D7D7;
     margin-bottom: -1px; /*--Pull tab down 1px--*/
     overflow: hidden;
     position: relative;
     background: #ffffff;
     cursor:pointer;
     }
     html .tabber h2.active {
     background: #D7D7D7;
     border-bottom: 1px solid #D7D7D7; /*--"Connect" active tab to its content--*/
     }
    .tabber .widget-content {
     border: 1px solid #D7D7D7;
     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 : 7 });
    });
    </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>


 
code ni dah siap saya edit cuma tukar je beberapa perkara kat bawah:

bold hitam : boleh tukar nak solid/dashed/dotted  
merah : warna border/background selepas dan sebelum point cursor- sila ganti ikut kod warna pilihan masing2 ye :)
Biru : bilangan tab yang anda mahu . boleh ubah ikut keperluan


3. save je dan siap!

susun tab title ikut susunan masing2  contoh  saya susun :)




senang tak. semoga perkongsian ni dapat memudahkan/ membantu sesiapa yang mungkin memerlukan. boleh try dan berjaya atau tak silakan komen okeh..:) tq

21 comments:

  1. wah menarik. nanti nak cuba laa

    ReplyDelete
    Replies
    1. silakan leya-sesiapa pun boleh guna :)

      Delete
  2. Replies
    1. betul PC- untuk yang nak simple2 :)

      Delete
  3. Thanks kak. Buat blog lebih kemas. Nanti nak cuba :)

    KTC

    ReplyDelete
  4. Replies
    1. untuk yg simple2 je yanie..hee

      Delete
  5. Yeay ! DOne .... Jom Tengok Blog kita --> http://lynk.my/UlU

    Nanti free kita review okay <3

    ReplyDelete
    Replies
    1. alhamdulillah berjaya..nanti akk gi stalk k..kihkih

      Delete
  6. Huhuu dh try buat tp npe xjd pun sis..
    Nak jugak mcm yg kat ats tu, bagi nmpk kemas sikit

    ReplyDelete
    Replies
    1. alaa..x jd ke..cemana ni.. try n error ..boleh? nanti akk cek balik codenya..

      Delete
  7. Wahhh new info. Nk try3. Thankyoyu akakkk :*

    ReplyDelete
  8. saya buat jadi tapi kenapa saya punya tak bersenggang macam akak, hehe

    ReplyDelete
    Replies
    1. tadi akk pi stalker..kihihi..margin bottom yang -1 tu kot.. tapi camtu pun simple n kemas kan..ngeeee :)

      Delete
  9. tapi tak pelah yang penting jadi, terima kasih kak ! :)

    ReplyDelete
  10. nape sya punya tak jadi ? sob sob

    ReplyDelete