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 komen:

syufaa said...

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

Asfz said...

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

Hanis Atikah said...

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

FIZGRAPHIC said...

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

FIZGRAPHIC said...

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

FIZGRAPHIC said...

@Hanis Atikah : welcome..hihi

Anonymous said...

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

Anonymous said...

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

FIZGRAPHIC said...

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

amiera said...

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

FIZGRAPHIC said...

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

amiera said...

hokay2x..thanks..^_*

HanaChan said...

cmne nk dptkn code shoutmix? -.-'

Miekun said...

bro xley pon :'(

MukhlisRazali said...

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