Selasa, 19 April 2011

Cara Buat Bubble Cursor Pada Blog

Cursor untuk blog anda memang boleh dipelbagaikan. Samada untuk menukar icon cursor sahaja, atau menjadikannya sparkle. Dan juga tidak ketinggalan untuk menjadikan cursor anda menghasilkan bubbles.


Contoh cursor bubble yang menarik ini boleh di lihat di test blog ini.

Ikuti tutorial mudah di bawah untuk letakkan bubble cursor di blog anda.

1. Dari dashboard > design > add a gadget > HTML/javascript

2. Copy code bubble cursor di bawah, kemudian paste di ruangan HTML/javascript.
(code ini bubble warna biru. Untuk tukar warna bubble, sila ikuti tutorial sehingga habis)



<script type="text/javascript" src="https://sites.google.com/site/unwanted86/javascript/bubblecursor.js"></script><script type="text/javascript">

// <![CDATA[

var colours=new Array("#0066FF", "#0066FF", "#0066FF", "#0066FF", "#0066FF"); // colours for top, right, bottom and left borders and background of bubbles

var bubbles=100; // maximum number of bubbles on screen



/****************************

* JavaScript Bubble Cursor *

* (c) 2010 mf2fm web-design *

* http://www.mf2fm.com/rv *

* DON'T EDIT BELOW THIS BOX *

****************************/

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>



3. Save dan lihat hasilnya.:)



Note:
Bagi yang hendak tukar bubble dengan warna yang anda kehendaki selain 4 warna di atas, caranya.

Cari kod di bawah dari code yang anda paste tadi, kemudian tukarkan code warna seperti yang dihighlight


Hendak cari kod warna.?
Rujuk code warna di bawah.




Selamat Mencuba.:)

Minggu, 17 April 2011

Cara Letak Sitemap Di Blog

Sitemap boleh digunakan oleh pemilik blog untuk meletakkan entri yang ada dalam blog dengan lebih kemas/tersusun. Fungsi sitemap hampir sama dengan archive, tetapi sitemap lebih kepada kategori/label, manakala archive lebih kepada susanan entri mengikut tarikh.


Boleh dikatakan sitemap lebih mudah didapati untuk self-hosting, tetapi terdapat juga sitemap yang boleh diletakkan di blogspot. Sitemap untuk blogspot ini adalah berdasarkan kategori/label yang anda masukkan semasa menaip entri blog.

Contoh blogspot yang menggunakan sitemap ini anda boleh lihat di Sitemap OhBest.

Tutorial untuk membuat sitemap ini adalah seperti berikut

1. Dari dashboard > posting > edit pages > new page

2. Copy code berikut dan paste di ruangan pages.

<script style="text/javascript" src="https://sites.google.com/site/unwanted86/javascript/Sitemaprev2.js
"></script>
<script src="http://www.URL BLOG.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>


note: Tukar URL BLOG dengan url blog anda

Contoh:


3. Save/publish page anda.

Note: Anda juga boleh pilih untuk link manually, dan letakkan link di mana sahaja yang anda rasakan perlu.

Minggu, 27 Maret 2011

Ketahui Kelajuan Load Element Blog

Kecepatan sesebuah blog untuk dibuka oleh pengunjung juga memainkan peranan penting dalam dunia blogging. Selain bergantung kepada jenis browser yang digunakan dan kecepatan internet, perkara penting lain adalah kandungan element yang mencorakkan sesebuah blog.



Bagaimana anda hendak tahu selaju mana blog anda load, dan apakah element yang tidak mendatangkan masalah, dan elemen manakah yang menyumbang kepada masalah lambat load pada blog anda.?

Caranya mudah sahaja.

1. Buka website ini. http://tools.pingdom.com

2. Masukkan url blog anda, kemudian tekan 'test now'


3. Setelah seketika, anda akan dapat sedikit informasi tentang blog anda, dan yang paling penting adalah masa load setiap element. Tindakan seterusnya bergantung kepada kehendak anda.:)


p/s: Kebiasaanya yang menyebabkan lambat adalah gambar beranimasi ataupun javascript.:)

Minggu, 13 Maret 2011

Disable Highlight Entri Blog

Sesetengah orang mungkin agak tidak senang bagi sesiapa mengambil hasil entri dalam blog mereka. Antara cara yang digunakan untuk mengelakkan entri atau kandungan dalam blog di'ambil' adalah dengan disable right click atau disable highlight.


Tutorial untuk disable right click sudah pun ada sebelum ini, dan kali ini tutorial adalah untuk disable highlight text dalam blog.


Ikuti tutorial mudah seperti di bawah.

1. Dari dashboard > design > add a gadget > HTML/javascript

2. Masukkan kod di bawah dalam ruangan HTML/javascript


<script type="text/javascript">
function disableSelection(target){
if (typeof target.onselectstart!="undefined") //IE route
target.onselectstart=function(){return false}
else if (typeof target.style.MozUserSelect!="undefined") //Firefox route
target.style.MozUserSelect="none"
else //All other route (ie: Opera)
target.onmousedown=function(){return false}
target.style.cursor = "default"
}
//Sample usages
//disableSelection(document.body) //Disable text selection on entire body
//disableSelection(document.getElementById("mydiv")) //Disable text selection on element with id="mydiv"
</script>
<script type="text/javascript">
disableSelection(document.body) //disable text selection on entire body of page
</script>


3. Save dan lihat hasilnya..:)


TIPS:
Untuk kesan yang lebih baik, letakkan/drag HTML atas ruangan blog post. Ini akan membuatkan kod disable highlight ini 'dibaca' dahulu sebelum entri.:)



Jumat, 25 Februari 2011

7 Komik Eropa Yang Sempat Berjaya Di Indonesia

#fullpost { display: none; } Jika bicara mengenai komik di Indonesia saat ini, maka benak kita akan langsung terbayang ke toko buku dengan barisan seri-seri komik Jepang atau manga yang berjajar memenuhi rak. Memang manga Jepang (atau manhwa Korea atau bahkanmanhua silat Hong Kong) saat ini masih menjadi jawara komik di negeri kita. Namun Indonesia sendiri sebenarnya pernah mengenal era

Jangan Sepelekan Kecerdasan Domba

Penelitian terbaru ternyata mengungkapkan hal yang selama ini di luar perkiraan orang. Domba ternyata tidak sebodoh yang dikira selama ini.Dr Laura Avanzo dan Dr Jeniffer Morton dari University of Cambridge mengatakan bahwa domba atau biri-biri ternyata cukup cerdas dan dapat membuat sebuah keputusan yang mandiri. "Domba hidup dalam sebuah kumpulan dan mereka kadang terlihat bodoh.

Patung-Patung Yang Terlihat Seperti Bergerak

Pada pandangan pertama benda-benda ini tampak seperti sedang bergerak, hampir seperti setiap benda yang jatuh ke bawah, khususnya "Strawberry blanket" atau selimut stroberi. Pada kenyataannya mereka sebenarnya bahan-bahan alami, seperti bulu-bulu, buah-buahan dan bunga, yang melekat pada benang nilon. Pemahat patung Claire Morgan dari Belfast adalah pencipta karya seni yang luar biasa ini.