Caranya:

1) Sign in akaun blogger

2) Dashboard > Design > Edit HTML > Tick kotak "Expand Widget Templates"

3) Dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari kod

a:hover {

4) Kemudian copy paste kod di bawah selepas kod a:hover { yang korang cari tadi:

transform: rotate(7deg);
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
-webkit-transform: rotate(7deg);

contoh:

 a:hover {
transform: rotate(7deg);
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
-webkit-transform: rotate(7deg);

5) Sekali lagi, dengan menggunakan ctrl + F, cari kod di bawah pula:

a:link {

6) Kemudian copy paste kod di bawah selepas kod a:link { tadi:

transition: transform .5s ease-in;
-moz-transition: -moz-transform .5s ease-in;
-o-transition: -o-transform .5s ease-in;
-webkit-transition: -webkit-transform .5s ease-in;

Contoh:

 a:link {
transition: transform .5s ease-in;
-moz-transition: -moz-transform .5s ease-in;
-o-transition: -o-transform .5s ease-in;
-webkit-transition: -webkit-transform .5s ease-in;

7) Klik preview, jika tiada error, klik save dan lihat hasilnya.

Selamat mencuba! :)

 * efek ini hanya berkesan pada browser mozila firefox

Preview:

Menarik bukan?

Caranya:

1) Sign in akaun blogger

2) Dashboard > Design > Edit HTML > Tick kotak "Expand Widget Templates"

3) Dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari kod

]]></b:skin>

4) Kemudian copy paste kod di bawah sebelum kod ]]></b:skin> yang korang cari tadi:

.post img{
transition: transform .5s ease-in;
-moz-transition: -moz-transform .5s ease-in;
-o-transition: -o-transform .5s ease-in;
-webkit-transition: -webkit-transform .5s ease-in;
}
.post img:hover{
transform: rotate(5deg);
-moz-transform: rotate(5deg);
-o-transform: rotate(5deg);
-webkit-transform: rotate(5deg);

contoh:

.post img{
transition: transform .5s ease-in;
-moz-transition: -moz-transform .5s ease-in;
-o-transition: -o-transform .5s ease-in;
-webkit-transition: -webkit-transform .5s ease-in;
}
.post img:hover{
transform: rotate(5deg);
-moz-transform: rotate(5deg);
-o-transform: rotate(5deg);
-webkit-transform: rotate(5deg);

 ]]></b:skin>

7) Klik preview, jika tiada error, klik save dan lihat hasilnya.

Selamat mencuba! :)

Preview:


Tutorial kali ini akan menunjukkan cara macam mana nak buat efek senget pada Bloquote apabila di sentuh cursor, seperti dalam preview di atas. Ikuti tutorial di bawah step by step. Sebelum itu, kepada sesiapa yang tak tahu cara nak pasang kotak pada petikan blockquote, sila rujuk tutorial ini atau untuk pengguna simple template, rujuk tutorial ini.

1) Sign in akaun blogger

2) Dashboard > Design > Edit HTML

3) Dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari kod

.post blockquote {

atau kod di bawah

blockquote:hover {

4) Copy kod di bawah dan paste SELEPAS / DI BAWAH kod yang korang cari di langkah 3 tadi

blockquote:hover {
-webkit-border-radius: 36px 12px;
-moz-border-radius: 36px 12px;
-webkit-transform: skew(1.deg,1.5deg);
-moz-transform: rotate(3deg);
-webkit-transform: rotate(3deg); }
border:2px dashed #000000;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomright: 10px;
}

5) Klik preview, jika tiada error, klik save template.

Selamat mencuba! :)

Untuk membuat kesan khas pada gambar seperti preview di atas, sila ikuti tutorial di bawah:

1) Login akaun blogger anda

2) Dashboard > Design > Edit HTML > Backup template terlebih dahulu (untuk lagkah berjaga-jaga)

3) Tekan ctrl + F serentak, cari kod

