Ajax Floating Shoutmix

Views
1. Log in > Dashboard > Design > Add Gadget > Html/JavaScript
2. Paste below code to the html/javascript

<!-- AJAX SHOUTMIX START -->
<div style='display:scroll; position:fixed; top:0px; right:-0px;'>
<br />
<a class='linkopacity' href='http://miraahussin.blogspot.com/' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='By Miraa Hussin'></a><br />
<!-- Start Ajax Popup Shoutbox -->
<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:absolute;
left:0;
top:0;
z-index:9000;
background-color:#000;
display:none;
}
#boxes .window {
position:fixed;
left:0;
top:0;
width:440px;
height:200px;
display:none;
z-index:9999;
padding:20px;
}
#boxes #miraahussin {
background:url(https://lh3.googleusercontent.com/-UVm-0Cz4_Mc/TYBYV9XDoFI/AAAAAAAAATg/e9D0uiSk_fQ/s1600/mas-kuning.png) no-repeat 0 0 transparent;
width:275px;
height:480px;
padding:56px 0 0px 0px;
}
#closesb {
padding:2px 0 0 0px;
}
#author {
padding:8px 0 0 168px;
}
</style>
<center> <a href="#miraahussin" name="modal"><img src="YOUR SHOUTMIX ICON" border="0"/></a> </center>
<div id="boxes">
<!-- Start Shoutbox -->
<div id="miraahussin" class="window">
<!-- Begin ShoutMix - http://www.shoutmix.com -->
<center>
YOUR SHOUTMIX CODE GOES HERE</center>
<!-- End ShoutMix -->
<div id="author">
</div>
<center>
<div id="closesb"><input type="button" value="CLOSE" class="close" />
</center>
</div>
<!-- End of Ajax Shoutbox -->
<!-- Mask to cover the whole screen -->
<div id="mask"></div></center></div>
<!-- End of Ajax Popup Shoutbox-->
<!-- AJAX SHOUTMIX END --></div></div>
3. Save , preview
Red : Your shoutmix code
Blue : You shoutmix icon
Purple : You can use your own picture or choose one of below picture.

Shoutbox Frame
http://4.bp.blogspot.com/-yQkyX_Rg2vM/TVUdl5noeuI/AAAAAAAAB9Q/_xh8aapY_44/s1600/stroberi.gif
http://1.bp.blogspot.com/-loLYnFEY0f0/TVUdiq0UXhI/AAAAAAAAB9I/bSnQEnZrWnk/s1600/cb1tn8.gif
http://4.bp.blogspot.com/-87LJW8Cdc38/TVUek0j93uI/AAAAAAAAB-o/ValT6FRZsgM/s1600/4978679104666.gifF4978679104666.gif
http://2.bp.blogspot.com/-1uwAlyiq9eo/TVUeGT9yyGI/AAAAAAAAB9w/z19TkktyIPI/s1600/48f422d74238e.gif
Credit : Lethaa

Saya tahu korang baik , tolong saya klik skali boleh ? Terima kasih :')

Domain dan Hosting oleh Hosting Rajawali - Social blogging in Malaysia Oneblogsocial

6 comments:

  1. saya guna tuto no.. thanks :)

    ReplyDelete
  2. saya ambil satu warne hitam..

    ReplyDelete
  3. Mira.. Macam mne nk ubah frame tu bg panjang? sebab frame2 atas ni pendek la.. xmcm URL frame yg dh sedia kt code mira tu..

    ReplyDelete
  4. cam ne dengn shotmix icon ??

    ReplyDelete
  5. shoutmix icon tu boleh tengok kat tab GOODIES miraa ye . kat sana ada .

    ReplyDelete
  6. tak boleh pun nak buat . tak reti laa . tapi teringin sbb cantik

    ReplyDelete

Terima kasih kerana sudi membaca , jangan lupa tinggalkan komen :)
Fikir semula sekiranya korang ingin meninggalkan komen lucah, ugutan, mengancam, identiti palsu, dan menyakitkan hati. Baca AKTA 588, AKTA KOMUNIKASI DAN MULTIMEDIA 1998. Oh, sebelum tu, tengok lah site awesome
ini