Chapter 15 || Tutorial : Nak add skrip fade-out page dalam blogger

| Posting by: edi | 


Bismillahirrahmanirrahim,

Ini adalah tutorial camna nak buat page fade-out effect yang mana ianya antara cosmetic change yang kita boleh lakukan utk mewarnai blog kita acceh ceh... ayaaat.  Waktu kita klik paultan pautan spt tajuk pos, label pautan, arkib, pautan navigasi, dan lain-lain page kita nampak seolah olah fadding out a lil bit second page lita tu, ngomong jowo lagi aku... camtu laa lbih kurang. 

Boleh rujuk page ni tuk demo

STEP 1

• Log in blogger 
• Pi kat Template > Edit HTML

STEP 2

• Blogger yang baru ni dah takyah klik expand dah
• Klik je tang mana2 dalam area skrip HTML tu
• teakn Ctrl+F
• Taip </head> dalam kotak search field tu 

STEP 3

• Masukkan skrip berikut betol2 kat atas line </head> tadi (seperti yg dihilghlight kat pic atas tu)

___________________________________________________________________________________

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$("body").css("z-index", "-10");
$("body").fadeIn(0);

$("a").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(500, redirectPage); });
function redirectPage() {
window.location = linkLocation;
}
});
//]]>
</script>
<style>
html {
background-color: #F2F2F2; /* Color fading */
}
</style>

_________________________________________________________________________________________________

STEP 4

• Klik Save Template, then terpulang nak view terus blog hangpa ka nak tunggu tahun depan nak tgk balik.. 

So setle, membantu tak? oh lupa utk  Color Coding (in green) dlm coding tu bolehlaa diganti dgn color code yg lain. yg ni kaler grey. kalu masih tak phm sila baca balik STEP 1, hehehe...

selamat mencoba!