/* Headings

atau

/* Header

Copy kod di bawah dan paste SEBELUM kod /* Headings atau /* Header

a img {
-webkit-transition-duration:.4s;}
img:hover {filter: alpha(opacity=60);
opacity: .9.9;
border-radius:50px;
border: 1px #FF66CC;
-webkit-box-shadow: 0px 0px 20px #FF66CC;
-moz-box-shadow: 0px 0px 20px #FF66CC;
}

Contoh:

a img {
-webkit-transition-duration:.4s;}
img:hover {filter: alpha(opacity=60);
opacity: .9.9;
border-radius:50px;
border: 1px #FF66CC;
-webkit-box-shadow: 0px 0px 20px #FF66CC;
-moz-box-shadow: 0px 0px 20px #FF66CC;
}

/*Header

4) Save dan lihat hasilnya.

Selamat mencuba! :)

Demo:

Cuba korang lalukan cursor pada mana-mana link dalam blog ni, apa jadik? ada goyang tak? :) efek menarik ni korang boleh cuba apply dekat blog masing-masing.. kalau berminat la, kalo tak berminat jangan paksa diri ok,he2..caranya:

1) Sign in akaun blogger

2) Dashboard >> Design >> Page Element >> Add A Gadget >> Html / Javascript

3) Copy dan paste kod di bawah pada ruang Html / Javascript tadi:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script><script type='text/javascript'> $(document).ready(function() { $('a').hover(function() { $(this).animate({ marginLeft: '10px' }, 400); }, function() { $(this).animate({ marginLeft: 0 }, 400); }); });</script>

400 - speed / laju efek nudging. Korang boleh adjust nilai ni untuk kelajuan efek, lagi kecik nilai, lagi laju efek goyang.

4) Lastly macam biasa, klik save dan lihat hasilnya.

Selamat mencuba! :)

Efek kotak bayang-bayang akan muncul apabila cursor menyentuh Blockquote. Pada bayang-bayang dan garis kotak border,  korang boleh tukar warna mengikut citarasa sendiri. Menarik kan? jom cuba. Sebelum itu, kepada sesiapa yang tak tahu cara nak pasang kotak pada petikan blockquote, sila rujuk tutorial ini atau untuk pengguna simple template, rujuk tutorial ini.

1) Sign in akaun blogger

2) Dashboard > Design > Edit HTML

3) Dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari kod

.post blockquote {

atau kod di bawah

blockquote:hover {

4) Copy kod di bawah dan paste SELEPAS / DI BAWAH kod yang korang cari di langkah 3 tadi

border:2px dashed #000000;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomright: 10px;
-moz-box-shadow: 0 0 18px #FF3399 ;
-webkit-box-shadow: 0 0 18px #FF3399 ;
}

Nota:
000000  - warna garis border. Tukar kepada warna yang korang suka. Rujuk kod warna di bawah
FF3399 - warna bayang-bayang pada kotak. Tukar kepada warna yang korang suka. Rujuk kod warna di bawah
( untuk paparan lebih besar, klik di sini)


5) Klik preview, jika tiada error, klik save template.

Selamat mencuba! :)

Apabila cursor dilalukan pada petikan blockquote, icon akan muncul pada penjuru bawah kanan kotak blockquote. Ikuti tutorial di bawah untuk mengaplikasikannya pada blog anda.

1) Sign in akaun blogger

2) Dashboard > Design > Edit HTML

3) Dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari kod ini

.post blockquote {

4) Kemudian copy dan paste kod ini SELEPAS / DI BAWAH kod .post blockquote { tadi

blockquote:hover {
background-color: #FFC8F2;
-webkit-transition-duration: 3.5s;
background-image:url(http://dl6.glitter-graphics.net/pub/440/440576q8wrax7se2.gif);
background-position:bottom right;
background-repeat:no-repeat;
}

Nilai yang anda boleh adjust dalam kod di atas:
http://dl6.glitter-graphics.net/pub/440/440576q8wrax7se2.gif - letakkan url icon yang anda mahu. Gambar-gambar mini icon yang comel anda boleh search di sini. Cara nak dapatkan url gambar pula, rujuk tutorial ini.
FFC8F2 - warna background pada kotak blockquote apabila disentuh cursor. Rujuk kod warna di bawah
( untuk paparan lebih besar, klik di sini)



5) Klik preview dan jika tiada error, klik save template.

Selamat mencuba! :)

Preview:


Caranya:

1) Sign in akaun blogger

2) Dashboard > Design > Edit HTML > Tick kotak "Expand Widget Templates"

3) Dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari kod   

a:hover

4) Kemudian copy paste kod di bawah selepas kod  a:hover  yang korang cari tadi:

border-top: 2px dashed #ff8fc1;
border-bottom: 2px dashed #ff8fc1;

 contoh:

 a:hover
border-top: 2px dashed #ff8fc1;
border-bottom: 2px dashed #ff8fc1;

Nota:
ff8fc1 - warna garisan dashed. Tukar dengan kod warna yang korang suka. Rujuk kod warna di bawah:
( untuk paparan lebih besar, klik di sini)


5) Lastly, klik preview, jika tiada error, klik save dan lihat hasilnya.

Selamat mencuba! :)

Preview:

Untuk trick ini, bubbles akan muncul dari bawah blog seperti yang ditunjukkan dalam preview di atas. Warna bubble boleh ditukar ikut citarasa. Nak cuba? ikuti tutorial di bawah:

1) Sign in akaun blogger

2) Dashboard >> Design >> Page Element >> Add A Gadget >> Html / Javascript

3) Copy dan paste kod di bawah pada ruang Html / Javascript tadi

<script type="text/javascript">
// <![CDATA[
var colours=new Array("#33FF33", "#33FF33", "#33FF33", "#33FF33", "#0000CC"); // colours for top, right, bottom and left borders and background of bubbles
var bubbles=66; // how many bubbles are moving at any given time

/****************************
* JavaScript Bubble Bath *
* (c) 2010 mf2fm web-design *
* http://www.mf2fm.com/rv *
* Tutorial by polskahackrew *
****************************/
var swide=800;
var shigh=600;
var bubb=new Array();
var bubbx=new Array();
var bubby=new Array();
var bubbs=new Array();

