Saturday, March 2, 2013

29
Little Secrets

Tutorial : Gabungkan Widget/Gadget

Assalamualaikum (^__^)v
*kalau tak jawab dosa, kalau jawab AWESOME*


Rasanya dah lama gegiler beLog FakhRuru tak buat segmen tutorial hias-hias beLog utk korang-korang semua.. Huhuhu~ Nie pun dapat request daripada beLogger Kecik - Mieza Suhaini.. Jadi mOod tutorial hias-hias beLog datang balik.. Thanks to u! Hahaha!! (^__^)v


Hah! Nampak gambar kat atas tue? Kali ini saya nak tunjukkan korang-korang macam mana nak gabungkan widget/gadget seperti kat ats tue.. Dapat lar jimatkan ruang di sedebar korang-korang nanti (^__^)v


PROSEDUR
  • Dashboard --> Layout --> Add a Gadget --> Edit HTML
  • Copy code di bawah --> pastekan di ruang Edit HTML --> Save
<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 : 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>

  • Kemudian, letakkan kotak Edit HTML korang-korang tue di bawah Widget/Gadget yg korang-korang nak gabungkan.. Sebagai contoh seperti saya:-


  • PURPLE --> tukar dgn warna background yg korang-korang nak
  • MERAH --> berapa bilangan Gadget/Widget yg korang-korang nak gabungkan
  • Preview dulu & dgn automatiknya Widget/Gadget korang-korang akan bergabung bergantung kpd bilangan yg korang-korang letak lar
  • Save bila dah berpuas hati (^__^)v

Senang kan? Selamat Mencuba drp beLog FakhRuru
- lebih AWESOME daripada biasa -

...ARIOS AMIGOS...
(^___^)v

JGN SHY-SHY CAT UTK B'KOMEN (^_^)v

29 comments:

Fakhruru said...

@ANa Ahmad
same2!! ^^

Mieza S said...

terima kasih abg sayang <3

Nur Nainis said...

Jimat ruang, kemas sidebar kan kalau guna cara ni.

Fakhruru said...

@Mieza Suhaini
sama2 ksh adk kecik! hikhik =P

Fakhruru said...

@Nurul Aini
btoi3 *gya ipin

Unknown said...

owh lagu tu ka...hee..nice sharing bro..blh try pasneh..hee

soziyana said...

THANKS ALOT.

Syarafina Zaini said...

boleh try ni.. jimat space..

btw, jemput join segmen saya.. :)
http://www.ceritasyarafina.my/2013/03/segmen-bloglist-cerita-syarafina.html

Mieza S said...

abg abg yang comel. mengapakah tak jadi ?

Zam said...

perkongsian utk manfaat bersama~ thanks!

Fakhruru said...

@Mieza Suhaini
adk kcik dh ada gna bnda ni kt blog dh ker? tue yg owner + contct + shoutbox tue..

Fakhruru said...

@Zamani Abe
same2.. thnks jgk ^^

MalizaMah said...

Hooo thx share!!

Fakhruru said...

@Leeza dayasari [santai leeza]
most welkem ^^

AinNadhirah said...

alaa.... x jadi.. kenapa ek??

Fakhruru said...

@AinNadhirah
try skli lgi, dh kms kini kod

Mieza S said...

kalau dah guna untuk 1, takleh guna lagi eyh?

Mieza S said...

tapi kan lain? Tak same? yang owner + contact + shoutbox tu tak guna mcm y abg buat pun. xde guna pengganbungan widget y mcm abg buat pun

AinNadhirah said...

@Fakhruru tetap tak jadi... so saaaddddd

Aina Areen said...

wahh , nice tutorial :D

Mieza S said...

adik guna yang ni


http://www.kanvasdakwat.com/2013/03/tutorial-tab-menu-di-sidebar.html,


ni pon macam same je tokleh nak buat banyak-2. jap test coding yang abg na update

Fakhruru said...

@AinNadhirah
aiyoo!! ye ker tak jadi.. no idea lar.. sya pnya ok jer.. hukhuk3!!

Fakhruru said...

@AinNadhirah
aiyoo!! ye ker tak jadi.. no idea lar.. sya pnya ok jer.. hukhuk3!!

Fakhruru said...

@Mieza Suhaini
owh, cmtue yek.. better jgk! nti pon nk try coding adk kecik plk lar.. kot2 leh jgk..

klu coding yg abg nie xjdi jgk, nth lar.. abg nyer ok jer.. hukhuk

Fakhruru said...

@Aina Areen
thanks!! ^^

AinNadhirah said...

@Mieza Suhaini tq.. dah jadi yang kod Mieza Suhaini bagi...

AinNadhirah said...

@Fakhruru dah jadi da.. guna kod yang Mieza Suhaini bagi.. btw, tq sharing abg Fakhruru..

Fakhruru said...

@AinNadhirah
wokey!! good to hear dat!

✿Cik Cappuccino Latte ✿ said...

yana belajar tuto nieyh,,alhamdulillah berkat ilmu yg di share,,mnjadi jugak,,btw tQ yer

Related Posts Plugin for WordPress, Blogger...
Copyright @ boLey paNdAnG-paNdAnG, jGn cUri-cUri : FakhRuru