Tutorial: Nak gabungkan widget pada sidebar (guna tab)

by - 22:45:00

   Assalammualaikum, peace upon you.

ok sebenarnya shida dah lama sangat stop buat tutorial kan, so hari ni rasa nak mula semula, untuk pengetahuan semua kebanyakan tutorial shida ni shida memang pakai then shida share dengan korang, kalau ada pun beberapa yang shida memang tak pakai tapi shida share juga dengan korang. So kali ni shida nak share tutorial macam mana nak gabungkan widget-widget pada sidebar macam yang shida pakai. Shida guna untuk bloglist, shida gabungkan dengan bloglist dan top komen so nampak kemas sikit, jimat ruang dan yang paling penting berat blog turun sikit ^_^ jom cuba tutor dia simple je.

1. page element >> add a gadget >> tambah javaHTML >> copy kod bawah dan paste
<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: #fff;
     border-bottom: 1px solid #fff; /*--"Connect" active tab to its content--*/
    }
    .tabber .widget-content {
     border: 1px solid #bbb;
     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 : 4
     });
    });
    </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>

 NOTED: 
untuk yang shida warnakan background ini : untuk color background tab, untuk yang warna background ini : untuk background sidebar korang, so boleh tukar ikut warna kesukaan korang ok
untuk warna merah jumlah tab yang kita nak gabungkan
title biarkan kosong dan susun widget seperti gambar bawah ni
 ini contoh yang shida punya gabungan widget macam shida pakai sekarang shida gabungkan 4 widget seperti dalam blog, kalau boleh korang jangan ubah apa-apa kod ya sebab nanti tak jadi pula.





Share
Tweet
Pin
Share
Tags : , ,

You May Also Like

25 comments

  1. Miss N™28 January 2013 at 23:18

    menariklah..nanti nur nak cubalah...
    mgkin cara ni boleh mringankan blog.. :)

    ReplyDelete
  2. Sop28 January 2013 at 23:30

    nice sharing shida
    dah lama x guna
    nak guna boleh rujuk sini nanti :)

    ReplyDelete
  3. Mimie28 January 2013 at 23:31

    bagus nih shida...tq share

    ReplyDelete
  4. Unknown28 January 2013 at 23:53

    ohsem shida..... simple dan nampak berkesan.....

    ReplyDelete
  5. fieda29 January 2013 at 08:35

    mmg betul2 dpt jimat ruang..

    ReplyDelete
  6. nuyui a.k.a miss YUI29 January 2013 at 09:31

    boleh rujuk kalau nak buat ni.,

    ReplyDelete
  7. Wanieys a.k.a IbuQalief29 January 2013 at 10:40

    tengs share shida..akak pun nak cuba juga la mcm ni

    ReplyDelete
  8. Sheila Salim29 January 2013 at 11:20

    Assalamualaikum. sheila buat, tak menjadi pun? kenapa ye? sheila dah lama cuba buat tuto ni. tak pernah menjadi pun. pelik betul. mohon bantuan awak...

    ReplyDelete
  9. Mia Liana29 January 2013 at 14:50

    kak mia memang guna ni.... memang best...

    ReplyDelete
  10. mummyriena29 January 2013 at 15:30

    nice tutor shida!

    ReplyDelete
  11. Nadia Johari29 January 2013 at 16:23

    baru ckp tadi..upernyer ade tutorial die..hehe...

    ReplyDelete
  12. Nadia Johari29 January 2013 at 16:23

    baru ckp tadi..upernyer ade tutorial die..hehe...

    ReplyDelete
  13. Unknown29 January 2013 at 18:58

    KENAPA KAK BUI PUNYA TAJUK TU BESAR SANGAT SHIDA..TULUNGGGG..HEHE

    ReplyDelete
  14. LiLy @ MaMaQiStInA29 January 2013 at 21:26

    Ada masa akak nak cuba buat..Thanx for sharing Shida..^^

    ReplyDelete
  15. Dingdang29 January 2013 at 23:41

    nanti akak cuba ye shida.
    harap2 kali ni menjadi :)

    ReplyDelete
  16. Mrs Velentine30 January 2013 at 08:26

    kak MV bab ni mmg gagal

    ReplyDelete
  17. ayut30 January 2013 at 12:44

    mmg ohsem..ayut suke...nnt nk try la...tp tak tahu bile... :)

    ReplyDelete
  18. Unknown31 January 2013 at 15:59

    pernah guna widget ni sekejap... pastu tukar...
    maybe lain kali boleh gunakan semula... ^_^

    ReplyDelete
  19. IntaNBerliaN2 February 2013 at 00:50

    bagus shida.. rajin wat toturial :-)

    ReplyDelete
  20. Sakinah10 February 2013 at 21:08

    kenapa sakinah buat tak jadi ? --'

    ReplyDelete
  21. Aina Areen25 February 2013 at 05:11

    wahhh, nice :) bila-2 nanti boleh ikut ;)

    ReplyDelete
  22. Unknown17 March 2013 at 01:34

    tq for sharing shida..akak copy & dh guna..:-)

    ReplyDelete
  23. Ayue Rejaluddin14 May 2013 at 09:43

    Waaa.. Tak jadi la....

    ReplyDelete
  24. Cik Fie5 August 2013 at 10:42

    nak try la nanti ;)

    ReplyDelete
  25. aienienka29 February 2016 at 10:45

    kenapa xjadi?

    ReplyDelete

Segala komen-komen yang telah disiarkan adalah tanggungjawab sepenuhnya ke atas penulis itu sendiri. Pemilik blog tidak akan bertanggungjawab jika berlaku sebarang permasalahan berkaitan dengan komen yang disiarkan. Mana-mana komen yang berbentuk iklan, mengandungi link/url yang mencurigakan, mengandungi kata-kata maki hamun yang tidak menyenangkan tidak akan disiarkan. Harap Maklum dan Terima Kasih.