Slot tutorial lagi!.
Kali ini nak ajar korang buat Jquery tab menu.
Jquery tab menu ni dapat menjimatkan ruang di blog korang sebab dia nampak compact. Kalau cursor korang sentuh jquery tab menu tu dia akan terbuka sendiri ( jatuh ke bawah ). Jadi blog korang nampak lebih smart.
Cara-caranya :
1. Sign in blogger > Design > Add Gadget > Html/JavaScript
2. Copy code di bawah dan paste ke dalam Html/Java Script
<style type="text/css">3. Korang boleh tukar :
h5 {
font-family: trebuchet-ms, arial, tahoma;
font-size: 13px;
padding: 0 0 1em;
font-weight:bold;
color: #000000;
}
.msg_list {
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
.msg_head {
padding: 5px 10px;
cursor: pointer;
position: relative;
background-color:#F95EA2;
margin:1px;
-moz-border-radius: 35px;
border-radius: 35px;
}
.msg_body {
padding: 5px 10px 15px;
background-color:#FFFFFF;
}
</style>
<script type="text/javascript" src="https://sites.google.com/site/jquery01/tabmenuaccordion.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
//hide the all of the element with class msg_body
$(".msg_body").hide();
//slides the element with class "msg_body" when paragraph with class "msg_head" is clicked
$("#firstpane h5.msg_head").click(function()
{
$(this).next("div.msg_body").slideToggle(700).siblings("div.msg_body").slideUp("slow");
});
//slides the element with class "msg_body" when mouse is over the paragraph
$("#secondpane h5.msg_head").mouseover(function()
{
$(this).next("div.msg_body").slideDown("slow").siblings("div.msg_body").slideUp("slow");
});
});
</script>
<div class="msg_list" id="secondpane">
<h5 class="msg_head">Tajuk 1</h5>
<div class="msg_body">
<center>
Code/widget Tajuk 1</div>
<h5 class="msg_head">Tajuk 2</h5>
<div class="msg_body">
Code/widget Tajuk 2
</div>
<h5 class="msg_head">Tajuk 3</h5>
<div class="msg_body">
Code/widget Tajuk 3</div>
</div>
#000000 untuk warna font
#F95EA2 untuk background jquery tab
#FFFFFF untuk background body dalam jquery
Code warna sila ke SINI
Tajuk - Korang punya tajuk utama cth : about me. bicara, arahan
Code/widget Tajuk - Code widget/Isi yang korang nak tulis dalam jquery. contoh korang boleh letak shoutbox.
Kalau korang nak bentuk macam di atas korang kekalkan code widget tersebut tapi kalau nak bentuk petak ( empat segi ) korang boleh buang code ini :
-moz-border-radius: 35px;
border-radius: 35px;
4. Save dan tengok hasilnya.
# Ada sesetengah template lambat pick-up widget ni. Dia macam terkeluar semua isi tapi korang jangan risau. Korang close blog beberapa minit dan try tengok semula..insyaallah menjadi. Selamat mencuba! Try buat dulu eh :)
xfaham . mcmne tuh ?
ReplyDeletecode tajuk tu yg mana ek?
ReplyDelete@Cik Lyza
ReplyDeleteNNt i akan try buat demo
code tu nak dpt dekat mane ekh ?
ReplyDeletekak..apesal sy buat like box fb tu die kelua separuh je ek?
ReplyDeleteke mmg cmtu mule2?
@cik najihah
ReplyDeletepastikan dia punya lebar widget tu di kecilkan
where I can find the widget code?
ReplyDeletewhere can I find the widget code?
ReplyDelete@Yellow Scarf
ReplyDeletecth mcm top comentar, gambar, ucapan..mana2 widget y suka..or clock widget..bileh cr di adi widget
alhamdulilah ,.. thanx akak :)
ReplyDeleteakk, saya dah try buat, tp lambat sgt dia nak tutup. even saya dah try close dia balik. tp dia tetap terbuka. mcmana ek?
ReplyDeletemcm mne nk dpay about me pnye code/widget????
ReplyDeletekak , kenape saye buat .
ReplyDeletedye terkeluar semua isi =__=
heee ~
Akak, saya punya kenapa keluar semua? Ke ada yang saya salah buat :/
ReplyDelete@emira
ReplyDeleteBiarkan ia seketika, kalau still mcm tu mybe ada y silap
@♥Cik Nurfarah♥
ReplyDeletesys , taax paam whoaa !
@Yellow Scarf
ReplyDeletekenapa saya buat ..bila cursor touch xnak turun.. how?
@Yellow Scarf
ReplyDeletekenapa saya buat ..bila cursor touch xnak turun.. how?
@Yellow Scarf
ReplyDeletekenapa saya buat ..bila cursor touch xnak turun.. how?
Assalamualaikum.. nak tnya.. knp sya buat tutorial 94 nie.. bile touch dgn cursor xnak trun pun... ? tolong plss
ReplyDelete@lavenderflower
ReplyDeleteWidget ni xsesuai utk your template
cik farah..
ReplyDeletebelog saya tu nak ikut toturial yang mn satu kalo nak bagi ada link kat atas header tu...help me???plssssss... :(
akak. mcm mana nak letak link ?
ReplyDelete@Cik Lyza Dah jadi tapi tak sama dalam gambar :(
ReplyDeleteDah jadi tapi tak sama dalm gambar :(
ReplyDeletehttp://fairytaledream-cometrue.blogspot.com