Tuesday, July 19, 2011

frebbies!!

assalamualaikum :)
so, ini adalah cara untuk membuat floating shoutbox :) credit to:sis nabeyla. sebelum tu, tau tak mcm mna nak masukkan shoutbox dalam blog? okay, di-request oleh queen.. tengok step nie.

  1. login shoutmix
  2. then, korang akan nampak macam nie..

nampak tak ada code dalam kotak yang saya merah kan tuh? ha, copy semua code tuh dan paste kan dalam html/javascript.. kalau tak tau kat mana html javascript tu, meh saya tunjukkan.. 
pergi dashboard > design > page element >add a gadget..lepas tu pilih yg nie..


save! kalau nak buat floating shoutbox, ikut pulak step bawah nie..
  • design>page element>add a gadget
  • copy codes nie:
<style type='text/css'>a.linkopacity img {filter:alpha(opacity=50);-moz-opacity: 0.5;opacity: 0.5;-khtml-opacity: 0.5;}
a.linkopacity:hover img {filter:alpha(opacity=100);-moz-opacity: 1.0;opacity: 1.0;-khtml-opacity: 1.0; }</style>
<div style='display:scroll; position:fixed; top:20px; right:-0px;'><br /><a class='linkopacity' href='http://wanhazel.blogspot.com/2010/07/tutorial-ajax-float-lebih-cepat-nak.html' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='get shoutbox ajax float'><img border="0" src="http://i1009.photobucket.com/albums/af215/wanhazel252909/iconlink.gif" /></a><br />
<!-- 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:absolute;
left:0;
top:0;
z-index:9000;
background-color:#000;
display:none;
}


#boxes .window {
position:fixed;
left:0;
top:0;
width:440px;
height:100px;
display:none;
z-index:9999;
padding:10px;
}
#boxes #wanhazelshoutbox {
background:url() no-repeat 0 0 transparent;
width:355px;
height:410px;
padding:20px 0 20px 0px;
}
#closesb {
padding:4px 0 0 0;
}
#author {
padding:8px 0 0 140px;
}
</style>
<ul><center> <a href="#wanhazelshoutbox" name="modal"><img src="URL GAMBAR YANG KORANG SUKA" border="0" /></a> </center> </ul>
<div id="boxes">
<!-- Start Shoutbox -->
<div id="wanhazelshoutbox" class="window">
<!-- Begin ShoutMix - http://www.shoutmix.com --><center>






MASUKKAN CODE SHOUTMIX/SHOUTBOX KORANG KAT SINI!


</center><!-- End ShoutMix -->
<div id="author">
<div id="closesb"><input type="button" value="CLOSE" class="close" />
</div></div><!-- End of Ajax Shoutbox -->
<!-- Mask to cover the whole screen -->
<div id="mask"></div></div>
<!-- End of Ajax Popup Shoutbox--></div></div>
okay then boleh save! yang warna merah bertulis url gamba tu, boleh tuka ngan freebies kat bawah nie :)


http://i1134.photobucket.com/albums/m605/fionapelik3/cats3.png
http://i1134.photobucket.com/albums/m605/fionapelik3/6652998-cute-pink-kitten.png
okay, semoga berjaya..

23 comments:

  1. hey DEQ ! thank YOUU very muchh !
    dh lame akk carikk neyy . heehee
    akk amek gmba yg borak sini tu tauuu . thanks again

    ReplyDelete
  2. shoutmix pun Cik T-Pah tak de, haha~

    ReplyDelete
  3. ambik satu yee ;) terima kasih for the tutorial ! :)

    ReplyDelete
  4. adek mcm mane nk cari kod shoumix kite ea ?

    ReplyDelete
  5. AKK , tnx ehh ! adek amek stu freebies akk yg borak sini ! cmeyy ! ahh , anyway , adek ltak banner akk kt blog adek, bye !

    ReplyDelete
  6. kaka napa tak buleyh copy .. !kka buat no right click .. ! HUUURRMMM ~ ~

    ReplyDelete
  7. kaka .. napa tak buleyh nk copy .. kaka buat no right click .. SHIITT . ! mcm mner nie kaka >!

    ReplyDelete
  8. hai, macam mane nak letak icon smile yg cute2 mcm dalam tutorial ni?

    ReplyDelete
  9. trimas untuk tuto nie ye...^^...

    ReplyDelete
  10. thanx ya . sudi2 laa follow my blog
    tentangaku-hidupaku.blogspot.com

    ReplyDelete
  11. Kitee ambil satu yang borak sini .

    ReplyDelete
  12. Hii. Nak tanya sikit boleh? Kalau nak login shoutmix , lepas dah sign up , dia cakap kena bayar. Did you get it free or did you pay for it? - TQ

    ReplyDelete

Thank you for dropping by, I really appreciate it.
I'll check out your blog and entries as soon as possible, don't forget to visit me again ^^

*ANONS WILL BE IGNORED