Cara pasang shoutbox melayang

shoutboxDalam artikel sebelum ini saya ada menerangkan cara bagaimana cara memasang shout box secara tersembunyi pada tepi paparan blog.Untuk kali ini pula agak berlainan kerana shoutbox yang diklik akan muncul dibahagian tengah  paparan blog dengan kesan gelap dan muncul secara perlahan lahan.Cara membuatnya juga agak mudah kerana  cuma perlu masukkan pada widget sahaja.
Cara memasangnya:

1.Masuk ke dashboard-klik pada Layout dan pilih add a gadget



2.Pilih HTML/Javascript

Dan masukkan kod ini:

<!-- Start flying Shoutbox  by ybl -->
<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 ybl
$('a[name=ybl]').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 tbbHeight = $(document).height();
var tbbWidth = $(window).width();
//Set heigth and width to tbb to fill up the whole screen
$('#tbb').css({'width':tbbWidth,'height':tbbHeight});
//transition effect
$('#tbb').fadeIn(1000);
$('#tbb').fadeTo("slow",0.8);
//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();
$('#tbb').hide();
$('.window').hide();
});

//if tbb is clicked
$('#tbb').click(function () {
$(this).hide();
$('.window').hide();
});

});
</script>
<style>a {color:#ffffff; text-decoration:none}
img { border: none; }
#tbb {
position:absolute;
left:0;
top:0;
z-index:9000;
background-color:#000;
display:none;
}
#ddt .window {
position:fixed;
left:0;
top:0;
width:440px;
height:200px;
display:none;
z-index:9999;
padding:20px;
}
#ddt #yblshoutbox {
background:url(https://lh5.googleusercontent.com/-nDP_P-QqX54/TWoQRu88UxI/AAAAAAAABaU/oJ_e6l8Kdg0/s1600/shout.gif) no-repeat 0 0 transparent;
width:272px;
height:460px;
padding:60px 0 20px 15px;
}
#ttp {
padding:2px 0 0 0;
}
</style>
<ul><center> <a href="#yblshoutbox" name="ybl"><img src="https://lh3.googleusercontent.com/-orZIIwB83bI/TWoQjbTHR6I/AAAAAAAABaY/6epCnQ_6Ar8/s512/button.gif" border="0" width="128" height="58" /></a> </center> </ul>
<div id="ddt">
<!-- Start Shoutbox -->
<div id="yblshoutbox" class="window">

LETAKKAN KOD SHOUTBOX DISINI

<div id="ttp"><input type="button" value="Close" class="close" style="background: #0066FF; color: #ffffff;"/><a href="http://teknikbuatblog.blogspot.com/2010/12/cara-pasang-shoutbox-melayang.html"><font size="1">get this</font>
</a></div></div><!-- End Shoutbox -->
<div id="tbb"></div></div>
<!-- End of flying Shoutbox  by ybl -->
Kemudian klik save
#Jangan lupa masukkan kod shoutmix pada ruangan diatas.Ubahkan kod shoutmix/Cbox contoh width="240" height="380" supaya memenuhi ruang bingkai.

contoh kod shoutmix

Post a Comment

35 Comments:

mrs eyza said...
Teknik Buat Blog

trimas..dah cuba dan berjaya...

sibersensasi said...
Teknik Buat Blog

@far_eastterima kasih juga kerana sudi menggunakan tutorial disini.

mrs eyza said...
Teknik Buat Blog

saya dah ubah saiz macam yg disuruh..tp jadi sama jer xder beza pun huhuhu ker silap buat?

sibersensasi said...
Teknik Buat Blog

@far_eastlupa save kot...saya cuba lagi ok..atau ada silap ..

Lucy S. said...
Teknik Buat Blog

thanks for the tips :D

Yayack Faqih said...
Teknik Buat Blog

terimaksih atas infonya, mo cuba ah...

Yan said...
Teknik Buat Blog

ish ish.. konfius jap cemane nak komen kat entri kamu ni..

nak buat shoutbox melayang/duk kat tepi ni.. sesuai tu shout box ke? klu follower ke bleh??

byk tul coding nak kena belek ni hehehe..

salam jom vote bby akak.. arini last day http://www.mayaqarmyla.net/2010/12/jom-vote-adik-dhuwa-haziq.html

sibersensasi said...
Teknik Buat Blog

@Yan

kod cuma copy jer...lepas tu letak kod shout pada letak kod shout disni.Untuk follower blh tapi kena modified sikit pada button dan juga kotak utama.

