Tutorial: Nak gabungkan widget pada sidebar (guna tab) | Dunia sebenar Shida Tutorial: Nak gabungkan widget pada sidebar (guna tab)

Klik Banner untuk lebih lanjut (iklan berbayar) nak tempah? (klik sini)


Monday, 28 January 2013

Tutorial: Nak gabungkan widget pada sidebar (guna tab)

   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.





26 Jari Ohsem:

Cik Nur said...

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

Sop said...

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

Mimi Azirah said...

bagus nih shida...tq share

Remy hazza said...

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

Fieda Rafli said...

mmg betul2 dpt jimat ruang..

nuyui a.k.a miss YUI said...

boleh rujuk kalau nak buat ni.,

Wanieys a.k.a IbuQalief said...

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

Sheila Salim said...

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

Mia Liana said...

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

mummyriena said...

nice tutor shida!

Nadia Johari said...

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

Nadia Johari said...

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

Bui Junaidi said...

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

LiLy @ MaMaQiStInA said...

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

Nurul Faiz said...

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

Mrs Velentine said...

kak MV bab ni mmg gagal

ayut said...

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

miz ruha said...

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

IntaNBerliaN said...

bagus shida.. rajin wat toturial :-)

GIFFARINE said...

ermm...saja nak share dan kongsikan manfaat ni bersama
sy ada guna satu system top up yg boleh jimat duit top up sepanjang hidup
cnth sy nak top up celcom rm10 hanya perlu bayar rm9.50 setiap kali top up,utk maklumat lanjut boleh lihat di link ni
http://www.zmeasymobile.blogspot.com/

Sakinah said...

kenapa sakinah buat tak jadi ? --'

Aina Areen said...

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

Khairul Bariah Salleh said...

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

AyueJean AJ said...

Waaa.. Tak jadi la....

Cik Fie said...

nak try la nanti ;)

Aienienka Peter said...

kenapa xjadi?