[Trick4Fun] Tutorial Membuat Harlem Shake Pada Semua Web Page

Kali ni saya nak buat entri yang enjoy2 sikit...buat apa2 webpage yang korang buka jadi bergoyang macam harlem shake. Korang cuba la..hehe

Tutorial:

1. Korang copy code dibawah

javascript:(function(){function c(){var e=document.createElement("link");e.setAttribute("type","text/css");e.setAttribute("rel","stylesheet");e.setAttribute("href",f);e.setAttribute("class",l);document.body.appendChild(e)}function h(){var e=document.getElementsByClassName(l);for(var t=0;t<e.length;t++){document.body.removeChild(e[t])}}function p(){var e=document.createElement("div");e.setAttribute("class",a);document.body.appendChild(e);setTimeout(function(){document.body.removeChild(e)},100)}function d(e){return{height:e.offsetHeight,width:e.offsetWidth}}function v(i){var s=d(i);return s.height>e&&s.height<n&&s.width>t&&s.width<r}function m(e){var t=e;var n=0;while(!!t){n+=t.offsetTop;t=t.offsetParent}return n}function g(){var e=document.documentElement;if(!!window.innerWidth){return window.innerHeight}else if(e&&!isNaN(e.clientHeight)){return e.clientHeight}return 0}function y(){if(window.pageYOffset){return window.pageYOffset}return Math.max(document.documentElement.scrollTop,document.body.scrollTop)}function E(e){var t=m(e);return t>=w&&t<=b+w}function S(){var e=document.createElement("audio");e.setAttribute("class",l);e.src=i;e.loop=false;e.addEventListener("canplay",function(){setTimeout(function(){x(k)},500);setTimeout(function(){N();p();for(var e=0;e<O.length;e++){T(O[e])}},15500)},true);e.addEventListener("ended",function(){N();h()},true);e.innerHTML=" <p>If you are reading this, it is because your browser does not support the audio element. We recommend that you get a new browser.</p><p>";document.body.appendChild(e);e.play()}function x(e){e.className+=" "+s+" "+o}function T(e){e.className+=" "+s+" "+u[Math.floor(Math.random()*u.length)]}function N(){var e=document.getElementsByClassName(s);var t=new RegExp("\\b"+s+"\\b");for(var n=0;n<e.length;){e[n].className=e[n].className.replace(t,"")}}var e=30;var t=30;var n=350;var r=350;var i="//s3.amazonaws.com/moovweb-marketing/playground/harlem-shake.mp3";var s="mw-harlem_shake_me";var o="im_first";var u=["im_drunk","im_baked","im_trippin","im_blown"];var a="mw-strobe_light";var f="//s3.amazonaws.com/moovweb-marketing/playground/harlem-shake-style.css";var l="mw_added_css";var b=g();var w=y();var C=document.getElementsByTagName("*");var k=null;for(var L=0;L<C.length;L++){var A=C[L];if(v(A)){if(E(A)){k=A;break}}}if(A===null){console.warn("Could not find a node of the right size. Please try a different page.");return}c();S();var O=[];for(var L=0;L<C.length;L++){var A=C[L];if(v(A)){O.push(A)}}})()

2. Pada webpage yang korang buka,(tak kira la fb ke, twitter , youtube atau ape2 page), klik kanan dan pilih Inspect element pada seterusnya klik pada tab Console .

3. Paste code pada ruangan console dan klik Enter.

4. Lihat webpage korang sedang menari...hahaha

Recent Post (Thumbnail) Pada Sidebar

1. Login ke Dashboard blogger.

2. Klik butang " More Options (rujuk no 1 pada GAMBAR 1) " dan klik " Layout (rujuk no 2 pada GAMBAR 1) ".

GAMBAR 1

3. Pada halaman Layout, klik " Add a Gadget (rujuk no 3 pada GAMBAR 2) " pada mana-mana bahagian yang anda nak untuk letakkan kod javascript tu nanti.