window.onload=function() { if (document.getElementById) {
var b, i;
b=document.createElement("div");
i=b.style;
i.position="absolute";
b.setAttribute("id", "bod");
document.body.appendChild(b);
set_scroll();
set_width();

var rats, div;
for (var i=0; i<bubbles; i++) {
rats=createDiv("3px", "3px");

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)";

b.appendChild(rats);
bubb[i]=rats.style;
}
bubble();
}}

function bubble() {
var c;
for (c=0; c<bubbles; c++) if (!bubby[c] && Math.random()<0.333) {
bubb[c].left=(bubbx[c]=Math.floor(swide/6+Math.random()*swide/1.5)-10)+"px";
bubb[c].top=(bubby[c]=shigh)+"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;
if (bubby[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";
bubbx[i]+=(i%5-2)/5;
bubb[i].left=bubbx[i]+"px";
}
else {
bubb[i].visibility="hidden";
bubby[i]=0;
return;
}
}
}

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() {
var sleft, sdown;
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;
}
document.getElementById("bod").style.top=sdown+"px";
document.getElementById("bod").style.left=sleft+"px";
}

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>

Nota:
33FF33 - warna border bubble. Tukar kepada kod warna yang anda suka. Rujuk kod warna di bawah.
0000CC - warna bubble. Tukar kepada kod warna yang anda suka. Rujuk kod warna di bawah.

( untuk paparan lebih besar, klik di sini)



4)Kemudian klik save dan lihat hasilnya.

Selamat mencuba! :)

Demo:

Selain efek nudging, korang boleh cuba efek ni untuk tema blog ala-ala star wars ;) Caranya:

1) Sign in akaun blogger

2) Dashboard >> Design >> Page Element >> Add A Gadget >> Html / Javascript

3) Copy dan paste kod di bawah pada ruang Html / Javascript tadi:

<script type="text/javascript">
// <![CDATA[
var speed=33; // lower number for faster
var warp=3; // from 1 to 10
var stars=100; // number of stars
var colour="#66FF66"; // colour of stars
var position=0; // set to '-1' for stars to appear behind text on page

/****************************
* Star Warp Effect *
* (c) 2005 mf2fm web-design *
* http://www.mf2fm.com/rv *
* Tutorial by Polskahackrew *
****************************/
var i;
var strs=new Array();
var strx=new Array();
var stry=new Array();
var stdx=new Array();
var stdy=new Array();
var swide=800;
var shigh=600;
warp/=100;
window.onload=function() { if (document.getElementById) {
var b, s, temp;
set_width();
b=document.createElement("div");
s=b.style;
s.position="absolute";
s.zIndex=position;
b.setAttribute("id", "bod");
document.body.appendChild(b);
set_scroll();
for (i=0; i<stars; i++) {
strs[i]=document.createElement("div");
strs[i].style.backgroundColor=colour;
strs[i].style.overflow="hidden";
strs[i].style.position="absolute";
stdy[i]=Math.random()*4-2;
stdx[i]=Math.random()*6-3;
temp=Math.random()*100;
strx[i]=swide/2+temp*stdx[i];
stry[i]=shigh/2+temp*stdy[i];
if (Math.abs(stdx[i])+Math.abs(stdy[i])>2.66) {
strs[i].style.width="2px";
strs[i].style.height="2px";
}
else {
strs[i].style.width="1px";
strs[i].style.height="1px";
}
b.appendChild(strs[i]);
}
setInterval("warp_drive()", speed);
}}

