Tutorial : Header Hover (Dissapear)

Assalamualaikum :)
Bila korang hover dekat header nenti header tu akan hilang, some people kata itunampak sangat ohsyemm. Awak nak ? Jom follow tuto ni. Kalau tak jadik maybe this coding tak sesuai for your blog.

1.  Sign In Blogger >> Template >> Edit HTML >> Proceed

2. Ctrl + F code ni  :

#header {

ATAU

/* Header

3. Copy code ni :

#header:hover {
padding-left:160px;
-webkit-transition: 2.5s;
-webkit-transform: rotate(6deg);
opacity:.01;
}

4. Pastekan di BAWAH code yang korang jumpa tu salah satu tu.

NOTA :
BIRU : You can change it to right or left
ORANGE : Nak tukar boleh tukar
MERAH : Nak lambatkan lagi tukar kepada 3 and so on
HIJAU : Nak tukar boleh tukar sendiri 

Nati rupa code yang korang dah tempek tu macam dekat bawah ni :

5. Preview and Save :)

CREDIT TO : KAK AMALINA

Tutorial : Header Hover Image

Assalamualaikum :)
Contohnya bila korang hover dekat header nanti dia akan keluar perkataan. Tak faham ? Tengok bawah :

Before hover :

After Hover :

Dah faham kan ? So you need two kind of different header and upload kan salah satu tu dekat photobucket or imgur. Tak tau nak buat header ? Cek SINI . Meh start. 

1. Sign In Blogger >> Template >> Edit HTML >> Proceed 

2. Ctrl + F cari code ni : 

h1.title {

3. Copy code bawah ni :

#header:hover {
background: url(URL HEADER 2);
}

4. Pastekan di ATAS h1.title { tadi

5. Preview and Save :)

NOTA : Ganti BIRU dnegan URL HEADER KEDUA YANG AWAK DAH UPLOAD TU k ?

CREDIT TO : SIS LETTHA

Tutorial : Close Button

Assalamualaikum :)
Korang tau kan close button tu apa ? Maknanya bila korang click satu link tu dia akan close sendiri. Biasanya orang letak kat sidebar lah kan. jom start {Credit diletak pada akhir post tq}

1. Sign In Blogger >> Layout >> Add A Gadget >> HTML Java/Script

2. Copy code ni :

 <a href="javascript:window.close();">AYAT KORANG</a>

3. Paste di HTML Java/Script

4. Preview and Save :)

ATTENTION !
Kan biasanya kalau tekan HERE atau SINI nanti dia close kan ? Korang jangan letak ayat HATE ME ? CLICK HERE semua dekat AYAT KORANG tu. Just letak HERE je. Yang selebihnya letak di luar code. Faham tak ? Tengok bawah :

P/S : Harap faham. Sorri tuto mcm kelings ;~;

CREDIT TO : KAK PAH and FAQIHAH

Tutorial : Button Like di Post

Assalamualaikum :)
Button ni kira macam like lah kan macam dekat fb nun. Kalau orang suka entry awak nanti dia akan klik lelaju. Contoh :

1. Sign In BLogger >> Template >> Edit HTML >> Proceed >> Tick Expand Widget

2. Ctrl + F code bawah ni :

data:post.body

3. Copy code bawah ni :

<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&amp;layout=standard&amp;show-faces=true&amp;width=530&amp;height=60&amp;action=like&amp;colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:530px; height:60px'/>

4. Paste kan di BAWAH  data:post.body

5. Preview and Save :)

CREDIT TO : AINAA

Tutorial : Note Below Post

Assalamualaikum :)
Bila korang buat tuto ni, korang akan ada perkataan di hujung post Contohnya macam "Dah baca jangan lupa comennt !" "Thanks reading !" etc bla bla.  Rupa dia macam dekat bawah ni :

1. Sign In Blogger >> Template >> Edit HTML >> Proceed >> Tick Expand Widget Template

2. Ctrl + F code bawah ni :

<data:post.body/> 

3. Copy code bawah ni :

<hr/><center>AYAT KORANG</center><hr/>

4. Paste di  BAWAH   <data:post.body/> tadi.

5. Preview and Save :)

*Gantikan Ayat Korang dengan ayat sendiri lah*

CREDIT : AIINA

Tutorial : Sparkling Cursor

Assalamualaikum :)
Sparkling cursor tu ialah bila korang gerakkan cursor je nanti ada sparkle sparkle turun dari situ. Tak ubah dek sang paghi paghi *ayat takleh belahhan* So let's get started

1. Sign In Blogger >> Layout >> Add A Gadget >> HTML Java/Script

2. Copy code bawah ni :

<script type='text/javascript'>

</script>

<script type='text/javascript'>// <![CDATA[var colour="#000000";var sparkles=100;

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(1, 5);var rdow=createDiv(5, 1);rats.appendChild(rlef);rats.appendChild(rdow);rlef.style.top="3px";rlef.style.left="0px";rdow.style.top="0px";rdow.style.left="3px";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()*3;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+"px";div.style.width=width+"px";div.style.overflow="hidden";div.style.backgroundColor=colour;return (div);}// ]]></script>

NOTA : Gantikan BIRU dengan colour code fav awak. Boleh cari SINI

3. Paste di HTML Java/Script

4. Preview and Save :)

Tutorial : Image Hover Melengkung

Assalamualaikum :)
Bila korang hoverkan image nanti gambar tu akan jadi melengkung / curve. If you think that cute and you want to add into your blog follow this tutorial till the end. Any curiosity, just ask me in comment :)

1. Sign In Blogger >> Template >> Edit HTML >> Proceed >> Tick Expand Widget

2. Ctrl + F code ni :

img {

3. Copy code bawah :

img:hover {
-webkit-transition: 0.3s;
border-radius:20px;
}

4. Paste kan di BAWAH code img { . Contoh macam dekat bawah ni :

 

5. Preview and Save :) 

LITTLE THINGS : 

BLUE : Kalau nak lambatkan tukar kepad 0.1s and so on

RED : Kelengkungannya. Bigger the number, curvier the border. Simple as that right ?

CREDIT TO : KAK AMALINA

Tutorial : Link Hover (Shadow)

Assalamualaikum :)
Link Hover Bershadow ni ialah link hover yang bila korang hover mana mana link dekat blog nanti perkataan dia ada shadow belakang dia. Ohsemm tak ? Jum start

1. Sign In Blogger >> Template >> Edit HTML >> Proceed >> Tick Expand Widget

2. Ctrl + F code ni :

]]></b:skin>

3. Copy code bawah ni :

a:hover { text-shadow: 1px 1px 3px #000000; text-decoration: none; }

4. Paste kan di ATAS ]]></b:skin>

NOTA
Gantikan merah tu dengan colour code yang korang nak. Cek SINI

5. Preview and Save :)

Tutorial : Online Users

Assalamualaikum :)
Online users ialah pengira jumlah pembaca blog yang ada dalam satu masa. Melalui situ kita dapat tahu siapa yang dok skodeng korang tu heehe. Tapi kalau korang view anda 1 je tu maknanya korang sendirilah k.  Yang ni original tuto punya. Takdak copy punya. Contohnya ni dekat blog aii :

1. Klik link ni = http://www.freeonlineusers.com/

2. Korang kena register dulu kaulau nak buat. Jangan malas malas, pi register sekarang hehe :p
Isi lah apa yang patut tu. Dah siap klik Register.

3. Dia akan keluar macam dekat bawah ni bila korang dah siap register :

Tu maknanya korang dah siap register, but korang kena buka email korang dulu untuk sahkan oendaftaran. Tak kesah lah Yahoo ke Gmail ke apa mail ke tak kisah.

4, Bila bukak email dia kasik tu dia, korang akan nampak ni :

Maknanya account korang dah siap, klik link yang atas tu and dia akan bawak korang secara automatik ke website onlinefreeusers.com tu

5. After dah sampai ke web freeonlineusers tu, you will see this :

Bila korang dah sah bolehlah log in macam biasa.

6. Log In Onlinefreeuser korang macam biasa

7. Klik Link Code yang dilabel tuu

 

7. Dia akan keluar macam dekat bawh ni. Letak your URL blog and then klik Add

8. Nanti dia akan keluar banyak banyak ni. Korang kena edit lah. Harap faham. I can't upload gmbar sbb ada technical prob.

Font Colour : Guna code colour fav u alls. Boleh cari SINI

Link Text : Tukar lah kepada perkataan korang sendiri E.g : Mak Jemah terbang, Joyah bergolek or whatever

9. Klik Generate Code.

10. Nanti ada banyak banyak code kan ? Copy them

11. Sign In Blogger >> Layout >> Add A Gadget >> HTML Java/Script

12. Paste situ and Save !

Tutorial : Open Link In New Tab

Assalamualaikum :)
Tuto ni ialah saya nak ajar macam mana awak nak buat Auto Open Link In New Tab. Maknanya bila readers tekan je mana mana link dekat blog korang, nanti dia akan open dekat new tab. Kan kagi mudah tu ? Let's get started.

1. Sign In Blogger >> Template >> Edit HTML >> Proceed

2. Ctrl + F code ni :

<head>

3. Copy code bawah ni :

<base target='_blank'/>

  

4. Paste code ni di BAWAH <head> tadi


5. Preview and Save :)