September 3, 2012

Tutorial : Cara Membuat Widget Jquery Slider


ehem , assalamualaikum.


maaf, lambat update , azza baru balik aja dari pusat membeli belah sekitar kota bharu, pehh , letih kemain, rugi tak bawak camera, tak tahu pulak, bila balik aja dari jamuan rumah saudara, abang terus offer pergi kota bharu, semangat nie, ikot ajalah , 3 jam dekat sana, balik laa, sungguh memenatkan, pehhh .


apa apa pun , kita start dulu dengan tutorial kedua, cara nak masukkan widget Jquery Slider , jeng3 , azza sahaja namakan dia Jquery Slider, nama sebenarnya azza tak tahu eh , widget nie pun azza tak ingat amik kat mana , maaf ye sifu ! apa apa pun , jom terjah ! ((:

pertama : log in blog > dashboard > design > add a elemet > html javascript




dalam petak hodoh ituu korang masukkan code comel ini :

<style type="text/css">
h5 {
font-family: Calibri;
font-size: 13px;
padding: 0 0 1em;
font-weight:bold;
color: #ffffff;
}
.msg_list {
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
.msg_head {
padding: 5px 10px;
cursor: pointer;
position: relative;
background-color:#F6CEF5;
margin:1px;
}
.msg_body {
padding: 5px 10px 15px;
background-color:#F4F4F8;
}
</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">Nama Widget Code 1</h5>
<div class="msg_body">

code 1

</div>

<h5 class="msg_head">Nama Widget Code 2</h5>
<div class="msg_body">

code 2


</div>

<h5 class="msg_head">Nama Widget Code 3 </h5>
<div class="msg_body">

code 3

</div>

<h5 class="msg_head">Nama Widget Code 4 </h5>
<div class="msg_body">

code 4


</div></div>


sila ubah apa yang telah azza BOLDkan , kalau korg nak masukkan 3 widget, buang yang keempat tu, kalau nak masuk lima dan lebih tambah aja code itu. boleh paham ? kalau tak paham , boleh tanya ea , selamat mencuba ^^,



thanx reading (:
Lots Of Love,

11 Comment:

syusyada said...

thanks azza :)) dah lame carik tuto nih :)) nak cuba la .. kalau tak jadik sy tanye azza okeh :D

.m y z. said...

mcm tau2 je tengah mencari tutorial ni! hehe. nice info :DDD thanks !

NAZIRAH MOKHTAR said...

thanks 4 the information. loike it . =)

Azza Firza said...

@syusyada

hehehe okehh , gudluck :)

Azza Firza said...

@.m y z.

heheeh :) okehh

Azza Firza said...

@NAZIRAH MOKHTAR

okeh :)

qameera said...

Kenapa x boleh ?

Azza Firza said...

@qameera

erkk erkkk

KelVin_BloGger said...

azza,,, blog mu bagus, kapan2 nak tengok blog aku, http://kelvin-razblogger.blogspot.com/

salam from indonesia..

Azza Firza said...

@KelVin_BloGger

thankss

Hazriq Hamdan said...

assalamualaikum.. leh tanya x? tuto ni untuk ap eh? ahha sowwy tanya soalan bdoh

Related Posts Plugin for WordPress, Blogger...
 

All Rights Reserved by Azah Rahaman