function warp_drive() {
for (i=0; i<stars; i++) {
stry[i]+=stdy[i];
strx[i]+=stdx[i];
stdx[i]*=1+warp;
stdy[i]*=1+warp;
if (stry[i]>0 && stry[i]<shigh-3 && strx[i]>0 && strx[i]<swide-3) {
strs[i].style.left=Math.floor(strx[i])+"px";
strs[i].style.top=Math.floor(stry[i])+"px"
}
else {
strx[i]=swide/2;
stry[i]=shigh/2;
stry[i]+=stdy[i]=Math.random()*4-2;
strx[i]+=stdx[i]=Math.random()*6-3;
if (Math.abs(stdx[i])+Math.abs(stdy[i])>2.66) {
strs[i].style.width="2px";
strs[i].style.height="2px";
}
else {
strs[i].style.width="1px";
strs[i].style.height="1px";
}
}
}
}

window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth-13;
shigh=self.innerHeight-13;
}
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;
}
else {
swide=800;
shigh=600;
}
swide-=2;
shigh-=2;
}

window.onscroll=set_scroll;
function set_scroll() {
var sleft, sdown;
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;
}
var s=document.getElementById("bod").style;
s.top=sdown+"px";
s.left=sleft+"px";
}
// ]]>
</script>

Nota:
66FF66 - warna bintang. Tukar kepada kod warna yang korang suka. Rujuk kod warna di bawah.
( untuk paparan lebih besar, klik di sini)


4) Lastly, klik save dan lihat hasilnya.

Selamat mencuba! :)

Caranya:

1) Sign in akaun blogger

2) Dashboard > Design > Edit HTML > Tick kotak "Expand Widget Templates"

3) Dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari kod   

a:hover

4) Kemudian copy paste kod di bawah selepas kod  a:hover  yang korang cari tadi:

 color:#FF6699; background:url(URL IMAGE) ;background-repeat: repeat;
text-decoration:underline;

 contoh:

 a:hover
color:#FF6699; background:url(URL IMAGE) ;background-repeat: repeat;
text-decoration:underline;

Nota:
pada URL IMAGE masukkan url image yang korang mahu. korang boleh search image animated kat sini . Cara nak dapatkan url image di Glitter Graphic pula, refer di sini . Ataupun korang just pilih dan copy url image yang disediakan di bawah:

http://dl5.glitter-graphics.net/pub/590/590935ankbyj1xx4.gif

http://dl7.glitter-graphics.net/pub/474/474167l68h9nknqq.gif

http://dl4.glitter-graphics.net/pub/1102/1102514nugaxacg8m.gif

http://dl9.glitter-graphics.net/pub/690/690739pesbqr6dqw.gif

http://dl2.glitter-graphics.net/pub/1455/1455682apvfgvhztr.gif

http://i603.photobucket.com/albums/tt117/misdollymie/rainbowhover.gif

5) Klik preview, jika tiada error, klik save dan lihat hasilnya.

Selamat mencuba! :)

Caranya, ikuti tutorial di bawah:

1) Sign in akaun blogger

2) Dashboard > Design > Add A Gadget > Html / Javascript

3) Copy paste kod di bawah pada ruang Html / Javascript tadi

Terdapat 2 pilihan kod,

Copy kod ini jika mahu link dibuka dalam page yang sama:

<select onChange="document.location.href=this.options[this.selectedIndex].value;">
<option selected>Tajuk menu</option>

<option value="Link 1">Menu 1</option>

<option value="Link 2">Menu 2</option>

<option value="Link 2">Menu 3</option>

<option value="Link 2">Menu 4</option>

<option value="Link 2">Menu 5</option>
</select>

Copy kod ini jika mahu link dibuka dalam page yang berlainan.

<select onchange="javascript:window.open(this.options[this.selectedIndex].value);">
<option selected>Tajuk menu</option>

<option value="Link 1">Menu 1</option>

<option value="Link 2">Menu 2</option>

<option value="Link 3">Menu 3</option>

<option value="Link 4">Menu 4</option>

