Hiding Shoutbox : Coding and Customization

Salam semua.

Ada beberapa kengkawan yang bertanya tentang shoutbox daku yang boleh hide dan unhide tu. Pastu logonya customize sendiri, tak guna yang dah disediakan.

Mula2 nak bagi credit kepada orang yang mula2 buat coding ni. Coding asalnya diambil di Cyclonmaster : Tips How to Create Showhide Shoutbox.

Kalau ikut yang asalnya tu shoutboxnya akan kelihatan seperti di bawah ni:

 

Tapi kat blog daku ia telah bertukar rupa menjadi begini :

Mode Hiding

Mode Unhide

Bezanya hanya jenis shoutmix dan juga gambar yang digunakan kat situ. Dari gambar Shoutbox kaler hijau jadi gambar daku sendiri kaler biru bulat2 hehehehe.

Macamana nak buat macam ni? Ikut step ye.

Step 1 : Copy dan paste coding dalam korang punya blog. Caranya pergi ke design>add widget pastu paste kan dulu code di bawah ni.

<style type="text/css">

#gb{

position:fixed;

top:50px;

z-index:+1000;

}

* html #gb{position:relative;}

.gbtab{

height:100px;

width:30px;

float:right;

cursor:pointer;

background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuO0fxe1Aey-KuevzpW6OlOy6iOeQSzXk_GFVu8_J8eYQoRgOePyZKqPl8S8x2HnmW7J-8HwamB-SZcsn2ba6RrqR-9NRXpAQJ83bNhWNFk6JrXOwWDCYX-rxPNo7d6e806iWE6d5wg_DR/s320/tabs.png')
no-repeat;

}

.gbcontent{

float:right;

border:2px solid #666666;

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.left = x.toString() + "px";

if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}

}

</script>

<div id="gb">

<div class="gbtab" onclick="showHideGB()"> </div>

<div class="gbcontent">

>>>>>>>>>>>>DELETE LINE NI DAN PASTE KOD SHOUTMIX ANDA KAT SINI<<<<<<<<<<<<

<div style="text-align:left">

<a href="javascript:showHideGB()">

[close]

</a>

</div>

<script type="text/javascript">

var gb = document.getElementById("gb");

gb.style.left = (30-gb.offsetWidth).toString() + "px";

</script>

Step 2 : Masukkan code shoutbox korang yang didapati di mana2 atau yang dah sedia ada tu dan replacekan dengan perkataan >>>>>>>>>>>>DELETE LINE NI DAN PASTE KOD SHOUTMIX ANDA KAT SINI<<<<<<<<<<<< yang ada di dalam coding di atas.

Kalau sampai di sini sahaja shoutbox korang dah pun boleh digunakan dengan cara hide dan unhide sebijik macam yang dalam print screen yang pertama tu (yg gunakan gambar shoutbox kaler hijau tu). Kalau korang rasa dah ok dah tu.. maka sampai di sini sahaja. Bagi mereka yang nak buat gambar yang customize sendiri pulak.. sila teruskan ke step 3.


Step 3 : Cipta gambar customize anda sendiri.
Yang bahagian ni sebenarnya daku takleh nak ajar. Korang pepandai sendiri nak buat gambar cemana.. letak gambar sendiri ke.. bentuk apa.. warnanya apa. Pendek kata semuanya mengikut kesukaan korang lah. Daku sarankan kalau korang buat sendiri sebaik2nya saiz tak lari jauh dari saiz asal shoutbox kaler hijau tu. Apa yang daku buat.. daku amik shoutbox kaler hijau tu.. pastu buang gambo shoutbox tu.. kemudian daku resizekannya width nya daku resize kepada 300%, heightnya 150% dari saiz asal sebabnya daku nak buat bentuk bulat. Pastu jangan lupa ye.. save dalam format png.

Dah siap ke logo/gambar anda?


Step 4 : Upload gambar/logo yang dah siap.

Bahagian yang ini selalunya takde masalah sebab korang pun ada photobucket bagai kan. Cuma untuk memmudahkan daku cadangkan korang buat satu posting kosong yang tidak akan dipublishkan. Dalam posting tu korang upload kan gambar/logo korang tadi tu. Bila sudah korang right click kat gambo tu dan pilih "copy link location". Pastu save la posting tu tapi jangan publish pulak eh. Hehe.

Seterusnya korang pergi ke bahagian background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuO0fxe1Aey-KuevzpW6OlOy6iOeQSzXk_GFVu8_J8eYQoRgOePyZKqPl8S8x2HnmW7J-8HwamB-SZcsn2ba6RrqR-9NRXpAQJ83bNhWNFk6JrXOwWDCYX-rxPNo7d6e806iWE6d5wg_DR/s320/tabs.png') yang ada dalam coding di atas tu. Korang highlight semua yang daku highlight putih tu kemudian right click dan pilih paste. Maka address gambar baru akan terbit kat situ dan bukan lagi yang macam kat atas ni.


Step 5 : Ubah coding
Kalau korang tengok sampai step tadi tu.. korang punya gambar tidak akan kelihatan keseluruhannya.. especially kalau gambar/logo baru korang tu lebih besar dari logo shoutbox kaler hijau yang asal tu. Oleh yang demikian.. korang perlu mengubah sendikit nilai pada coding.

Mula2 korang kena tahu apa saiz korang nyer gambar/coding. Cam daku punya 140 x 126. Jadi daku ubah di bahagian2 seperti yang di bawah ini...

.gbtab{

height:100px; <----- daku tukar ini kepada 126 atau 130 (genapkan)

width:30px; <-----daku tukar ini kepada 140 atau 150

var gb = document.getElementById("gb");

var w = gb.offsetWidth;

gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0); <---daku tukar 30-w kepada 150-w DAN 20-w kepada 150-w. (Tukarkan nilainya sama dengan width logo korang).

gb.opened = !gb.opened;

var gb = document.getElementById("gb");

gb.style.left = (30-gb.offsetWidth).toString() + "px"; <---daku tukarkan 30-gb.offset tu kepada 150-gb.offset (sama dengan nilai width)

</script>

Pastu cuba korang save dan tengok sendiri kat blog korang.. menjadi ke tak? Kalau jadi pelik.. maknanya ada yang korang dah salah buat. Tapi kalau ikut betul2 step2 yg daku ajar ni insya-Allah boleh jadi. Kalau ada apa2 pertanyaan boleh juga nak tanya kat sini.


Selamat Mencuba!!!