Last updated!

09 June 2011

TUTORIAL BLOG - Membuat Slide Float Untuk Shout Box

salam bloggers kawan-kawan..
hari ini apit nak siapkan request seorang blogger baru..
dah lama dah dia request cuma apit tak sempat buatkan..
sibuk siapkan request photoshop dulu..
apa yang dia requestkan?
bagaimana nak buat kotak shout kat tepi..
oo macam belog apit itu..
so tunggu apa lagi..
mari kita belajar okay!

1. Log In > Dashboard > Design > Add A Gadget > HTML/Java Script
2. Copy Code di bawah ini dan Pastekan dalam HTML/JavaScript..

<style type="text/css">

#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:350px
width:140p
float:left;
cursor:pointer;
background:url('GAMBAR SHOUTMIX ANDA') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #00000;
background:#F5F5F5;
padding:10px;
}
</style>

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

CODE SHOUTMIX 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 = (140-gb.offsetWidth).toString() + "px";
</script>

CODE SHOUTMIX ANDA - kawan-kawan amik code Shout Mix kawan-kawan dan pastekan di situ okay!
GAMBAR SHOUTMIX ANDA - letak la URL gambar untuk Slide Float. Cara dapatkan URL gambar klik sini.

3. Selepas itu save. Kalau nak letak atas ke, bawah ke godek-godek sendiri okay.

SELAMAT MENCUBA!

Salam by Hafizzi Aziz

15 orang comel komen:

syufaa said...

ouhhh..tutorial yg beshhh!
ehh ehhh..nk dgr radio leh dtg cini yer?
hehehehe..=)

asfz lily said...

wahh...tutorial yang best...
mekaseh shifuu..keh3

Hanis Atikah said...

like@\!!!!!!!!!!!!!!!!!!! thanks yer...

Hafizzi Aziz said...

@syufaa : thanks..haah..nak dgr radio era meh datang sini k..hihi..

Hafizzi Aziz said...

@asfz lily : hihi..sama2..hihi..

Hafizzi Aziz said...

@Hanis Atikah : welcome..hihi

yasminsharQ said...

thanks apit :) name min hot kt atas tuh :D

yasminsharQ said...

thanks apit :) name min hot kt ats tuh :D

Hafizzi Aziz said...

@yasmin : oh yaka..hihi..selamat mencuba..

♥ LuRveLyAmiera ♥ said...

nak tanye ni..kalau dah buat tp tak nmpak gmbr edit kat mana erk.?puas dah godek tak jadi juga..

Hafizzi Aziz said...

♥ LuRveLyAmiera ♥ : godek2 kat width dan height dia..gambar edit jgn la besar2 sangat..

♥ LuRveLyAmiera ♥ said...

hokay2x..thanks..^_*

HanaChan said...

cmne nk dptkn code shoutmix? -.-'

Faiz Hilmi said...

bro xley pon :'(

Muzicboy said...

yo bro xley un.....pas2 nk copy yg mne stu sbenarny??dh berbelik aq buat....blh ajarkan aq x???