Tutorial Cara Buat Widget Penyambut Tetamu

click to zoom

Hai all...maap lah hari ini lewat pulak kasi tutorial terbaru...
tadi koz buzy sikit dengan kerja...okey hari ini koz nak penuhi permintaan cik Nisa kita yang hendak tahu cara untuk membina widget ini...Cory sebab lambat tunaikan permintaan ini ^_^ ...Cara-caranya seperti berikut:-

Langkah 1

Layout>Page Elements>Add a Gadget>HTML/Javascript

Langkah 2

Kemudian korang copy paste code di bawah

<script type = "text/javascript">
//
var days = 730; // days until cookie expires = 2 years.
var lastvisit=new Object();
var firstvisitmsg="Terima Kasih Kerana Sudi Berkunjung Ke Laman Ini. Welcome!";
lastvisit.subsequentvisitmsg="Selamat Datang! Anda Kali Terakhir Buat Nakal Di Sini Pada <b>[displaydate]</b>";

lastvisit.getCookie=function(Name){
var re=new RegExp(Name+"=[^;]+", "i");
if (document.cookie.match(re))
return document.cookie.match(re)[0].split("=")[1];
return'';
}

lastvisit.setCookie=function(name, value, days){
var expireDate = new Date();

var expstring=expireDate.setDate(expireDate.getDate()+parseInt(days));
document.cookie = name+"="+value+"; expires="+expireDate.toGMTString()+"; path=/";
}

lastvisit.showmessage = function() {
var wh = new Date();
if (lastvisit.getCookie("visitc") == "") {
lastvisit.setCookie("visitc", wh, days);
document.write(firstvisitmsg);
}

else {
var lv = lastvisit.getCookie("visitc");
var lvp = Date.parse(lv);
var now = new Date();
now.setTime(lvp);
var day = new Array("Sun", "Mon", "Tues", "Wed", "Thur", "Fri", "Sat");
var month = new Array ("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");
var dd = now.getDate();
var dy = now.getDay();
dy = day[dy];
var mn = now.getMonth();
mn = month[mn];
yy = now.getFullYear();
var hh = now.getHours();
var ampm = "AM";
if (hh >= 12) {ampm = "PM"}
if (hh >12){hh = hh - 12};
if (hh == 0) {hh = 12}
if (hh < 10) {hh = "0" + hh};
var mins = now.getMinutes();
if (mins < 10) {mins = "0"+ mins}
var secs = now.getSeconds();
if (secs < 10) {secs = "0" + secs}
var dispDate = dy + ", " + mn + " " + dd + ", " + yy + " " + hh + ":" + mins + ":" + secs + " " + ampm
document.write(lastvisit.subsequentvisitmsg.replace("\[displaydate\]", dispDate))
}

lastvisit.setCookie("visitc", wh, days);

}

lastvisit.showmessage();

</script>

Langkah 3

Kemudian korang ganti/ubah ayat pada code yang berwarna merah kepada ayat yang korang suka...

Save dan lihat hasilnya...

Tambahan...Disebabkan ada permintaan yang ingin tahu macam mana hendak letak gambar di atas widget ini (seperti gambar di atas)Koz akan tunaikan...
okey cara-caranya senang sahaja

copy code di bawah

<a href=">
<img src="LetakLinkGambarKorang" />
</a>


Kemudain letak link gambar korang dekat code ayat "LetakLinkGambarAnda"
code ini letak diatas code widget tersebut...
camat mencuba :D
Ranking: 5

Comments:30

09 June, 2010 13:15

wahhh tenkiu soooo much En kozz..... sungguh cepat kamoo reply permintaan ku... ^_* wink wink tenkiu tenkiu

09 June, 2010 13:20

@Nisa
welcome...^^ jangan lupa centerkan ok...bru nmpk kemas :D

09 June, 2010 13:25

naper aku nyer tak jadik?

09 June, 2010 13:42

ok da jd...tenkiuuuuuuu.....bgus la org yg x kedekut ilmu mcm koz ni.... ^_^

09 June, 2010 14:00

wahhhhhh..comei2

09 June, 2010 14:55

weyh, kalo gambo laen boleh ke??

09 June, 2010 15:13

thanks for sharing!!! love it...but if i wan other icon, i mean the cartoon there. how can i change?

09 June, 2010 15:21

@Syat0za

gambar tu xde yang ade cuma perkataan tu aje..kalau nak truk pun boleh aje...

09 June, 2010 15:58

hah,? boleh?? camner?? share2 la ciket..ngee~
tu hah @v!vi@n pon tnye..haha

09 June, 2010 16:54

@Syat0zaokey permintaan anda koz dh tunaikan^^

09 June, 2010 17:52

last question, yg langkah 3, yg ada link tuh..nk letak mana dalam link langkah ke 2?? hohohoho

09 June, 2010 18:30

@Syat0za
code gambar tu ker???taruk atas code penyambut tetamu tu....

pad code penyambut tetamu tu ade code ayat warna merah tukatkan la ayat dier...ikut kesukaan anda...

09 June, 2010 18:39

0oooh.. wokeyh2.. TQ Koz Pro!! =B

09 June, 2010 20:55

kozumi mama ade permintaan lain plak...muahaha byklah cekadak mama ni kan...mcmana nk buat box utk keseluruhan entry..? contoh yg mama maksudkan tu try tgk kat blog sis ni ya
http://mahligaicintaku.blogspot.com/

12 June, 2010 09:32

@kozumi_ro

macam mana nak centerkan gambar2 dekat sidebar ye?

12 June, 2010 16:22

@AiN Zoh senang jek...taruk code center cth:-

Bende yang ko nak centerkan

TarukPerkataanCenter=center

13 June, 2010 13:58

:l: ngeeeeee

13 June, 2010 13:58

cabtekk kn gigi ku yg puteh berseri ngeeeee :l:

yg nie jadii... thank koz hehe

30 June, 2010 23:17

tq 4 sharing :)

02 July, 2010 17:24

tak jadik ponn.. Y_Y

06 July, 2010 10:35

comel,pulak.....
aku suka gambar kat bahagian header(kotak2)
keep up your creativity

24 July, 2010 13:05

nape masa dier xkuar???tolong3!!!!:b:

24 July, 2010 13:13

hehe3..dh jadi..huhu3

05 August, 2010 22:04

saya nk amik code nie ye~
thankz a lot~

13 August, 2010 23:23

cmne na letak code link gmba toh?

29 September, 2010 08:50

waaaa
naper xmo kuar gambor pon?
just kuar perkataan jer
da wat da cam tutorial ni tp gambar still tak kuar
help me

06 December, 2010 23:34

nana pon buat tak jadi..dah 3 kali dah ni :(

10 December, 2010 15:06

x kuar gambar pon...
adoihh..cam ne...! tolong! :b:

Post a Comment

Komehlah dan klik G+ di atas sekali okey^^

 
Google PageRank Checker Powered by  MyPagerank.Net