Tutorial | Membuat Sound Notification menggunakan JQuery

Tutorial membuat notification sound ( suara pada saat mengirim pesan/chat). Tutorial ini menggunakan jQuery dan HTML5 audio tag, selain tentunya menggunakan CSS juga biar tampilannya gak "ambyar" :D Oiya, kalo mau download source code-nya, ada di bawah..jadi baca dulu tutorialnya sampai selesai.
Oke gak perlu basa-basi lagi, langsung saja ke contoh source codenya ya :D

Pertama kita siapkan dulu kode HTML nya :

<div id='chatBox'>
<div id='chat'>
<ul id='chatMessages'>
//di bawah ini untuk contoh pesan/chat sebelumnya
<li>
<img src="small.jpg"/><span>Halooo</span>
</li>

</ul>
</div>
<input type="text" id="chatData" placeholder="Message" />
<input type="button" value=" Send " id="trig" />
</div>

Selanjutnta kita kasih script JavaScript, eh maksud saya jQuery :


Terakhir, kita kasih CSS :
* { padding:0px; margin:0px; }
body{font-family:arial;font-size:13px}
#chatBox
{
width:400px;
border:1px solid #000;
margin:5px;
}
#chat 
{
max-height:220px;
overflow-y:auto;
max-width:400px;
}
#chat > ul > li
{
padding:3px;
clear:both;
padding:4px;
margin:10px 0px 5px 0px;
overflow:auto
}
#chatMessages
{
list-style:none
}
#chatMessages > li > img
{ width:35px;float:left
}
#chatMessages > li > span
{
width:300px;
float:left;
margin-left:5px
}
#chatData 
{
padding:5px;
margin:5px;
border-radius:5px;
border:1px solid #999;
width:300px
}
#trig 
{
padding: 4px;
border: solid 1px #333;
background-color: #133783;
color:#fff;
font-weight:bold
}

Itu tadi tutorial Membuat Sound Notification menggunakan JQuery, semoga bermanfaat. Jika ingin mendownload contoh source code jadi-nya, sila menuju link berikut :
http://www.mediafire.com/?ffv7h5f9y3nqetw

Comments :

8 comments to “Tutorial | Membuat Sound Notification menggunakan JQuery”
ratri mengatakan...
on 

ini notification apa notofication om ??

LaraBlog mengatakan...
on 

@Ratri : ngg..nganu,, salah ketik :-| Udah diganti tp urlnya ga mau ganti :v

Pro Evolution Soccer 2013 Full mengatakan...
on 

Thank you very much

Miss Devi Andrayani mengatakan...
on 

mas klo kya fb notifikasinya trus ada suara nya gmana

Cimploh mengatakan...
on 

Ijin coba bro

Allgamepcworked mengatakan...
on 

Ini mah bener2 keren mas

Gratisdownlloadgame mengatakan...
on 

Joss kaka

Gamingdlfree mengatakan...
on 

Mantap sekali

Posting Komentar