jefry said...
Teknik Buat Blog

best jugak ni...nak trylah.thank u yahya..

Anonymous said...
Teknik Buat Blog

xbole pun . :( hmmm . post kat blog saia k

sibersensasi said...
Teknik Buat Blog

@♥ say love to nadz ♥saya tak pasti maksud post kat blog saja k.saya sendiri dah cuba ok.kalau tertinggal satu tanda ; mmg tak boleh..kalau gelap saja ada kod tak lengkap.

s a h a b a t said...
Teknik Buat Blog

Sy ambik dan pjm :D .. Boleh x lau sy tag url blog awk bserta nama awk pd enteri sy yg akan dtg :D ?

sibersensasi said...
Teknik Buat Blog

@A Z I Q | J I R Aok boleh saja..

Mahfuzah Husna Zulkifli said...
Teknik Buat Blog

Thanks a lot ya? =)

Yan said...
Teknik Buat Blog

yeahhhhhhhhh berjaya!!!
tenkiu for sharing this tutorial

Cik Aishah said...
Teknik Buat Blog

saya xblh buat..da cube ikut arahan...tp xjd...jd yg biase je..TOLONG!!!!!!!!!

sibersensasi said...
Teknik Buat Blog

@Cik Aishahtak pasti sebab apa.mungkih ada kod templateyg menyebabkan tak boleh.dah byk yg buat ok..dan saya pun check juga tiada masaalah code

Hana said...
Teknik Buat Blog

tak boleh pun >.< dia tak duduk elok2 .. camna ehh ?

sibersensasi said...
Teknik Buat Blog

@Hana
ubah ukuran padding:60px 0 20px 15px;

nombor mula tu 60px jarak dari sebelah kiri, 0 tu atas, 20 px kanan dan 15 px bawah.kena ubah ubah ukuran.

Unknown said...
Teknik Buat Blog

knp saya punye mcm nie ehh? cbe g kt blog sy & click kt shoutbox 2..? http://www.terdesaknetwork.co.cc/

sibersensasi said...
Teknik Buat Blog

@aPIP
ok cuma agak lambat sikit keluar.butang share yg terapung tu elok remove saja...

adlina said...
Teknik Buat Blog

alah jadi tu jadi tp...ada prob sketla. napa bila klik je kt shoutbox terus kuar hitam kat tepi..try tgk blog sye..

http://adlinaabdrahim.blogspot.com/

adlina said...
Teknik Buat Blog

tolong pegi ke blog saye..http://adlinaabdrahim.blogspot.com/

n try click shoutbox saye..nape kat sebelah kanan blog jd gelap?

Cik Lysa said...
Teknik Buat Blog

cnea nak bagi dea dok kat tepi blog uh ?

AwekZ Butterfly said...
Teknik Buat Blog

salam..xjadi pon

maMataufiQ said...
Teknik Buat Blog

background bleh tukar x?

sibersensasi said...
Teknik Buat Blog

@Areda
boleh tukar background.cuma buang kod warna pada background untuk jadikan transparent.kemudian letakkan kod gambar
mcm saya letak kat cbox:

<div style="background:url(http://3.bp.blogspot.com/-XyT01yPPS6E/TmXSZQa4SVI/AAAAAAAABvE/h0mSD3FgHOM/s1600/bluesback.jpg) repeat;"40">
KOD CBOX DISINI

</div>

gantikan url bagi imej dalam tanda kurungan ( ) diatas

◕_◕ BudArxNǝrƉツ © ♫ said...
Teknik Buat Blog

i take dis code :)

Nurul Athiqah said...
Teknik Buat Blog

tak jd pown ..?

Anonymous said...
Teknik Buat Blog

cm ner nie????da jd tp xde pown ruangan komen,email, n nick????

REsin said...
Teknik Buat Blog

mantaaapp
sangat membantu bagi yg sdang belajar

Anonymous said...
Teknik Buat Blog

saya ambil tutorial ini untuk dijadikan contoh tutorial di blog saya ya,thanks.

Syazwan Ahmad said...
Teknik Buat Blog

dia tulis di situ ..,
get this widget n close jew ,,
mcm x jadi jew ..,

sibersensasi said...
Teknik Buat Blog

@syazwan ahmadkena letak kod untuk shoutmix pada bahagian text warna oren

Unknown said...
Teknik Buat Blog

thx :)