<option value="Link 5">Menu 5</option>
</select>

Nota:
Tajuk menu - tajuk menu korang
Menu - menu yang korang nak letak
Link - link untuk setiap menu

contoh:

<select onChange="document.location.href=this.options[this.selectedIndex].value;">

<option selected>Tutorial</option>

<option value="http://zonainformasitechno.blogspot.com//2011/12/widget-popular-post.html">Widget Popular Post</option>

<option value="http://zonainformasitechno.blogspot.com/2011/12/recent-post-bergambar.html">Recent Post Bergambar</option>

<option value="http://zonainformasitechno.blogspot.com/2011/12/widget-misterlinky.html">Widget Misterlinky</option>

<option value="http://zonainformasitechno.blogspot.com/2011/12/back-to-top-button.html">Back To Top Button</option>

<option value="http://zonainformasitechno.blogspot.com/2011/12/cara-buat-text-box.html">Cara Buat Text Box</option>

</select>

4) Save dan lihat hasilnya.

Selamat mencuba! :)

Sebelum:

Selepas:

Untuk trick kali ini, font yang korang underline dalam post, akan di setkan kepada double line seperti dalam preview di atas. Menarik kan? jom cuba!

Caranya:

1) Sign in akaun blogger

2) Dashboard > Design > Edit HTML > Tick kotak "Expand Widget Templates"

3) Dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari kod

/* Header

4) Kemudian copy kod di bawah, dan paste SEBELUM / DI ATAS kod /* Header tadi

u {
text-decoration:underline;
border-bottom: 2px dotted #FF0080;
padding: 0px;
}

Contoh:

u {
text-decoration:underline;
border-bottom: 2px dotted #FF0080;
padding: 0px;
}
  
/* Header
 -------------------------------------------------------------------------------- */

Nota:
2 - Tebal garisan
dotted - jenis garisan, sama ada dotted atau solid
FF0080 - Warna garisan. Korang boleh tukar kepada kod warna yang korang suka. Rujuk kod warna di bawah:
( untuk paparan lebih besar, klik di sini)


5) Lepas dah tukar, klik preview, jika tiada error, klik save template dan lihat hasilnya.

Selamat mencuba! :)

Anda tercari-cari macam mana cara nak delete blog? ok jom belajar cara nak delete blog yang korang dah taknak tu.

- Sign in akaun blogger >>  kemudian ikuti tutorial bergambar di bawah:

- Done! :)

1) Pergi ke Google Friend Connect

2) Klik setting >> masukkan nama dan url blog >> kemudian klik save your settings

3) Klik Gadgets >> Pilih Members 


4) Adjust width, colour dan font ikut citarasa yang anda mahu.

5) Dah siap adjust semua, klik Generate kod dan copy kod yang tertera.


- Selesai -

Tutorial ini akan menunjukkan anda cara bagaimana untuk menjadikan cursor di dalam blog berkilauan/ sparkle berbentuk love seperti preview yang ditunjukkan di atas. Sila ikuti turorial berikut:

1) Sign in akaun blogger

2) Dashboard >> Page Element >> Add A Gadget >> HTML / Javascript

3) Copy dan paste kod berikut pada ruangan HTML

<script type='text/javascript'>
// <![CDATA[
var colour="#FF0066";
var sparkles=40;
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);
rats.style.backgroundColor="transparent";
rats.style.visibility="hidden";
var rlef=createDiv(5, 5);
var rdow=createDiv(5, 5);
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()*5;
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+"49px";
div.style.width=width+"50px";
div.style.overflow="hidden";
div.style.backgroundColor=colour;
return (div);
}
// ]]>
</script>

FF0066 - Tukar kepada kod warna yang anda suka. Rujuk Kod warna di bawah:
( untuk paparan lebih besar, klik di sini)


4) Save dan lihat hasilnya.

Selamat mencuba! :)

---

Ikuti tutorial di bawah:

1) Login akaun blogger > Dashboard > Add A Gadget > HTML/Javascript

2) Copy paste kod dibawah pada ruangan html tadi

<style type="text/css">

/* Circle Text Styles */

#outerCircleText {

font-style: normal;

font-weight: normal;

font-family: 'ARIAL';

color: #8D38C9;

position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}

#outerCircleText div {position: relative;}

#outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}

</style>

<script type="text/javascript">

