design shoutmix yang cute

Langkah Satu

Sebelum korang buat apa kerja editing.. korang kena pilih gambar yang korang rasa cantik untuk shout box korang.. korang search je kat Google image then download..  Aku nasihatkan korang cari gambar yang berformat  PNG supaya dapat disesuaikan dgn background korang tu.. macam untuk tutorial ni aku pilih gambar bear yang cute kat bawah ni untuk dijadikan shoutMix.

Langkah Kedua

Apa yang korang perlu buat untuk langkah seterusnya ialah.. korang edit gambar tersebut mengikut cita rasa korang.. selalunya aku akan gunakan tools yang senang digunakan untuk kerja-kerja edit ni. macam Photoscape dan picasa3.. Bagi yang pandai guna adobe (AI) atau Photoshop  tu lagi la bagus.. 

Untuk gambar bear ni aku just letakkan text yang sesuai je untuk shot box yang akan di edit tu nanti.

Langkah Ketiga

Lepas je korang selesai edit gambar.. korang perlu letakkan gambar korang tu kat hosting.. pada yang sesiapa yang takda hosting sendiri macam aku ni.. korang boleh host kan gambar korang tadi kat service hosting gambar percuma macamImageHack dan picasaWeb.

Untuk widget yang ni aku host kan gambar menggunakan imagehack.. ianya free dan korang hanya perlu register je.. (tak sampai 5minit pun..), kemudian simpan link gambar yang dah di hostkan tadi untuk kerja-kerja edit widget pula..

Langkah Empat

Ap yang korang perlu buat disini ialah..  Log in blog => Dashboard => Layout => Add A Gadget. Seterusnya klik pada HTML/Javascript.

Salin code kat bawah ni dan paste kan pada kotak  HTML/javascript yang korang baru create tadi.. 

<style type="text/css">
#gb{
position:fixed;
top:20px;
z-index:+100;
}
* html #gb{position:relative;}

.gbtab{
height:119px;
width:100px;
float:left;
cursor:pointer;
background:url('Masukkan Url gambar anda') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #666666;
background:#F5F5F5;
padding:1px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 115-w) : moveGB(115-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+")", 5);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()">   </div>
<div class="gbcontent">
Masukkan Kod 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 = (100-gb.offsetWidth).toString() + "px";
</script><!-- End ShoutMix -->

• Lepas korang copy kod diatas.. korang kena edit sikit..pada tulisan (Masukkan Url gambar anda)  tu  korang kena paste kan Url gambar yang korang hostkan pada hosting tadi

• Pada Tuliasan (Masukkan Kod ShoutMix Anda) korang kena Paste kan kod asal ShoutMix korang

• lepastu korang kena Adjust tulisan yang aku highlight kan warna biru ni ikut nilai pixel gambar yang korang hostkan tadi.. dan bagi (100-gb.offsetWidth) korang kena ikut pixel width

Langkah Terakhir

Save kan saja.. jika tidak ada error massage.. .dan click view..  hasilnya... sebuah shoutMix yang korang sendiri design.. yang bestnya shoutMix korang tu lain dari orang lain punya.. and just senyum jelah.. ^_^

Pada siapa yang nak Cute bear yang aku edit tu ambil jelah kat Url dibawah ni ye

http://img685.imageshack.us/img685/4245/cutebear.png

Selamat mencuba.. dan sebarang masalah boleh tanya kat komen ya.. tada..

sumber:http://neizalyez.blogspot.com/2010/09/tutorial-design-shoutmix-anda.html