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