;(function(){

var msg = "TEXT HERE";

var size = 24;

var circleY = 0.75; var circleX = 2;

var letter_spacing = 5;

var diameter = 10;

var rotation = 0.4;

var speed = 0.2;

if (!window.addEventListener && !window.attachEvent || !document.createElement) return;

msg = msg.split('');

var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,

ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],

o = document.createElement('div'), oi = document.createElement('div'),

b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement : document.body,

mouse = function(e){

e = e || window.event;

ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position

xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position

},

makecircle = function(){ // rotation/positioning

if(init.nopy){

o.style.top = (b || document.body).scrollTop + 'px';

o.style.left = (b || document.body).scrollLeft + 'px';

};

currStep -= rotation;

for (var d, i = n; i > -1; --i){ // makes the circle

d = document.getElementById('iemsg' + i).style;

d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) + 'px';

d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';

};

},

drag = function(){ // makes the resistance

y[0] = Y[0] += (ymouse - Y[0]) * speed;

x[0] = X[0] += (xmouse - 20 - X[0]) * speed;

for (var i = n; i > 0; --i){

y[i] = Y[i] += (y[i-1] - Y[i]) * speed;

x[i] = X[i] += (x[i-1] - X[i]) * speed;

};

makecircle();

},

init = function(){ // appends message divs, & sets initial values for positioning arrays

if(!isNaN(window.pageYOffset)){

ymouse += window.pageYOffset;

xmouse += window.pageXOffset;

} else init.nopy = true;

for (var d, i = n; i > -1; --i){

d = document.createElement('div'); d.id = 'iemsg' + i;

d.style.height = d.style.width = a + 'px';

d.appendChild(document.createTextNode(msg[i]));

oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;

};

o.appendChild(oi); document.body.appendChild(o);

setInterval(drag, 25);

},

ascroll = function(){

ymouse += window.pageYOffset;

xmouse += window.pageXOffset;

window.removeEventListener('scroll', ascroll, false);

};

o.id = 'outerCircleText'; o.style.fontSize = size + 'px';

if (window.addEventListener){

window.addEventListener('load', init, false);

document.addEventListener('mouseover', mouse, false);

document.addEventListener('mousemove', mouse, false);

if (/Apple/.test(navigator.vendor))

window.addEventListener('scroll', ascroll, false);

}

else if (window.attachEvent){

window.attachEvent('onload', init);

document.attachEvent('onmousemove', mouse);

};

})();

</script>

Dalam kod di atas, tukarkan :
ARIAL -  font pilihan korang
TEXT HERE - masukkan text korang sendiri
 8D38C9 - kod warna text pilihan korang, boleh pilih kod warna di bawah:
( untuk paparan lebih besar, klik di sini)


3) Save dan lihat hasilnya.

Selamat mencuba! :)

Untuk membuat effect cursor mengeluarkan buih di dalam blog anda, sila ikuti tutorial di bawah:

1) Log in akaun blogger anda

2) Dashboard > Design > Add A Gadget > HTML / Javascript

3) Pada ruang HTML / Javascript, copy paste kod di bawah

<script type="text/javascript" src="https://sites.google.com/site/jombinabelogcursorbuih/bubble%20cursor.js"></script><script type="text/javascript">
// <![CDATA[
var colours=new Array("#FFFF33", "#FFFF33", "#FFFF33", "#FFFF33", "#FFFF33"); // 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>

* Untuk menukar warna bubble, tukarkan kod berwarna kuning di atas kepada kod warna pilihan anda. Pilih kod warna di sini

4) Klik Save dan lihat hasilnya.

Tutorial ini akan menunjukkan anda cara bagaimana untuk menjadikan cursor di dalam blog berkilauan/ sparkle seperti preview yang ditunjukkan di atas. Sila ikuti turorial berikut:

1) Login > Dashboard > Add A Gadget > HTML / Javascript

2) Copy dan paste kod berikut pada ruangan HTML (Pilih kod mengikut warna sparkle pilihan korang) 

Sparkle kuning:

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

Sparkle pink:

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

Sparkle putih:

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

Sparkle ungu:

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

Sparkle hijau:

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

Sparkle hitam:

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

Sparkle biru:

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

Sparkle hijau kebiruan:

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

3) Save dan lihat hasilnya.

Selamat mencuba! :)

Pilih dan copy url yang disediakan bagi setiap icon:

http://dl10.glitter-graphics.net/pub/499/499310ictbntcgpq.gif

http://dl3.glitter-graphics.net/pub/2848/2848713zyjupighyu.jpg

