Widget Misterlinky

Widget Misterlinky adalah widget yang berfungsi untuk memudahkan pelawat blog meninggalkan link blog mereka pada mana-mana blog yang memasang widget ini. Dengan adanya senarai blog pengunjung, mudah untuk anda melakukan aktiviti "blogwalking". Selain dari itu, dengan widget Misterlinky, pemilik blog diberi pilihan untuk delete mana-mana link yang mereka tidak kehendaki.

Dapatkan widget ini di www.misterlinky.net. Anda perlu mendaftar terlebih dahulu untuk mendapatkan widget ini.Cara nak daftar:

Akan muncul paparan pemberitahuan email telah dihantar kepada anda:

 

Cek email yang dihantar oleh Misterlinky. Kemudia copy kod yang diberi dan paste dalam kotak confirmation code tadi:

 

Login akaun menggunakan id dan password yang anda daftar tadi:

 

Lastly, copy kod widget yang diberikan:

Add kod html widget yang anda copy tadi pada blog anda. Jika tak tahu cara nak add kod HTML pada blog, sila refer tutorial ini.

Selamat mencuba! :)

Read more »

Posted in: Tips nGEBLOg

Efek Link Bergoyang / Nudging

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! :)

Read more »

Posted in: Tips nGEBLOg

Efek animated image apabila cursor menyentuh link

review:


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! :)

Read more »

Posted in: Tips nGEBLOg

Cara buat efek zoom pada image dalam post - Efek 2 (opacity image)

Apabila mouse over, gambar tersebut akan auto zoom in dan zoom out. Ikuti tutorial di bawah untuk mengaplikasikan trick ini pada blog anda:

1) Sign in akaun blogger anda

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

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

]]></b:skin>

4) Copy paste kod di bawah sebelum kod ]]></b:skin> yang anda cari dalam langkah 3 tadi

.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, rupa kod anda akan kelihatan seperti ini:

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

5) Akhir sekali, klik Preview dan jika tiada error, klik Save.

Selamat mencuba! :)

Read more »

Posted in: Tips nGEBLOg

Cara buat efek zoom pada image dalam post - Efek 2 (opacity image)

Apabila mouse over, gambar tersebut akan auto zoom in dan zoom out. Ikuti tutorial di bawah untuk mengaplikasikan trick ini pada blog anda:

1) Sign in akaun blogger anda

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

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

]]></b:skin>

4) Copy paste kod di bawah sebelum kod ]]></b:skin> yang anda cari dalam langkah 3 tadi

.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, rupa kod anda akan kelihatan seperti ini:

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

5) Akhir sekali, klik Preview dan jika tiada error, klik Save.

Selamat mencuba! :)

Read more »

Posted in: Tips nGEBLOg

Cara Disable Right Click / Disable Copy

Salah satu cara untuk megelakkan entry post / imej dalam blog di copy, adalah dengan cara disable right click, seperti preview di bawah:



Caranya :

1) Sign in akaun blogger anda

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

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

<script language=JavaScript>
<!--

//jombinabelog


var message="Masukkan Mesej Anda Disini";

///////////////////////////////////
function clickIE4(){
if (event.button==2){
alert(message);
return false;
}
}

function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){
alert(message);
return false;
}
}
}

if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById){
document.onmousedown=clickIE4;
}

document.oncontextmenu=new Function("alert(message);return false")

// -->
</script>

4) Masukkan mesej anda, kemudian save.

Selamat mencuba! :)

Read more »

Posted in: Tips nGEBLOg

Cara Disable Highlight Text Dalam Blog

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! :)

Read more »

Posted in: Tips nGEBLOg