Tutorial Cara Buat Widget Post Bergerak

Hai all..selamat pagi...hari ini koz akan berkongsi dengan korang ilmu baru yang koz baru dapat...Tutorial pada hari ini berkenaan membuat widget post entry bergerak...cara nak buat agak mudah...jadi ikuti langkah-langkah di bawah...

Langkah 1

Login blog >Layout> Page Elements>Add a Gadget>HTML/JavaScript

Langkah 2

Copy paste code di bawah

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style media="screen" type="text/css">
<!--
#spylist {
overflow:hidden;
margin-top:5px;
margin-bottom:-20px;
padding:0px 0px -20px 0px;
height:350px;
}
#spylist ul{
width:220px;
overflow:hidden;
float:center;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:200px;
padding: 2px 2px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:center;
height:70px;
overflow: hidden;
background:#FFFFFF;
border:1px solid #ddd;
}
#spylist li a {
text-decoration:none;
color:#A32929;
font-size:12px;
height:0px;
overflow:hidden;
margin: 0px 0px;
padding:0px 0px 0px 0px;
}
#spylist li img {
float:left;
margin-right:10px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:0px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:0px;
font-family:Tahoma,Arial,verdana, sans-serif;
}
.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:0px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}
-->
</style>
<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://img15.imageshack.us/img15/5439/noimagex.png";
imgr[1] = "http://img15.imageshack.us/img15/5439/noimagex.png";
imgr[2] = "http://img15.imageshack.us/img15/5439/noimagex.png";
imgr[3] = "http://img15.imageshack.us/img15/5439/noimagex.png";
imgr[4] = "http://img15.imageshack.us/img15/5439/noimagex.png";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 70;
thumbheight = 70;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = " ";
showPostDate = false;
showcomments = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 20;
home_page = "http://NamaBlogKorang.blogspot.com/";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src="http://sites.google.com/site/testingsahaja/recentpostslide.js?attredirects=0&d=1" type="text/javascript"></script>
</div>

Langkah 3

Pada code ayat berwarna merah,masukkan nama blog korang

save dan lihat hasilnya...

Camat mencuba:D

Tutorial Cara Buat Hide/Show Shoutbox Versi Simple

Hai all...petang ini koz akan memenuhi pemintaan "mamaGee"

Maap ye koz lambat tunaikan permintaan mamaGee^^....

Sebenarnya koz dah buat tutorial ini dalam versi comel...tapi memandangkan ada yang nak jenis simple koz akan edit kembali code tersebut kepada yang asal..
jadi jika inginkan yang jenis simple teruskan megikuti langkah-langkah berikut:-

Langkah 1

Login blog >Layout> Page Elements>Add a Gadget>HTML/JavaScript


Langkah 2


Korang copy dan paste code di bawah:-

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

.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://img411.imageshack.us/img411/6496/hijau.png') no-repeat;
}
.gbcontent{
float:left;
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.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">

MASUKKAN CODE SHOUTBOX DISINI

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

Langkah 3

Kemudian korang masukkan code shoutbox korang pada perkataan
" MASUKKAN CODE SHOUTBOX DISINI "

dah masukkan save dan tengoklah hasilnya...

Pada code yang berwarna hijau korang boleh ubah gambar tersebut(saiz 100X30)
contoh:-





Anda juga boleh buat permintaan di sini jika inginkan button macam kat atas ni di tukar dengan warna yang anda hendak...koz akan cuba bantu untuk buatkan...

Button untuk MamaGee

Code

http://img143.imageshack.us/img143/4863/pinki.png

camat mencuba :D

Tutorial Cara Buat Widget Penyambut Tetamu

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