http://dl8.glitter-graphics.net/pub/1400/1400018ocqzge0n40.gif

http://dl10.glitter-graphics.net/pub/499/499310ictbntcgpq.gif

http://dl5.glitter-graphics.net/pub/1341/1341925bxnjqwck4h.png

http://dl6.glitter-graphics.net/pub/1663/1663196u1luba6vac.png

http://dl2.glitter-graphics.net/pub/1027/1027932ajq6co6hh8.png

http://dl5.glitter-graphics.net/pub/539/539925s0ysmv40at.png

http://dl8.glitter-graphics.net/pub/2198/2198928yzwzal4cnd.gif

http://dl3.glitter-graphics.net/pub/1665/1665783u47nt53aur.gif

http://dl7.glitter-graphics.net/pub/3135/3135127yq4db3m6cs.gif

http://dl8.glitter-graphics.net/pub/2889/2889398a0hnk0sw16.gif

http://dl9.glitter-graphics.net/pub/2103/2103809mdcn18ag62.jpg

http://dl6.glitter-graphics.net/pub/1885/1885256ptor804pon.gif

http://dl9.glitter-graphics.net/pub/2225/2225279kdfl5frmaj.gif

http://dl6.glitter-graphics.net/pub/1707/1707266rzpanswhs8.gif

http://dl8.glitter-graphics.net/pub/1244/1244738nkjfdcqzgn.gif

Anda semua mesti dah biasa dan tahu cara nak follow sesebuah blog kan. Tapi macam mana pula cara nak unfollow blog jika korang dah tak suka blog yang korang follow tu? Tutorial bergambar di bawah akan menunjukkan cara bagaimana untuk unfollow blog:


1) Login akaun blogger anda

2) Dashboard > scroll ke bawah dan anda akan jumpa tab " Blogs I'm Following " pada section Reading List. Kemudian klik pada "Manage" seperti yang ditunjukkan dalam gambar di bawah:

3) Klik pada "Setting"

4) Klik "Stop following this site"

4) Kemudian akan muncul kotak pengesahan. Klik "Stop following"

Nota - jika anda ingin unfollow lebih dari 1 blog dalam satu-satu masa, klik pada tab "Sites you're joined" dan pilih sahaja senarai blog yang anda ingin unfollow.

Adakalanya korang tak suka pada sesetengah follower yang mungkin mengganggu "ketenteraman" emosi korang ^_^ . Ok, ada cara untuk remove follower tersebut.

Jom kita mulakan :



Caranya:

1) Sign in akaun blogger

2) Dashboard >> kemudian klik pada follower:

2) Klik pada gambar follower yang korang nak remove:

3) Klik "Block this user"

4) Klik button Block

 5) Selesai! :)

Adakalanya kita taknak orang masuk blog pada masa-masa yang tertentu. Contoh ketika anda nak edit blog dan sebagainya. Caranya adalah dengan menjadikan blog anda private untuk sementara waktu. Ikuti tutorial bergambar di bawah:

1) Sign in akaun blogger >> Dashboard >> Settings

2) Under Setting, klik pada tab Permission >> kemudian tick dekat "only blog authors"

 

3) Kemudian, paparan seperti dalam gambar di bawah akan muncul. Seterusnya klik "Allow Authors Only"

4) Done. Sekarang blog anda telah menjadi private.

* Bila anda nak open balik blog, tick pada "Anybody" under tab Permission.

-Sekian-

Kebiasaannya widget-widget seperti shoutbox, online visitor counter, recent post with thumbnail dan banyak lagi element widget yang penting untuk blog, memerlukan kita untuk memasang kod script yang berasaskan Html atau javascript. Penambahan yang ingin dilakukan biasanya akan melalui perkara yang sama iaitu kod yang diperolehi perlu di copy dan di'paste'kan di ruangan html/javascript.

Tutorial kali ini akan menunjukkan pada anda bagaimana cara untuk letak kod HTML / Javascript pada blog.

1)  Login akaun blogger anda

2)
 

3) Bawah tab page element, klik add a gadget




















4)
 


5)
 
6) Save dan lihat hasilnya. Kedudukan kod itu juga boleh di ubah dengan hanya drag pada mana-mana bahagian page element itu, samada bahagian header, footer, sidebar kanan atau sidebar kiri. Selepas drag, jangan lupa klik save.

Selamat mencuba! :)

