memasang shoutbox tersembunyi

shoutbox tersembunyi
Shoutbox adalah suatu  widget yang penting ada di  blog kita,Dengan widget seperti ini membolehkan kita   berinteraksi dengan pengunjung blog kita. Dengan wujudnya interaksi ini akan menjalinkan hubungan  antara pemilik blog dan pengunjung blog dan akhirnya widget ini juga akan mendatangkan traffic untuk blog kita. 
Mungkin anda ingin menjimatkan ruang semasa memasang Shoutbox pada blog.Tip ini akan membantu anda untuk menampilkan shoutbox di halaman tanpa  memakan space/tempat, kerana widget ini  disembunyikan di samping Body blog.

Ikuti langkah berikut

1.Klick pada Design dan Pilih Add Gadget
2.kemudian pilih html/javascript dan Copy dan Paste kod di bawah ini


<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://i219.photobucket.com/albums/cc282/garam63/SHOUT.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">

Letakkan kod ShoutBox anda disini

<div style="text-align:right">
<a href="http://teknikbuatblog.blogspot.com/2010/04/shoutbox-adalah-suatu-widget-yang.html"><font size="1"">get this </font></a><a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div></div>


3.Tingginya  boleh diubah dengan menukar nilai 50px, sesuaikan dengan kehendak anda, dan gantikan perkataan yang berwarna  merah dengan script/kod shoutbox,bahagian teks hijau boleh ditukarkan dengan imej yg dikehendakki
4.kemudian klik save.

Post a Comment

61 Comments:

heLL_Boy said...
Teknik Buat Blog

kok g bisa..??

positiveAlpha said...
Teknik Buat Blog

subhanallah.. sangat mudah & kini blog saya bertambah kemas! Terima Kasih, my blogger friend Yahaya! :)

.:|kamaryeah|:. said...
Teknik Buat Blog

pernah guna...
tp setelah agak lama timbul isu xnmpk...
mksdnye certain web browser xjmpe...
kenapa ye??

yahaya said...
Teknik Buat Blog

@.:|kamaryeah|:.kod ni ada javascript,rasanya kat internet explorer kot ada problem,atau kod pada template yg membuatkannya tak muncul.saya tak berapa pasti.

geekz36 said...
Teknik Buat Blog

nak tanya macam mana nak alter tulisan SHOUT tu. misalnya nak tukar tulisan SHOUT tersebut kepada gambar yang mempunyai resolusi 160 x 160 px. gambar telah sedia ada di photobucket.

yahaya said...
Teknik Buat Blog

tukar saja link gambar pada teks warna hijau kat atas

cikmimmie said...
Teknik Buat Blog

berjaya..alhamdulillah..thanks atas ilmu nie..

kim_HasNuL said...
Teknik Buat Blog

salam.. camner nk tukar shout tuh ke warna lain.. nk cari dmane ye warna yang lain dari kod yg dberikn tuh?

yahaya said...
Teknik Buat Blog

@kim_HasNuL
Log in ke shoutmix…ambil setting..
Style and color..ubah setting kat situ.Boleh juga ambil load from preset dan klik save setting

fiqsan said...
Teknik Buat Blog

tq cantik

biskut said...
Teknik Buat Blog

sy berjaya buat utk shouthide tuh but sy nak tau camner nak ubah nama shoutbox tuh kepada nama yg sy pilih sendiri...

nanti diterjah kembali blognya.

yahaya said...
Teknik Buat Blog

@biskutnak tukar gambar tepi shout cuma ganti pada kod hijau tu alamat imej yg nak diletak..

farah jaamat said...
Teknik Buat Blog

thank yer..thank sgt2..simlpe n mudah paham..

Aina Rosli said...
Teknik Buat Blog

salam.nk tya neh..dh buat..tpi mcm mna nk tkr imej yg SHOUT tuh?mmg dh tkr..tpi ble preview hya sparuh je imej yg kluar

yahaya said...
Teknik Buat Blog

@Aina Roslitukar pada kod hhijau masuk url gambar kat situ..gambar separuh..tak pasti sebabnya..saya tgk kat blog cik tak ada pula..

dhilla nazli said...
Teknik Buat Blog

ta jadi pun~~ ta boley na bukak

LadyzuL ⎝⏠⏝⏠⎠™ said...
Teknik Buat Blog

wah2 syoknya....dah bleh...terima kasih ye....

Apple Sweet said...
Teknik Buat Blog

dh buat dh tima kasih for the info

IkHwAnI lUv said...
Teknik Buat Blog

nk tukar shoutbox kepada gambar cmner???

yahaya said...
Teknik Buat Blog

@IkHwAnI lUvmasuk url gambar pada tempat letak kod shoutbox

IkHwAnI lUv said...
Teknik Buat Blog

0oo,ok i'll try...uhuh.thnkz

IkHwAnI lUv said...
Teknik Buat Blog

xjd..erm xperlh..guna jerlh shoutbox tu pun..hehe

Fiizya Aurora said...
Teknik Buat Blog

mcm mana nk cancel shoutbox ini dalam blog

Fiizya Aurora said...
Teknik Buat Blog

