14.7.12

Tutorial : Tabbed Widget Mudah. Tab 3 Dalam 1

Author : Nabila Medan Time : 7/14/2012 08:15:00 PM Total Comment : 31 Label :


اَلسَّلَامُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَا تُهُ Dan Selamat Petang

Tutorial ni nabila credit dari blogger sentral

blogger tabber tabbed view contents

Okay , ada beberapa blogger yang tanya macam mana nabila buat tab yang dekat sidebar 'LomoWave' , 'Shoutbox' , 'Linkies' tu -


Kalau korang nak buat tab macam tu, nabila bagi tutorial yang mudah ni ye? 

Langkah 1
Dashboard > Design > Add A Gadget > HTML/JavaScript

Langkah 2
Copy semua code 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: #e0e0e0;
 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: #fff;
 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>
Langkah 3
Pastekan code tadi dan letakkan dibahagian HTML/JavaScript tadi dan Save



Langkah 4
Drag/bawa tabber widget code tadi diatas widget yang korang nak gabungkan
contoh -
tabbed contents view elements
(tab1 , tab2, tab3 adalah widget yang ingin digabungkan)

Langkah 5
Save dan lihat hasilnya

Nota
Merah - jumlah widget yang ingin digabungkan
Pink - code colour

Gudluck! Semoga ia dapat membantu =D

31 comments

Saturday, July 14, 2012 8:23:00 PM Delete! [Reply Comment]

nak cubalah..heheh nuff tuk awk ^^

Saturday, July 14, 2012 8:29:00 PM Delete! [Reply Comment]

Tuto yang menarik..Nak try la

Saturday, July 14, 2012 9:04:00 PM Delete! [Reply Comment]

Dah lame cari tuto ni ;') **terharu**

Saturday, July 14, 2012 9:16:00 PM Delete! [Reply Comment]

x paham la dear...apa maksudnya Drag/bawa tabber widget code tadi diatas widget yang korang nak gabungkan??

Saturday, July 14, 2012 9:21:00 PM Delete! [Reply Comment]

@cynta ieda - ermm , maksudnya lebih kurang tarik code widget yg sis copypaste td tuh dan letak dekat ATAS gadget yang sis nak gabungkan. Boleh lihat gambar

Saturday, July 14, 2012 9:21:00 PM Delete! [Reply Comment]

@Farra - moga berhasil ye =D

Saturday, July 14, 2012 9:21:00 PM Delete! [Reply Comment]

@Cik.blogger - cubalah. moga berhasil. tq =D

Saturday, July 14, 2012 9:22:00 PM Delete! [Reply Comment]

@Aien_Aen - jom try! moga berhasil :)

Saturday, July 14, 2012 9:30:00 PM Delete! [Reply Comment]

@Nabila Medanx paham la dear..x pa..x jadi buat..heee..bingung dah..bythwy tq

Saturday, July 14, 2012 9:50:00 PM Delete! [Reply Comment]

dah baut.. tp xjadi..

Saturday, July 14, 2012 10:18:00 PM Delete! [Reply Comment]

nk cuba lagi lah..hehehe

Saturday, July 14, 2012 10:20:00 PM Delete! [Reply Comment]

Yey! dah jadi :) terima kasih banyak2 =D

Sunday, July 15, 2012 1:45:00 AM Delete! [Reply Comment]

wah...nak try jugaklah...heheh...http://eimah2328.blogspot.com

Sunday, July 15, 2012 7:26:00 PM Delete! [Reply Comment]

tak jadilah dik.akak dah buat tapi masih dalaam i tab jer..huhu

Monday, July 16, 2012 5:50:00 PM Delete! [Reply Comment]

hai , macam mana nak besarkan kotak perkataan tu ?

Tuesday, July 17, 2012 5:45:00 PM Delete! [Reply Comment]

tak jumpa pun code width dia ? saya nak buat besar macam awak punya. boleh bagi codenya ?

Thursday, July 19, 2012 5:49:00 PM Delete! [Reply Comment]

Tak jadilah.. :(

Saturday, July 21, 2012 12:15:00 PM Delete! [Reply Comment]

kenapa xjadi ?? ^^

Sunday, July 29, 2012 8:06:00 PM Delete! [Reply Comment]

Klau untuk blogskin? Maaf, Alya nie menyusahkan je.

Thursday, August 09, 2012 5:22:00 PM Delete! [Reply Comment]

hm... saya tak faham.. maaf la..

Monday, September 24, 2012 8:31:00 PM Delete! [Reply Comment]

Boleh tak bagi tahu dengan lebih jelas. Tak faham.. Dah cuba banyak kali tapi tak jdi.. :(

Friday, November 16, 2012 8:09:00 PM Delete! [Reply Comment]

dalam tuto tu kena letak 'get this'. tapi kenapa kat blog nabila tak ada pun ayat tu..
macam mana nak hilangkan?

Monday, November 26, 2012 7:11:00 AM Delete! [Reply Comment]

mcm mane nak design dye jadi cantekk ?

Sunday, January 27, 2013 8:02:00 AM Delete! [Reply Comment]

kalau classic template punya mcm mana pulak ?

Wednesday, April 10, 2013 8:41:00 PM Delete! [Reply Comment]

Dah jadi ! x___x thx !

Thursday, April 18, 2013 3:44:00 PM Delete! [Reply Comment]

nabila nk mntk izin copy tuto ni bleh? dn akn dicredit to nabila. bleh? :)

Thursday, July 04, 2013 2:09:00 AM Delete! [Reply Comment]

jadik ! Yeay! but camne nak hilangkan yg bawah tuh ek ? memang akan ada yer ?

Saturday, October 05, 2013 2:32:00 PM Delete! [Reply Comment]

TRY BUAT TABBER WIDGET X MENJADI
dah refer tutorial lain gak..mmg still x menjadi...huhuhu...sedihnye

Tuesday, October 08, 2013 9:56:00 AM Delete! [Reply Comment]

YEAY JADI. NAMPAK KEMAS..MEKASEH ;D

Tuesday, February 11, 2014 3:41:00 PM Delete! [Reply Comment]

ikutan nyoba nih, biar blog tambah ringkes n enak dipandang kaya punya admin nabila :)

Sunday, April 20, 2014 6:30:00 PM Delete! [Reply Comment]

tq.. menjadi sangat...

Post a Comment
Related Posts Plugin for WordPress, Blogger...