GAMBAR 2

4. Cari HTML/Javascript dan klik butang tambah (rujuk no 4 pada GAMBAR 3).

GAMBAR 3

5.  Copy (CTRL+C) kod javascript dibawah:

<div id='bp_recent'></div>
<script style='text/javascript' src='https://sites.google.com/site/faiztutorial/home/javascript/recent_post_with_thumbnail.js'></script>
<script style='text/javascript'>
var numberOfPosts = 20;
var showPostDate = false;
var showSummary = false;
var titleLength = 0;
var showCommentCount = false;
var showThumbs = true;
var showNoImage = true;
var imgDim = 55;
var imgFloat = 'left';
var myMargin = 5;
var mediaThumbsOnly = true;
var showReadMore = false;
</script>
<script src='http://faiz-tutorial.blogspot.com/feeds/posts/summary?max-results=20&orderby=published&alt=json-in-script&callback=bprecentpostswiththumbnails'></script>

## Gantikan:

• http://faiz-tutorial.blogspot.com - Tukarkan kepada URL blog anda.

6. Paste (CTRL+V) pada ruang Content (rujuk no 5 pada GAMBAR 4)

GAMBAR 4

7. Seterusnya klik " Save (rujuk no 6 pada GAMBAR 4 ) " dan lihat la hasilnya..

Tutorial Unlock Modem Broadband Huawei

Entri kali ni saya nak berkongsi cara untuk unlock modem broadband huawei. Kebanyakan modem broadband yang diperolehi dari satu provider semasa melanggan broadband telah disekat untuk sim card dai provider yang lain dan hanya sim card nya saja yang boleh menggunakan modem tersebut. Contohnya modem dari celcom , just sim celcom je boleh guna modem tersebut.. Tapi jangan risau modem anda boleh di unlock menggunakan satu aplikasi kecil iaitu Universal Master Code.

Download:

• Universal Master Code

 Password:  faiz-tutorial.blogspot.com

Tutorial:

1. Buka Universal MasterCode.exe

2. Klik pada tab menu Huawei.

3. Masukkan No EMEI Modem anda pada ruang EMEI.

4. Klik Calculate dan akan terpapar 2 jenis code iaitu UNLOCK dan FLASH.

5. Masukkan sim card yang tidak diterima pakai oleh modem tersebut dan plug in ke pc anda.

6(i). Setelah muncul popup Unlock Code pada Broaband Manager , anda isikan dengan UNLOCK code yang anda telah generate .

6(ii). Jika modem anda tidak keluar popup seperti modem E1750 and E1550 ,gunakan aplikasi >HUAWEI MODEM Code Writer.exe : 

 (a). Buka aplikasi HUAWEI MODEM Code Writer.exe

 (b). Klik pada butang  Please select Com Port 

 (c). Klik pada butang Detect ,  pilih ComPort modem anda dan klik Accept.

 (d). Klik pada butang Unlock Modem .

 (e). Masukkan Code UNLOCK yang anda sudah generate pada awal tutorial tadi dan klik OK.

SELESAI....Sekarang anda boleh menggunakan modem anda, tak kira la untuk guna SIM celcom ,maxis , digi atau apa2 pun... Gud luck..

HUAWEI SUPPORTED:

E156 E155, E1550 E1552, E156G E160, E160G E161 E166,
169 E169G, E170, E172, E176 E1762 E180 E182E E196 E226 E270,
E800,E870 E880 EG162 E880 EG162 EG162G EG602 EG602G,
E271, E272, E510 E612 E618 E630 ,E620 E630+ E660 E660a,
VODAFONE

K2540, K3515 , K3520, K3565, K3520, K3565

Jom Belajar CSS - Part 1

• Apa itu CSS?

