Percantik suatu tampilan blog adalah keinginan dari banyak
blogger , kali ini saya akan bagikan sedikit informasi kepada sobat , kalau
anda dapat menampilkan suatu flash yang selalu bergerak pada cursor anda , dan
mengikuti setiap kursor anda bergerak . percantik suatu tampilan blog adalah
suatu hal penting , karena dengan cantiknya tampilan blog maka akan membuat
pengunjung dalam blog anda akan semakin betah di dalam blog anda selain mereka
mencari suatu informasi yang di butuhkan ternyata juga anda suguhkan suatu
tampilan menarik dari blog anda . kalau orang jawa bilang semakin cantik
tampilan barang maka akan membuat barang tersebut semakin menarik untuk
dimiliki .
Kalau anda ingin mendapatkan suatu tampilan seperti diatas
maka anda dapat mengikuti suatu langkah dari cara pembutan gelembung dicursor.
1.
Anda
harus segera buka blog anda dengan alamat blogger.com
2.
Setelah
anda masuk kedalam dashboard anda maka segera anda langsung cari
DESIGN>>Page Template
3.
Setelah
itu anda pilih HTML/Javascript kemudian anda klik tambah gadget.
4.
Masukan
kode berikut di lembar kerja dan anda berikan nama sesuai yang anda inginkan
Berikut adalah code html gelembung cursor yang harus anda
masukan kedalam lembar kerja :
<noscript></noscript><!-- --><script
type="text/javascript"
src="http://blogtrikdantips-blogspot.googlecode.com/files/cursor_gelembung.js"></script><script
type="text/javascript">
// <![CDATA[
var colours=new
Array("#2E9AFE", "#2E9AFE", "#2E9AFE",
"#2E9AFE", "#2E9AFE"); // colours for top, right,
bottom and left borders and background of bubbles
var bubbles=100; // maximum number of bubbles on screen
var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var bubb=new Array();
var bubbx=new Array();
var bubby=new Array();
var bubbs=new Array();
window.onload=function() { if (document.getElementById) {
var rats, div;
for (var i=0; i<bubbles; i++) {
rats=createDiv("3px", "3px");
rats.style.visibility="hidden";
div=createDiv("auto", "auto");
rats.appendChild(div);
div=div.style;
div.top="1px";
div.left="0px";
div.bottom="1px";
div.right="0px";
div.borderLeft="1px solid "+colours[3];
div.borderRight="1px solid "+colours[1];
div=createDiv("auto", "auto");
rats.appendChild(div);
div=div.style;
div.top="0px";
div.left="1px";
div.right="1px";
div.bottom="0px"
div.borderTop="1px solid "+colours[0];
div.borderBottom="1px solid "+colours[2];
div=createDiv("auto", "auto");
rats.appendChild(div);
div=div.style;
div.left="1px";
div.right="1px";
div.bottom="1px";
div.top="1px";
div.backgroundColor=colours[4];
div.opacity=0.5;
if (document.all)
div.filter="alpha(opacity=50)";
document.body.appendChild(rats);
bubb[i]=rats.style;
}
set_scroll();
set_width();
bubble();
}}
function bubble() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<bubbles; c++) if (!bubby[c]) {
bubb[c].left=(bubbx[c]=x)+"px";
bubb[c].top=(bubby[c]=y)+"px";
bubb[c].width="3px";
bubb[c].height="3px"
bubb[c].visibility="visible";
bubbs[c]=3;
break;
}
}
for (c=0; c<bubbles; c++) if (bubby[c])
update_bubb(c);
setTimeout("bubble()", 40);
}
function update_bubb(i) {
if (bubby[i]) {
bubby[i]-=bubbs[i]/2+i%2;
bubbx[i]+=(i%5-2)/5;
if (bubby[i]>sdown && bubbx[i]>0) {
if (Math.random()<bubbs[i]/shigh*2 &&
bubbs[i]++<8) {
bubb[i].width=bubbs[i]+"px";
bubb[i].height=bubbs[i]+"px";
}
bubb[i].top=bubby[i]+"px";
bubb[i].left=bubbx[i]+"px";
}
else {
bubb[i].visibility="hidden";
bubby[i]=0;
return;
}
}
}
document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sleft;
x=(e)?e.pageX:event.x+sdown; }
window.onresize=set_width;
function set_width() {
if (document.documentElement &&
document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (typeof(self.innerHeight)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
else {
swide=800;
shigh=600;
}
}
window.onscroll=set_scroll;
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;
}
}
function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height;
div.style.width=width;
div.style.overflow="hidden";
return (div);
}
// ]]>
</script>
Keterangan :
var colours=new
Array("#2E9AFE", "#2E9AFE", "#2E9AFE",
"#2E9AFE", "#2E9AFE") (adalah anda dapat mengubah
dan mengatur tampilan warna dari gelembung sesuai dengan kebutuhan dan
keinginan anda )
oke sekian dari saya semoga bermanfaat buat anda , dan yang
terpenting adalah selalu praktek praktek dan praktek . !!!
0 komentar:
Post a Comment