Cara buat Ajax Float Shoutbox | ˙·٠•●♥ mia suka berangan™ ♥●•٠·˙


Assalamualaikum. saya kini mengambil tempahan untuk make up Dinner, Photoshoot, Tunang dan Nikah sekitar Melaka, Negeri Sembilan, Selangor dan Kuala Lumpur. Email me oke : gardisareyou@yahoo.co.uk

Join ChurpChurp Jom!

Monday, January 9, 2012

Cara buat Ajax Float Shoutbox

Dicatat oleh m i a di 10:30 AM
Assalamualaikum..


hi semua,

lamanya tak buat tutorial kan. ini semua sebab Shoutmix buat hal. jadi terus berposak-posak cari alternatif lain dan yess, saya jumpa yang lebih AWEsome. oke mungkin Ajak Float Shoutbox ni ramai da buat, but mungkin ada lagi yang tak tahu kot hehe ayat penyedap hati.


gegurl punya!


oyea, kalau nak tengok tutorial sorok shoutbox kat tepi blog, tengok SINI. mari cekkidaud cara nak buat ajax float shoutbox ni ya. cara sama jugak macam nak masukkan widget baru.

oke baeklah, mari mulakan ya..

1. Design > Add and Arrange Page Elements > Add a gadget > HTML/JavaScript

2. copy (ctrl+c) code ni, dan paste (ctrl+v) pada kotak html/javascript tadi.

<div style='display:scroll; position:fixed; top:70px; right:-0px;'>

<!-- Start Ajax Popup Shoutbox by -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script>
$(document).ready(function() {
//select all the a tag with name equal to modal
$('a[name=modal]').click(function(e) {
//Cancel the link behavior
e.preventDefault();
//Get the A tag
var id = $(this).attr('href');
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set heigth and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
$(id).css('top', winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);
//transition effect
$(id).fadeIn(2000);
});
//if close button is clicked
$('.window .close').click(function (e) {
//Cancel the link behavior
e.preventDefault();
$('#mask').hide();
$('.window').hide();
});
//if mask is clicked
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});
});
</script>
<style>
img { border: none; }
#mask {
position:center;
left:0;
top:0;
z-index:9000;
background-color:#000;
display:none;
}
#boxes .window {
position:fixed;
left:0;
top:0;
width:271px;
height:480px;
display:none;
z-index:9999;
padding:20px;
}
#boxes #wanhazelshoutbox {
background:url(BACKGROUND SHOUTBOX) no-repeat 0 0 transparent;
width:271px;
height:480px;
padding:56px 0 20px 5px;
}
#closesb {
padding:2px 0 0 0;
}
#author {
padding:8px 0 0 168px;
}
</style>
<center> <a href="#wanhazelshoutbox" name="modal"><img src="ICON SHOUTBOX" border="0" /></a> </center>
<div id="boxes">
<!-- Start Shoutbox -->
<div id="wanhazelshoutbox" class="window">
<!-- Begin ShoutMix - http://www.shoutmix.com/ --><center>




CODE SHOUTBOX ANDA



</center>
<!-- End ShoutMix -->
<div id="author">
</div><div id="closesb"><center><input type="button" value="Close" class="close" /><center>
</center></center></div></div><!-- End of Ajax Shoutbox -->
<!-- Mask to cover the whole screen -->
<div id="mask"></div></div>
<!-- End of Ajax Popup Shoutbox--></div>


3. klik save, then save lagi kat bahagian atas dan view blog..
.....

yang Merah tu, masukkan url background yang korang pilih.
pilihan background tengok SINI

yang HIJAU tu, masukkan url icon shoutbox yang korang pilih.
pilihan icon tengok SINI

yang BIRU tu, masukkan code shoutbox yang korang pilih.
pilihan shoutbox tengok SINI




yeah da siap..ehehee, selamat mencuba uols. 
nak tengok tutorial lain, klik SINI.
~wassalam~

pst : tutorial ni untuk yang tak tahu oke..pada yang tahu dan pakar..diam..diam..kredit untuk wanhazel

da buat?komen sini yaa..terima kasih.

6 ulasan:

akuamir on January 10, 2012 at 1:58 AM said... BALAS

haha,,, baik.. saya diam.. ...... :O
cube test tgok FIBOX pula, best cantik lagi kemas.. :)
blogwalking singgah2 sini ye,, jangan mare.. heee :'D

mia on January 10, 2012 at 6:21 PM said... BALAS

@akuamir

hehhee, da try da.oke jgk, just ada smthing yg xsesuai sket kot..a

Lina Nadhilah on March 23, 2012 at 1:22 AM said... BALAS

follow tuto.. nice!

m i a on April 14, 2012 at 8:27 PM said... BALAS

@Lina Nadhilah

silakan dear :)

BALQIS HARYANI on September 17, 2012 at 8:49 AM said... BALAS

Thanks for this tuto . Menjadi lah :D

Cik Yana on June 14, 2013 at 10:45 PM said... BALAS

tq mia. i follow tuto ni. jd. terbaikk :)

 

˙·٠•●♥ mia suka berangan™ ♥●•٠·˙ Dikuasakan Oleh Blogger Template Touch Up by Mia Adnan