Cascading Style Sheets (CSS) merupakan satu himpunan kod format sesuatu laman web. Ia boleh digunakan secara dalaman (bersama-sama dengan kod HTML dalam satu fail) atau secara luaran (fail CSS dan HTML berasingan).

Antara kelebihannya adalah sesuatu format boleh dilakukan secara berulang kali dan proses penyuntingan dapat dilakukan dengan cepat. Contohnya, katakan lah kita inginkan sesuatu jadual mempunyai petak tajuk berwarna biru dan petak biasa berwarna putih manakala tulisan menggunakan arial dan bewarna kuning. Secara manual, pasti memakan masa terutama apabila bilangan jadual yang banyak. Bayangkan kalau kita nak menukar warna teks, kita perlu ke setiap teks untuk menukarnya.

Dengan CSS, kita hanya perlu tukar kod dalam CSS sahaja dan secara automatik, semua kod HTML yang menggunakan CSS turut dikemaskinikan

(Sumber: wikipedia)

• CSS Syntax

CSS Syntax terdiri daripada 2 bahagian iaitu Selector dan Declaration. Declaration pula terbahagi kepada 2 iaitu Property dan Value.

#  Format penulisan CSS:

CONTOH: 

# Format Penulisan  CSS jika Selector lebih dari satu:

# Format Penulisan CSS jika Selector dan Declaration(Property & Value) lebih dari satu:

# Format Penulisan CSS Selector dan Declaration(Property & Value) yang lebih mudah untuk difahami:

h1 {

  color: blue;

  font-family: arial,helvetica,"sans serif";

  text-align: center;

   }

• CSS Comments

Komen digunakan untuk menerangkan setiap kod yang anda buat . Dengan komen ini ,akan dapat membantu dan memudahkan anda untuk proses pengeditan kod css anda kemudian hari. Untuk menulis komen anda perlu menggunakan tag pembuka " /* " dan penutup " */ " . Semua teks yang ditulis diantara  tag " /* " dan " */ " tidak  akan terpapar pada layar pelayar(browser) dan hanya di anggap sebagai catatan.

CONTOH:

/*LETAKKAN KOMEN ANDA DISINI*/

h1, h2, h3 {

  color: blue;

  font-family: arial,helvetica,"sans serif";

  text-align: center;

   }

CSS3 - Image Filter Effect

Posting kali ni saya nak kongsi mengenai kod CSS3 untuk membuat efek filter pada gambar. Disini saya akan menunjukkan beberapa jenis filter yang boleh digunakan di blogger anda. Kalau nak gunakan kat website pun boleh....Cube anda sentuh contoh gambar2 dibawah untuk lihat efek k..

Efek filter + Hover

HUE ROTATE

CONTOH: HUE ROTATE

