Tutorial : Button Visit Counter (Datang Kali Yang ke Berapa)

Awak visit sini dah kali!

Kadang-kadang bila tukar theme blog ni boleh mengelirukan visitor tau. 

'Eh aku pernah masuk ke blog ni?'

'Eh blog baru ke? Dah follow ke belum ekk..'

Jadi Yura memperkenalkan button yang tak boleh di tekan ni.

Korang boleh tukar color background ,font mengikut cita rasa.
Perkataan pon boleh di ubah.

Contohnya mcam :

Alien mendarat [2] kali

Suka awak [ 10 ] peratus

dan macam-macam lagi. Ikut creativity awak lah ye..


HIJAU - warna background
MERAH- warna font/tulisan
PURPLE - warna border sekeliling

Click sini untuk code warna 

  • Dashboard > Layout > Add a gadget >HTML/Javascript
  • Copy semua kod di bawah dan pastekan dalam kotak HTML/Javascript tersebut.
<style>

#credittohelpdesign{background: #cce5e5;color:#fff;padding:3px; font-family:tahoma; -moz-border-radius: 2px;-webkit-border-radius: 2px;border-radius: 3px;border:1px solid #b7dbdb;position:fixed;z-index:1338; warning;top:72px;right:3px;}</style> <div id="credittohelpdesign">Awak visit sini dah <script language=javascript>function getCookieSlsv (offset) {var endstr = document.cookie.indexOf (";", offset);if (endstr == -1)endstr = document.cookie.length;return unescape(document.cookie.substring(offset, endstr));}function GetCookie (name) {var arg = name + "=";var alen = arg.length;var clen = document.cookie.length; var i = 0;while (i < clen) {var j = i + alen;if (document.cookie.substring(i, j) == arg)return getCookieSlsv (j);i = document.cookie.indexOf(" ", i) + 1;if (i == 0) break;}return null;}function SetCookie (name, value) {var argv = SetCookie.arguments;var argc = SetCookie.arguments.length;var expires = (argc > 2) ? argv[2] : null;var path = (argc > 3) ? argv[3] : null;var domain = (argc > 4) ? argv[4] : null; var secure = (argc > 5) ? argv[5] : false;document.cookie = name + "=" + escape (value) +((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +((path == null) ? "" : ("; path=" + path)) +((domain == null) ? "" : ("; domain=" + domain)) +((secure == true) ? "; secure" : "");}function DeleteCookie(name) {var exp = new Date();FixCookieDate (exp); // Correct for Mac bugexp.setTime (exp.getTime() - 1); // This cookie is historyvar cval = GetCookie (name);if (cval != null)document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString();}var expdate = new Date();var num_visits;expdate.setTime(expdate.getTime() + (365*24*60*60*1000));if (!(num_visits = GetCookie("num_visits")))num_visits = 0;num_visits++;SetCookie("num_visits",num_visits,expdate);document.writeln("<font face=verdana color=ffffff>"+num_visits+"</font>"); </script> kali!</div>

  • Kalau nak adjust kotak bagi bawah sikit, tukarkan 72 kepada yang lebih besar. Mcm 100 ke. Kalau nak ke atas sikit ,kurang kan nombor 72 tu .
  • Kalau nak bagi ke kiri , tukarkan RIGHT tu jadi LEFT
  • Kalau nak dia fix (maksudnya kalau scroll pon dia x ikut) ,tukar FIXED ke ABSOLUTE
  • Lepas tu SAVE :)


Tutorial : Star Drop

  

Aigoo .. aigoo...tuto lagihh..



Haha rasanya ramai dah tau tuto ni, tapi Yura nak share jugak. Hiks ~

  • Dashboard > Layout > Add a gadget >HTML/Javascript
  • Copy semua kod di bawah dan pastekan dalam kotak HTML/Javascript tersebut.


<script type="text/javascript">
// <![CDATA[
var colour="#01DFD7";
var colour3="#FE2EF7";
var sparkles=70;
var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();
window.onload=function() { if (document.getElementById) {
var i, rats, rlef, rdow;
for (var i=0; i<sparkles; i++) {
var rats=createDiv(3, 3);
rats.style.visibility="hidden";
document.body.appendChild(tiny[i]=rats);
starv[i]=0;
tinyv[i]=0;
var rats=createDiv(5, 5);
var rats=createDiv3(5, 5);
rats.style.backgroundColor="transparent";
rats.style.visibility="hidden";
var rlef=createDiv(1, 5);
var rlef=createDiv3(1, 5);
var rdow=createDiv(5, 1);
var rdow=createDiv3(5, 1);
rats.appendChild(rlef);
rats.appendChild(rdow);
rlef.style.top="2px";
rlef.style.left="0px";
rdow.style.top="0px";
rdow.style.left="2px";
document.body.appendChild(star[i]=rats);
}
set_width();
sparkle();
}}
function sparkle() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<sparkles; c++) if (!starv[c]) {
star[c].style.left=(starx[c]=x)+"px";
star[c].style.top=(stary[c]=y)+"px";
star[c].style.clip="rect(0px, 5px, 5px, 0px)";
star[c].style.visibility="visible";
starv[c]=50;
break;
}
}
for (c=0; c<sparkles; c++) {
if (starv[c]) update_star(c);
if (tinyv[c]) update_tiny(c);
}
setTimeout("sparkle()", 40);
}
function update_star(i) {
if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
if (starv[i]) {
stary[i]+=1+Math.random()*3;
if (stary[i]<shigh+sdown) {
star[i].style.top=stary[i]+"px";
starx[i]+=(i%5-2)/5;
star[i].style.left=starx[i]+"px";
}
else {
star[i].style.visibility="hidden";
starv[i]=0;
return;
}
}
else {
tinyv[i]=50;
tiny[i].style.top=(tinyy[i]=stary[i])+"px";
tiny[i].style.left=(tinyx[i]=starx[i])+"px";
tiny[i].style.width="2px";
tiny[i].style.height="2px";
star[i].style.visibility="hidden";
tiny[i].style.visibility="visible"
}
}
function update_tiny(i) {
if (--tinyv[i]==25) {
tiny[i].style.width="1px";
tiny[i].style.height="1px";
}
if (tinyv[i]) {
tinyy[i]+=1+Math.random()*3;
if (tinyy[i]<shigh+sdown) {
tiny[i].style.top=tinyy[i]+"px";
tinyx[i]+=(i%5-2)/5;
tiny[i].style.left=tinyx[i]+"px";
}
else {
tiny[i].style.visibility="hidden";
tinyv[i]=0;
return;
}
}
else tiny[i].style.visibility="hidden";
}
document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sdown;
x=(e)?e.pageX:event.x+sleft;
}
function set_scroll() {
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
}
window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
}

function createDiv(height, width) {

var div=document.createElement("div");

div.style.position="absolute";

div.style.height=height+"px";

div.style.width=width+"px";

div.style.overflow="hidden";

div.style.backgroundColor=colour;
return (div);
} function createDiv3(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height+"px";
div.style.width=width+"px";
div.style.overflow="hidden";
div.style.backgroundColor=colour3;
return (div);
}
// ]]>
</script>


  • Tukarkan warna kalau uolls nak. Yang Yura boldkan warna biru tu ,code untuk warna star. Yang warna purple tu pulak bila star tu drop. Tak tau code? Ambil kat sini.
  • Jadi tak? Kalau jadi bagi Yura link blog awak. Nak usha. Hiks~