Lazy Loading Page.

Memasang jQuery Lazy Load adalah salah satu cara untuk mempercepatkan "loading page" pada sesebuah blog yang mempunyai size image yang besar.

Lihat DEMO.

Bagaimana untuk memasang "plug in" ini ? Sila ikuti beberapa langkah mudah dibawah.

1. Sign in akaun blogger anda.

2. Pilih DESIGN --> Add A Gadget --> HTML/Javascript.

3. Copy kod dibawah dan PASTE.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type='text/javascript' src='https://sites.google.com/site/jquery01/jquery.lazyload.mini.js?ver=1.5.0'></script>
<script type="text/javascript">
jQuery(document).ready(function($){
if (navigator.platform == "iPad") return;
jQuery("img").lazyload({
effect:"fadeIn",
placeholder: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3gsK4rlWZYalMaoiwNZ3Vi3VorR51H6tKJetd2Kgj5wXlotMGXflAIYQw_Vtf-e1KBp48F4ekFJePgRZm7T9WNlvr3LTB4gESdgP0aZNfphGazO360-620aDnVbxytc-bBOYb_GkZ6OQ/s1600/grey.gif"
});
});
</script>

4. Akhir sekali pilih SAVE.

5. Selamat mencuba.

READ MORE...

Menambah Scroll Background Dengan jQuery.

LIHAT DEMO

1. SIGN IN akaun blogger.

2. Pilih LAYOUT --> EDIT HTML.

3. BACKUP TEMPLATE anda dahulu untuk mengelakkan sebarang masalah.

4. Klik pada EXPAND WIDGET TEMPLATE seperti screenshot di bawah ini.

5. Cari kod ini.

</head>

6. Copy script jQuery di bawah dan letakkan di atas kod tadi.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2' type='text/javascript'></script>

7. Tambahkan script ini, di bawah script jQuery tadi.

<script type='text/javascript'>
//<![CDATA[
$(function(){

// ***
// Scrolling background
// ***

// height of background image in pixels
var backgroundheight = 4000;

// get the current minute/hour of the day
var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();

// work out how far through the day we are as a percentage - e.g. 6pm = 75%
var hourpercent = hour / 24 * 100;
var minutepercent = minute / 30 / 24 * 100;
var percentofday = Math.round(hourpercent + minutepercent);

// calculate which pixel row to start graphic from based on how far through the day we are
var offset = backgroundheight / 100 * percentofday;

// graphic starts at approx 6am, so adjust offset by 1/4
var offset = offset - (backgroundheight / 1);

function scrollbackground() {
// decrease the offset by 1, or if its less than 1 increase it by the background height minus 1
offset = (offset < 1) ? offset + (backgroundheight - 1) : offset - 1;
// apply the background position
$('body').css("background-position", "50% " + offset + "px");
// call self to continue animation
setTimeout(function() {
scrollbackground();
}, 70
);
}

// Start the animation
scrollbackground();
});
//]]>
</script>

7. Cari kod CSS body.

body {
background:#000;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

8. Gantikan background dengan kod ini.

background:url(http://lh6.ggpht.com/_dfnTVAxeWMI/SrFV2ZgHUvI/AAAAAAAACU8/yP_7acjnv5U/bgscroll.jpg);

10. Contoh.

body {
background:url(http://lh6.ggpht.com/_dfnTVAxeWMI/SrFV2ZgHUvI/AAAAAAAACU8/yP_7acjnv5U/bgscroll.jpg);
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

11. Pilih PREVIEW untuk melihat hasilnya.

12. Jika berpuas hati pilih SAVE TEMPLATE.

Perhatian !!! Sekiranya anda sudah mempunyai script jQuery NO 6, anda hanya perlu tambahkan script NO 7 di bawahnya.

READ MORE...

Memasang Scroll To Top .

Memasang Back To Top Smooth Scroll akan memberikan effect lebih lancar untuk kembali ke atas.

1. Sign in akaun blogger.

2. Pilih LAYOUT --> EDIT HTML.

3. Cari kod ini.

</head>

4. Copy kod di bawah dan Paste di atas kod tadi.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'/> <script type='text/javascript'>
//<![CDATA[

$(function(){

$('a[href*=#top]').click(function() {

if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
&& location.hostname == this.hostname) {

var $target = $(this.hash);

$target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');

if ($target.length) {

var targetOffset = $target.offset().top;

$('html,body').animate({scrollTop: targetOffset}, 1000);

return false;

}

}

});

});
//]]>
</script>
<!-- end scrolltop -->

5. Cari kod ini.

<body>

6. Gantikan kod di atas dengan kod ini.

<body id='top'>

7. Seterusnya, cari kod ini.

</body>

8. Copy kod di bawah dan tambahkan di atas kod tadi.

<div id='goingtop'>
<a href='#top' title='Top'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicOI2Y28DYHngJBVSQrMOw7eeiaThny9v7MVP6nAo-yaB6vylSzCDh4_9Zy2qoRWDc7X0nUywpOPMAcv03uL8v1Gaan7mMMg0A5eRiCl88hoEBi7wybes95tJLY2F4qj2oqrQYsWnYCbuq/' style='right:20px; bottom:20px; position: fixed;'/></a></div>

9. SAVE TEMPLATE.

Gantikan Url berwarna merah sekiranya anda mahu menukarkan Image button.

READ MORE...