Korang tahu tak apa dia "Attribution"? Cuba scroll ke bahagian paling bawah sekali dalam blog korang..korang akan jumpa satu perkataan yang tertera Powered by Blogger. Perkataan tu boleh dibuang. Caranya:

1) Sign in akaun blogger

2) Dashboard > Design > Edit HTML > Tick kotak "Expand Widget Templates"

3) Dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari kod di bawah:

<b:widget id='Attribution1' locked='true' title='' type='Attribution'>

4) Bila dah jumpa, tukar perkataan true kepada false

5) Kemudian klik preview, kalau takde error, klik save template.

6) Lepas tu buka blog korang dan scroll ke bahagian bawah sekali...still ada lagi perkataan Powered by Blogger kan? ok, klik pada button edit attribution tu (gambar spanar), then klik remove..

7) Selesai! Powered by Blogger dah hilang! :)


Selamat mencuba! :)

Selain disable right click, anda juga boleh disable highlight text untuk mengelakkan artikel / entry post anda di copy bulat-bulat dengan mudahnya.

Caranya:

1) Sign in akaun blogger

2) Dashboard > Design > Add A Gadget > Html / Javascript

3) Copy paste kod di bawah pada ruang Html / Javascript tadi

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

4) Save dan lihat hasilnya.

Nota : Untuk kesan disable highlight yang lebih cepat (sebelum habis loading blog) drag html tadi ke bahagian atas post atau header. Selamat mencuba! :)

Cara dapatkan url image di Google search

Ada kalanya korang memerlukan url gambar terutamanya apabila melibatkan trick yang hendak diletakkan pada blog. URL gambar biasanya boleh di ambil dengan hanya search gambar di image google, right klik pada image tersebut, dan copy image location / copy image url.

 

 Cara dapatkan url image di dalam post
URL gambar juga boleh diambil di dalam post. Apabila anda upload gambar dalam post, kod seperti di bawah akan muncul di ruang edit html (sebelah compose)

<div class="separator" style="clear: both; text-align: center;">

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy7mo5_zFqJMTBSiHER1m58LQzZyMPlorhSH_JsV_aWfMmP3xowBIqPlo6g5bcI7C2IF28s26ZBqxkO98q2juvzeDxGcq8f2BMjDBTEt6jQNWxcSTzVKSfZ4PEWvWd9zIe7ZdWrgk1MR8/s1600/040.gif" imageanchor="1" style=""><img border="0" height="130" width="130" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy7mo5_zFqJMTBSiHER1m58LQzZyMPlorhSH_JsV_aWfMmP3xowBIqPlo6g5bcI7C2IF28s26ZBqxkO98q2juvzeDxGcq8f2BMjDBTEt6jQNWxcSTzVKSfZ4PEWvWd9zIe7ZdWrgk1MR8/s400/040.gif" /></a></div>

Pada bahagian src dalam kod gambar tersebut,  terdapat url (berwarna merah dalam kod di atas). Url itulah yang perlu anda copy sebagai mewakili gambar yang anda upload tadi.

Selain itu, URL gambar juga boleh diambil di mana-mana image hosting, contohnya imageshack, photobucket dan lain-lain lagi. Buka akaun, upload gambar anda sendiri dan kemudian dapatkan url gambar yang anda upload tu.

Cara dapatkan url image di Imageshack
Search gambar / upload gambar sendiri, kemudian right click pada gambar dan copy image location. Ataupun anda create akaun terlebih dahulu, kemudian just copy direct link yang telah disediakan pada setiap gambar yang anda cari atau upload di Imageshack.

Imageshack

Cara dapatkan url image di Photobucket
Di Photobucket, anda tak perlu register untuk copy direct link. Just search gambar dan terus copy direct link yang disediakan. Jika nak upload gambar sendiri, kena sign up terlebih dahulu.

Photobucket

Cara dapatkan url image di Glitter Graphics

1) Buka Glitter Graphics, search dulu image yang korang nak

2) Dah pilih, klik pada image, scroll ke bawah dan korang akan jumpa kod html yang disediakan. Copy kod tersebut

3) Buka Notepad, paste kod yang korang copy tadi dalam notepad.

4) Pada kod tu, korang akan jumpa src="http://dl7.glitter-graphics.net/xxxxxxxxxxxx.jpg" . Itu la url gambar yang korang kena ambil.

5) Copy url tersebut ( cth: http://dl7.glitter-graphics.net/pub/332/332097ydjn3p1rep.jpg )

6) Done! :)