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

Catat Ulasan

35 Comments:

far_east berkata...
Teknik Buat Blog

trimas..dah cuba dan berjaya...

yahaya berkata...
Teknik Buat Blog

@far_eastterima kasih juga kerana sudi menggunakan tutorial disini.

far_east berkata...
Teknik Buat Blog

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

yahaya berkata...
Teknik Buat Blog

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

Alynn Notnot berkata...
Teknik Buat Blog

thanks for the tips :D

yahya faqih berkata...
Teknik Buat Blog

terimaksih atas infonya, mo cuba ah...

Yan berkata...
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

yahaya berkata...
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.

Natural Self berkata...
Teknik Buat Blog

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

♥ say love to nadz ♥ berkata...
Teknik Buat Blog

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

yahaya berkata...
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.

A Z I Q | J I R A berkata...
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 ?

yahaya berkata...
Teknik Buat Blog

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

Mahfuzah Husna Zulkifli berkata...
Teknik Buat Blog

Thanks a lot ya? =)

Yan berkata...
Teknik Buat Blog

yeahhhhhhhhh berjaya!!!
tenkiu for sharing this tutorial

Cik Aishah berkata...
Teknik Buat Blog

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

yahaya berkata...
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 berkata...
Teknik Buat Blog

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

yahaya berkata...
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.

aPIP berkata...
Teknik Buat Blog

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

yahaya berkata...
Teknik Buat Blog

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

adlina berkata...
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 berkata...
Teknik Buat Blog

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

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

Lissa. berkata...
Teknik Buat Blog

cnea nak bagi dea dok kat tepi blog uh ?

Pemilik Hati berkata...
Teknik Buat Blog

salam..xjadi pon

Areda berkata...
Teknik Buat Blog

background bleh tukar x?

yahaya berkata...
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Ɖツ © ♫ berkata...
Teknik Buat Blog

i take dis code :)

Misaki Shimizudani berkata...
Teknik Buat Blog

tak jd pown ..?

arryy berkata...
Teknik Buat Blog

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

REsin berkata...
Teknik Buat Blog

mantaaapp
sangat membantu bagi yg sdang belajar

Cik Angah Humaira berkata...
Teknik Buat Blog

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

syazwan ahmad berkata...
Teknik Buat Blog

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

Fokus Impian berkata...
Teknik Buat Blog

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

Khai 'Afifah berkata...
Teknik Buat Blog

thx :)