img{ box-shadow:0px 0px 0px #333; transition:1500ms; -webkit-transition:1500ms; -moz-transition:1500ms; -o-filter-transition:1500ms; -ms-transition:1500ms; } img:hover{ filter: hue-rotate(360deg); -webkit-filter:hue-rotate(360deg); -moz-filter:hue-rotate(360deg); -o-filter: hue-rotate(360deg); -ms-filter: hue-rotate(360deg); transition:1500ms; -webkit-transition:1500ms; -moz-transition:1500ms; -o-filter-transition:1500ms; -ms-transition:1500ms; }

GREYSCALE

CONTOH: GREYSCALE

img{ box-shadow:0px 0px 0px #333; transition:1500ms -webkit-transition:1500ms; -moz-transition:1500ms; -o-filter-transition:1500ms; -ms-transition:1500ms; } img:hover{ filter: grayscale(1); -webkit-filter: grayscale(1); -moz-filter: grayscale(1); -o-filter: grayscale(1); -ms-filter: grayscale(1); transition:1500ms; -webkit-transition:1500ms; -moz-transition:1500ms; -o-filter-transition:1500ms; -ms-transition:1500ms; }

BLUR

CONTOH: BLUR

img{ box-shadow:0px 0px 0px #333; transition:1500ms; -webkit-transition:1500ms; -moz-transition:1500ms; -o-filter-transition:1500ms; -ms-transition:1500ms; } img:hover{ filter: blur(5px); -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); transition:1500ms; -webkit-transition:1500ms; -moz-transition:1500ms; -o-filter-transition:1500ms; -ms-transition:1500ms; }

SATURATE

CONTOH: SATURATE

img{ box-shadow:0px 0px 0px #333; transition:1500ms; -webkit-transition:1500ms; -moz-transition:1500ms; -o-filter-transition:1500ms; -ms-transition:1500ms; } img:hover{ filter: saturate(500%); -webkit-filter: saturate(500%); -moz-filter: saturate(500%); -o-filter: saturate(500%); -ms-filter: saturate(500%); transition:1500ms; -webkit-transition:1500ms; -moz-transition:1500ms; -o-filter-transition:1500ms; -ms-transition:1500ms; }

SEPIA

CONTOH: SEPIA

img{ box-shadow:0px 0px 0px #333; transition:1500ms; -webkit-transition:1500ms; -moz-transition:1500ms; -o-filter-transition:1500ms; -ms-transition:1500ms; } img:hover{ filter: sepia(1); -webkit-filter: sepia(1); -moz-filter: sepia(1); -o-filter: sepia(1); -ms-filter: sepia(1); transition:1500ms; -webkit-transition:1500ms; -moz-transition:1500ms; -o-filter-transition:1500ms; -ms-transition:1500ms; }

INVERT

CONTOH:  INVERT

img{ box-shadow:0px 0px 0px #333; transition:1500ms; -webkit-transition:1500ms; -moz-transition:1500ms; -o-filter-transition:1500ms; -ms-transition:1500ms; } img:hover{ filter: invert(1); -webkit-filter: invert(1); -moz-filter: invert(1); -o-filter: invert(1); -ms-filter: invert(1); transition:1500ms; -webkit-transition:1500ms; -moz-transition:1500ms; -o-filter-transition:1500ms; -ms-transition:1500ms; }

BRIGHTNESS

CONTOH: BRIGHTNESS

img{ box-shadow:0px 0px 0px #333; transition:1500ms; -webkit-transition:1500ms; -moz-transition:1500ms; -o-filter-transition:1500ms; -ms-transition:1500ms; } img:hover{ filter: brightness(50%); -webkit-filter: brightness(50%); -moz-filter: brightness(50%); -o-filter: brightness(50%); -ms-filter: brightness(50%); transition:1500ms; -webkit-transition:1500ms; -moz-transition:1500ms; -o-filter-transition:1500ms; -ms-transition:1500ms; }

CONTRAST

CONTOH: CONTRAST

img{ box-shadow:0px 0px 0px #333; transition:1500ms; -webkit-transition:1500ms; -moz-transition:1500ms; -o-filter-transition:1500ms; -ms-transition:1500ms; } img:hover{ filter: contrast(0.3); -webkit-filter: contrast(0.3); -moz-filter: contrast(0.3); -o-filter: contrast(0.3); -ms-filter: contrast(0.3); transition:1500ms; -webkit-transition:1500ms; -moz-transition:1500ms; -o-filter-transition:1500ms; -ms-transition:1500ms; }

OPACITY

CONTOH: OPACITY

img{ box-shadow:0px 0px 0px #333; transition:1500ms; -webkit-transition:1500ms; -moz-transition:1500ms; -o-filter-transition:1500ms; -ms-transition:1500ms; } img:hover{ opacity:0.3; transition:1500ms; -webkit-transition:1500ms; -moz-transition:1500ms; -o-filter-transition:1500ms; -ms-transition:1500ms; }


Efek filter tanpa Hover

HUE ROTATE img{ filter: hue-rotate(360deg); -webkit-filter:hue-rotate(360deg); -moz-filter:hue-rotate(360deg); -o-filter: hue-rotate(360deg); -ms-filter: hue-rotate(360deg); }	GRAYSCALE img{ filter: grayscale(1); -webkit-filter: grayscale(1); -moz-filter: grayscale(1); -o-filter: grayscale(1); -ms-filter: grayscale(1); }	BLUR img{ filter: blur(5px); -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); }
SATURATE img{ filter: saturate(500%); -webkit-filter: saturate(500%); -moz-filter: saturate(500%); -o-filter: saturate(500%); -ms-filter: saturate(500%); }	SEPIA img{ filter: sepia(1); -webkit-filter: sepia(1); -moz-filter: sepia(1); -o-filter: sepia(1); -ms-filter: sepia(1); }	INVERT img{ filter: invert(1); -webkit-filter: invert(1); -moz-filter: invert(1); -o-filter: invert(1); -ms-filter: invert(1); }
BRIGHTNESS img{ filter: brightness(50%); -webkit-filter: brightness(200%); -moz-filter: brightness(50%); -o-filter: brightness(50%); -ms-filter: brightness(50%); }	CONTRAST img{ filter: contrast(0.3); -webkit-filter: contrast(0.3); -moz-filter: contrast(0.3); -o-filter: contrast(0.3); -ms-filter: contrast(0.3); }	OPACITY img{ opacity:0.3; }

Text Effect - Glow Rainbow

FAIZ-TUTORIAL

1. Login ke Dashboard blogger.

2. Klik butang " More Options (rujuk no 1 pada GAMBAR 1) " dan klik " Layout (rujuk no 2 pada GAMBAR 1) ".

GAMBAR 1

3. Pada halaman Layout, klik " Add a Gadget (rujuk no 3 pada GAMBAR 2) " pada mana-mana bahagian yang anda nak untuk letakkan kod javascript tu nanti.

GAMBAR 2

4. Cari HTML/Javascript dan klik butang tambah (rujuk no 4 pada GAMBAR 3).

GAMBAR 3

5.  Copy (CTRL+C) kod javascript dibawah:

LETAKKAN TEXT ANDA DISINI

## Gantikan:

• LETAKKAN TEXT ANDA DISINI - Tukarkan kepada teks anda.
• LETAK LINK ANDA DISINI - Tukarkan kepada link anda. Cth: http://faiz-tutorial.blogspot.com

6. Paste (CTRL+V) pada ruang Content (rujuk no 5 pada GAMBAR 4)

GAMBAR 4

7. Seterusnya klik " Save (rujuk no 6 pada GAMBAR 4 ) " dan lihat la hasilnya..

Cursor Effect - Bubble Sparkling

1. Login ke Dashboard blogger.

2. Klik butang " More Options (rujuk no 1 pada GAMBAR 1) " dan klik " Layout (rujuk no 2 pada GAMBAR 1) ".

GAMBAR 1

3. Pada halaman Layout, klik " Add a Gadget (rujuk no 3 pada GAMBAR 2) " pada mana-mana bahagian yang anda nak untuk letakkan kod javascript tu nanti.

GAMBAR 2

4. Cari HTML/Javascript dan klik butang tambah (rujuk no 4 pada GAMBAR 3).

GAMBAR 3

5.  Copy (CTRL+C) kod javascript dibawah:

<script type="text/javascript" src="http://www.freewebs.com/p.js"></script><script type="text/javascript">
// <![CDATA[
var colours=new Array("#ff0080", "#ff0080", "#ff0080", "#ff0080", "#ff0080"); // colours for top, right, bottom and left borders and background of bubbles
var bubbles=66; // 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>

6. Paste (CTRL+V) pada ruang Content (rujuk no 5 pada GAMBAR 4)

GAMBAR 4

7. Seterusnya klik " Save (rujuk no 6 pada GAMBAR 4 ) " dan lihat la hasilnya..