Live Demo
How to Use it?
- Enter Your Message in Chat Box
- Click on Send Button
Codes of Playing Facebook Notification Sound
1. <head> Section codes which includes the Sound
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#chatData").focus();
$('<audio id="chatAudio"><source src="widget.ogg" type="audio/ogg"><source src="https://dl.dropboxusercontent.com/u/63968842/notify.mp3" type="audio/mpeg"><source src="widget.wav" type="audio/wav"></audio>').appendTo('body');
$("#trig").on("click",function(){
var a = $("#chatData").val().trim();
if(a.length > 0)
{
$("#chatData").val('');
$("#chatData").focus();
$("<li></li>").html('<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOFki91CYCZsxsjSndFr6-XSW7lX_68X0L82Got2fVtaEwoglOjFhkbeJaKaWFG1qaeX186yddsV9BF7DDO3Kyo5rchhLh8Bdgb4N8XzHMnUssG9173M5QUgjJj31byF6WrTwmseSmMupm/s83/hemant+verma.png"/><span>'+a+'</span>').appendTo("#chatMessages");
// Scrolling Adjustment
$("#chat").animate({"scrollTop": $('#chat')[0].scrollHeight}, "slow");
$('#chatAudio')[0].play();
}
});
});
</script>
2. CSS Codes which includes the Styles of Chat Box
<style>
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
}
</style>
3. HTML codes which include the body part.
<h2>!..........Chat Box of Widget Generators..........!</h2>
<div id='chatBox' >
<div id='chat'>
<ul id='chatMessages'>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOFki91CYCZsxsjSndFr6-XSW7lX_68X0L82Got2fVtaEwoglOjFhkbeJaKaWFG1qaeX186yddsV9BF7DDO3Kyo5rchhLh8Bdgb4N8XzHMnUssG9173M5QUgjJj31byF6WrTwmseSmMupm/s83/hemant+verma.png"/><span>Hello Friends</span>
</li>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOFki91CYCZsxsjSndFr6-XSW7lX_68X0L82Got2fVtaEwoglOjFhkbeJaKaWFG1qaeX186yddsV9BF7DDO3Kyo5rchhLh8Bdgb4N8XzHMnUssG9173M5QUgjJj31byF6WrTwmseSmMupm/s83/hemant+verma.png"/><span>How are you?</span>
</li>
</ul>
</div>
<input type="text" id="chatData" placeholder="Enter Your Message" />
<input type="button" value=" Send " id="trig" />
</div>
Important Info....!
- This link https://dl.dropboxusercontent.com/u/63968842/notify.mp3 includes the sound of Notification
- This link https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOFki91CYCZsxsjSndFr6-XSW7lX_68X0L82Got2fVtaEwoglOjFhkbeJaKaWFG1qaeX186yddsV9BF7DDO3Kyo5rchhLh8Bdgb4N8XzHMnUssG9173M5QUgjJj31byF6WrTwmseSmMupm/s83/hemant+verma.png includes the image
Great and very professional website .
ReplyDeleteSir can you help me how to build this kind of website ?
thank you .
@Jr RobThanks for your visit and comment. I'm happy to see your interest in the blogging.
ReplyDeleteYou need to first Sign-up with blogger and create a blog | Click Here to know How to Create a Blog
Then Install a Template | Click here to know How to Install Template in Blogger
After it you can easily customize your blog and make it as Professional also can use our widgets and Tutorials. Freely
Thanks & Regards,
Hemant Verma
Hi hemant this is great widget.
ReplyDeletecan u tell how can we use it in wordpress
Nice widget, But i think that a pro blogger will use ads instead of this chat box
ReplyDeleteRegards,
Skillblogger
@Deep Sinhabro this tutorial is not about to add this in blogger, this is only that how can we create sound like Facebook Chat Notification.
ReplyDelete@Numan MalikThanks for your visit and comment, Bro I already mention every section of codes that which code will paste where in your template. Like which codes will come under <HEAD> section, which will comes under <BODY> section and which will come in <CSS> part
ReplyDeleteGreat job...
ReplyDeleteCheck this out... Best 5 Websites To Make Funny Cartoon Image of Youself
How did you create that demo chat box ?I would like to a chatbox with facebook notification to my blogger blog.What chatbox do you use
ReplyDelete@asar tehutiI'm not using any chat box be'coz blogger comment system is very good for interaction and I have gave all the codes of creating a chat box with fb sound notification.
ReplyDeleteFine Love here: http://www.123lovebook.com/
ReplyDeletewhen i try the chatbox, nothing happen :(
ReplyDeleteHi, just desired to let you know, I enjoyed this blog post. It had been funny. Carry on posting!
ReplyDeletecomment pirater un compte facebook
Well, I have got the best information from here the site is fully stuffed with the knowledgeable information.
ReplyDeletebubblegum casting
This comment has been removed by a blog administrator.
ReplyDeleteCongratulations guys, quality information you have given!!! webspinuk
ReplyDeleteHi Gliter,
DeleteThanks for your comment and compliment.
I appreciate that, Keep visit daily
Thanks
This is so amazing post about the chat box with facebook notifications as we all know that Facebook Chat is extremely awesome. gold promotion
ReplyDeleteNo wonder why you receive countless of feedbacks.Book of Ra
ReplyDelete