18.2.11

TUTORIAL : COMBINE SHOUTBOX & FOLLOWER

SELAMAT MALAM & SELAMAT HARI JUMAAT.

hohoho..korang dah kenyang?dah makan?solehah blom.hehe..slalu buat tutorial
masa perut tngah lapar .aduhai..kesian.kesian..hahaha.okei2..tak nak ckp banyak
..mlm nie nak buat tutorial combine chatbox & folower dlm shoutbox korang kat
tepi..aaa??xtau mcm mane?/alaa..korang tengok je shoutbox EBT sekarang nie.
ada kan?kan?kan?solehah letak folower + chatbox dalam tu sekali..jum..mulakan.
are you ready to rockk!!?grr...rock ke??haha..okeh2.jum..mulakan..kita buat sama sama.. :)

nota : tutorial nie untuk autohide shoutbox sahaja.. HARAP MAKLUM.hehe..

LANGKAH 1
  • mula mula.sediakan koding folower box & cbox/shoutmix korang.kode shoutmix/cbox.senang je nak dapat kan?kan??kod folower??ha.meh solehah bagitau kat sapa2 yang belum tau .
  • masuk google.search GOOGLE FRIEND CONNECT.pastikan sign in tu menggunakan email yang di gunakan untuk blog anda.. :)
  • dah jumpa GOOGLE FRIEND CONNECT.tengok kat list left sidebar.ada nama blog korang.klik blog korang tu & klik ADD THE MEMBERS GADGET kat right sidebar.faham ke tak?haha..nie.contoh.solehah bagi gambar..
  • dh klik.korang adjust laa apa yg patut.. 
    Width:
      . rows of face.. color.. semua tu lah.hehe
  • klik generate code.korang akan dapt kod untuk folower box korang.

LANGKAH 2
  • okeh.dah dapat kode shoutmix/cbox & folower korang kan??simpan baek baek kat ctu jap.sekarang,kita nak combine dua dua benda tu dalam satu shoutbox.

LANGKAH 3
  • pegi DASHBOARD > DESIGN > PAGE LEMENT > ADD GADGET > HTML/JAVASCRIPT. ambik koding nie.paste kt dalam gadget tu okei. :)

LANGKAH 4


<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}

* html #gb{position:relative;}

.gbtab{
height:74px;
width:99px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-DHeg1fXVwrYSlwyK-j_DFrE56-PVNYt0oy2lWcZHGo8olaWuFGStSidPJWE7uApHSwxNRpUTqRv54QtVbSl7-HECEdK4uj4b2P0G9x-PcwY8Y2IMfaeRDWaD_CrdV13EUUC34FU_uF5p/s1600/button.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #000000;
background:#ffffff;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 99-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">

KOD FOLLOWER BOX ANDA

KOD SHOUTMIX / CBOX ANDA

<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (99-gb.offsetWidth).toString() + "px";
</script>


LANGKAH 5
  • make sure korang adjust la ckit size height & width shoutmix/cbox korang tu.nnti kalu dh nmpak besar sangat.mcm kurang cantek la ckit kot.hehe..
LANGKAH 6
  • dah siap copy & paste?save gadget..tengok menjadi ke tak??

p/s : sapa yang bejaya buat,.tepuk tangann..hehe  :) tutorial malam nie mcm panjang cket..nnti solehah buat pendek.korang tak faham pulak.jangan pening pening tau..yg tak dapat tu.jangan malu jangan segan. bgtau solehah..saya bersedia membantu anda..hohoho



24 comments:

Mime MF said...

sy dah try buat yg ni...
menjadik...
suker sgt...
xie xie!!!;)

♥ solehah ♥ said...

@nursyamime

hehe..yeye..tepuk tgn..ngee :)

[sutera kasih] said...

yeyeyeye menjadikkk hehe tepuk tgn

Unknown said...

alhamdulillah...
menjadikkk...
thanx solehah :D:D

♥ solehah ♥ said...

@sya fiqa

hehe.samasama syafiqa :)

athirahassin said...

solehah... nk tnya... nti klong dh xnk bt floating follower ni kan... cena nk masuk kat sidebar balik? follower tu ilang x?

♥ solehah ♥ said...

@athirah

klau xnak buat folower float lagi..
delete je koding folower tu..

then nak letak kat sidebar..
add gadget mcm biasa pun boleh jugak..hee :0 fhm x??

athirahassin said...

tp bil follower tu ilang x?

♥ solehah ♥ said...

@athirah

tak ilang pun..kalau nak yg senang..
athirah ambik koding folower yang dah buat kat GOOGLE FRIEND CONNECT td..
then..add gadget HTML/JAVASCRIPT..
paste koding tu dlm..

then letak kat sidebar..hehe :)
siap..ngee

athirahassin said...

okay.. lega skit.. thanx nway

♥ solehah ♥ said...

@athirah

okei.samasama athirah..hehe :)

SURIANI ISMAIL said...

thanx..... mmg criii yg mcm nieee nyee. ngeee

rayne rawt rawt said...

MENJADI.. ALHAMDULILLAH..
THANKS

Zierwa Zainal said...

da lme cri tutorial ni...jd tp nk adjust bpe ea??jd plik sikit..

♥ solehah ♥ said...

@ZiErWa zAiNaL

adjust width shoutbox sama ngn width kotak folower :) hehe

QasehMayna said...

Jadi ! Tenkiu ^^
tp cmner nk tukar yg kt tepi uw ek?.. yg tulis shoutbox and follower uw?..cmner nk tukar design lain ? blh x??

♥ solehah ♥ said...

@QasehMayna

boleh tengok tutorial yg nie okei/..hee

http://empayarbintangtiga.blogspot.com/2011/01/tutorial-image-pada-shoutbox.html

aieza faidzal said...

ta menjadi . sumpahh gerammm . mcmne nakk buat ?

Erfan said...

thanx for the tuto

NORHIDAYAH said...

nape ta jadi pon... yg friend connect uh ta kuar. sakit r... huhu


http://920norhidayah423.blogspot.com

zaza said...

waaaaa menjadi lahh sys.... tengsss :)

Leys Amad said...

Mintak izin apply tutorial yer...tqvm :)

Nur Afrina said...

macam mana nak ubah ayat
'shout box and folower' tu ea? :)

NuRuL aFiQaH said...

x jdi.. :(

 
Design by AH|SW |Empayar Bintang Tiga 2013