cam ner nk cancel shoutbox kat blog???please help me...!!!

yahaya said...
Teknik Buat Blog

@Fiizya Auroraremove kod yang dimasukkan

fatihahilmi :) said...
Teknik Buat Blog

Thank you :) .
halal yee

fieyka syukri said...
Teknik Buat Blog

salam . sy nak tanya . kod yg kat atas tu mesti copy & paste semuanya ea ? termasuk 'letakkan kod shoutbox anda disini' ?

yahaya said...
Teknik Buat Blog

@fieyka syukrikena salin semua kod dan masukkan

Fika Syukri said...
Teknik Buat Blog

thanx (:

AdiaLuze said...
Teknik Buat Blog

MEkasih dik..Akak dah buat dan berjaya !!!! Suka sangat :)

FaLieNA si giLER koREAN.. said...
Teknik Buat Blog

nk tnyer,cne yg letak picture kt link hijau tu?cmne nk dptkn picture tu???

Fiizya Aurora said...
Teknik Buat Blog

@yahaya
kat maner???
tak jupe pon..

yahaya said...
Teknik Buat Blog

@Fiizya Aurorakat sebelah tepi kanan

redz said...
Teknik Buat Blog

bro yahaya nak tnya, kalau
guna cbox jadi x widget shoutbox
ni tersembunyi. or kena guna
platform shoutmix je?

yahaya said...
Teknik Buat Blog

@redz
CBOX pun boleh juga cuma masukkan kod pada bahagian teks merah diatas

Cik Aishah said...
Teknik Buat Blog

xjadi pun.......:(

natashaalesyaahmadnawawi said...
Teknik Buat Blog

adehh, mcm mana na tukar 'shoutbox' kepada gmbr lain huh ?

yahaya said...
Teknik Buat Blog

@natashaalesyaahmadnawawitukar url pada teks hijau diatas

cinta siswi said...
Teknik Buat Blog

nape siswi xjdk??
shoutbox xhide pom..=(
dia kuar bsr gedabak kt blog..

Fitrah Ayu Resources said...
Teknik Buat Blog

terima kasih FAR dah ambik kod ni...

060709 ^^ said...
Teknik Buat Blog

it's work .. tengs for helping :)

Aishiteru ZhaFiza said...
Teknik Buat Blog

ada x shoutbox yg bcorak???

Cik Siti Rahmah Bahrom said...
Teknik Buat Blog

mcm mane nk buat pix dkt s.box tu full eh after kite tuka??

Dinie Asyraf said...
Teknik Buat Blog

camne nk tukar behavior n tempat shoutbox ni ek...???
asalnyer kn tersembunyi kt belah kanan n keluar dari kanan ke kiri...
nak tukar jd tersembunyi kt tempat widget n keluar kebawah...

yahaya said...
Teknik Buat Blog

@Dinie Asyrafcuba shoutbox melayang

Muhd Alish Syaufiq Zulkarnain said...
Teknik Buat Blog

mcm mane nak buat kod nie letak kat tajuk slide bar.. maksud sy jd kan slide bar 2 boleh buka/tutup

yahaya said...
Teknik Buat Blog

@Muhd Alish Syaufiq Zulkarnain
mungkin tutorial...ini boleh membantu....http://teknikbuatblog.blogspot.com/2010/09/cara-membuat-butang-buka-dan-tutup.html

ayo bermimpi said...
Teknik Buat Blog

KALO MAU DIPINDAHIN KESEBELAH KIRI BAGAIMANA?

Syaza Afiqah said...
Teknik Buat Blog

macam mana nak buat ikon shoutbox tu?

CikEmoNia said...
Teknik Buat Blog

nape sy nak tuka imej xley ek?? huhu

yahaya said...
Teknik Buat Blog

@CikEmoNiamungkin ada salah pada kod url gambar...

Nazirah said...
Teknik Buat Blog

@yahaya

shout box tu dah ada..tp mn ruangan nak komen..xda pun..tlg tgkkan..http://nazirah-pieceofmind.blogspot.com

misz maria said...
Teknik Buat Blog

sesuai utk sy yg bru nk blajar buat blog.tQ (^ ^,)

fiona : said...
Teknik Buat Blog

thanks ! tp tak boleh ke tukar shoutbox tu kpd colour purple. sy buat tak buleh. hewhew

yahaya said...
Teknik Buat Blog

@fiona :
saya x pasti nak tukar warna yg mana satu...kalau yg saya beri ni warna biru saja..

Cik Tetra said...
Teknik Buat Blog

yeahh!! jadila..heee..thanksss.. :)

Hawa said...
Teknik Buat Blog

tq....so much der

Fajar Muhammad R said...
Teknik Buat Blog

Terimakasih banyak atas semua widget nya gan........

Amatullah said...
Teknik Buat Blog

Useful tuts and nice one from widget blogger.

Thanks and Salam
Amatullah @ Tips Trik Blogging

ZulQhairulNizam Mohammed said...
Teknik Buat Blog

thank...cara yang mudah dan berkesan...thank g..

cikx bummbum gemox said...
Teknik Buat Blog

terima kasihh