Dennis Kane

Cara buat efek Zoom in pada image di bahagian blog post

Untuk membuat efek zoom in pada image atau gambar di bahagian posting seperti contoh yang boleh anda cuba pada gambar di atas (letak kursor mouse di atas gambar) hanya ikut beberapa langkah yang sangat mudah di bawah.

Langkah 1

Log in blog => Dashboard => Template => Edit HTML => Proceed

Langkag 2

Dengan menggunakan keyboard, tekan kekunci F3 atau Ctrl+F. Seterusnya taip atau paste kod          
]]></b:skin> pada ruang Find dan kemudian tekan Enter.

Langkah 3

Salin dan paste kod di bawah di atas atau sebelum kod ]]></b:skin>

.post img {
filter:alpha(opacity=60);  /* Internet Explorer */
opacity:0.6;  /* standard CSS3 */
-o-transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.post img:hover {
-o-transition: all 0.3s;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transform: scale(1.3);
-o-transform: scale(1.3);
-webkit-transform: scale(1.3);

}

Contoh:
.post img {
filter:alpha(opacity=60);  /* Internet Explorer */
opacity:0.6;  /* standard CSS3 */
-o-transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.post img:hover {
-o-transition: all 0.3s;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transform: scale(1.3);
-o-transform: scale(1.3);
-webkit-transform: scale(1.3);
}

]]></b:skin>

Akhir sekali, klik Preview dan jika tiada mesej error, klik Save.

p/s: Jika efek zoom in menjadi terlalu besar atau kecil, anda boleh mengubah saiz efek tersebut dengan menukar nilai 0.3s dan (1.3) kepada 0.5s dan (1.5)

Fever ! Aku Sayang Kau ! :)

Following Star Pada Cursor

Adakah anda suka kalau cursor yang anda guna untuk blog ada beberapa bintang kecil berwarna yang mengikutinya.? Contoh macam gambar di bawah.

Kalau anda suka, ini ada tutorialnya.:)



1. Dari dashboard > design > add a gadget > HTML/javasrcript [link]

2. Copy code di bawah mengikut kesukaan anda dan paste ke dalam HTML/javascript

i) Following star warna warni

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

ii) Following star warna biru

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

iii) Following star warna purple

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

3. Save dan lihat hasilnya.:)

Tukar Cursor Untuk Blog

Menukar cursor untuk blog anda dapat menghilangkan rasa bosan melihat cursor default yang digunakan oleh komputer anda.(berbentuk anak panah putih). Atau mungkin juga anda inginkan sedikit kelainan pada cursor berbanding cursor biasa.

Tutorial kali ini ialah berkongsi website yang dapat memudahkan anda mendapatkan kod bagi cursor ini serta sedikit pengubahsuaian pada kod tersebut.

1. Buka website http://www.cursors-4u.com/

2. Pilih cursor kegemaran anda. (Pastikan anda TIDAK mengambil cursor yang jenis animated, kerana ianya hanya berfungsi dalam IE)

3. Copy code yang diberikan. Contoh kod adalah seperti berikut. Kemudian DELETE kod yang telah diwarnakan seperti dibawah

<style type="text/css">body, a, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-2/cur116.cur), progress;}</style><a href="http://www.cursors-4u.com/cursor/2008/12/17/cool-blue-outer-glow-pointer.html" target="_blank" title="Cool Blue Outer Glow Pointer"><img src="http://cursors-4u.com/support.gif" border="0" alt="Cool Blue Outer Glow Pointer" style="position:absolute; top: 0px; right: 0px;" /></a>

4. Kod akhir sepatutnya kelihatan seperti ini sahaja.

<style type="text/css">body, a, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-2/cur116.cur), progress;}</style>

5. Kemudian dari dashboard anda > design > add a gadget > HTML/javascript, pastekan kod di atas diruangan tersebut.

6. Save dan lihat hasilnya.

Mudah bukan.:)

Cursor Berkilau

Tutorial ini akan menunjukkan bagaimana untuk menjadikan cursor anda menghasilkan 'bintang²' yang berkerlipan. Terdapat pelbagai jenis warna yang telah diletakkan untuk memudahkan pemilik blog sesuaikan dengan warna thema masing². Kata lain yang mungkin sesuai ialah untuk menjadikan cursor anda sparkle.(tak tahu istilah betul apa untuk effect ini.:)

Kalau masih tidak faham bagaimana hasilnya, boleh lihat contoh gambar di bawah.:)

Sebelum itu, tutorial ini juga boleh digambungkan dengan tutorial tukar cursor pada blog anda. Semestinya untuk menjadikannya lebih menarik. Sudah di'test' dan dibuktikan boleh.:)

Tutorial untuk membuatkan cursor anda menjadi sparkle adalah seperti berikut:

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

2. Pada ruangan HTML/javascript, masukkan kod berikut.

<script src="URL JS" type="text/javascript"></script>

Note: untuk URL JS, tukarkan dengan kod berikut mengikut warna sprakle yang anda kehendaki

Biru - https://sites.google.com/site/unwanted86/javascript/biru.js

Hitam - https://sites.google.com/site/unwanted86/javascript/black.js

hijau - https://sites.google.com/site/unwanted86/javascript/lawngreen.js

Ungu - https://sites.google.com/site/unwanted86/javascript/purple.js

Putih - https://sites.google.com/site/unwanted86/javascript/putih.js

Pink - https://sites.google.com/site/unwanted86/javascript/salmon.js

Kuning - https://sites.google.com/site/unwanted86/javascript/yellow.js

Hijau kebiruan - https://sites.google.com/site/unwanted86/javascript/aqua.js

Contoh: jika anda mahu mouse anda dengan sparkle warna biru, kodnya adalah:

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

3. Apabila sudah masukkan kod, save dan lihat hasilnya..

Senang bukan.?
Selamat mencuba.:)

TUTORIAL::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

(mencari kod warna.?)