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.





You May Also Like

25 comments

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

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

    ReplyDelete
  3. ohsem shida..... simple dan nampak berkesan.....

    ReplyDelete
  4. mmg betul2 dpt jimat ruang..

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

    ReplyDelete
  6. 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
  7. kak mia memang guna ni.... memang best...

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

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

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

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

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

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

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

    ReplyDelete
  15. bagus shida.. rajin wat toturial :-)

    ReplyDelete
  16. kenapa sakinah buat tak jadi ? --'

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

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

    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.