Cara Ringankan blog dengan jQuery

Lazy Loader adalah plugin jQuery di mana efek lazy load akan menangguhkan proses loading bagi image yang terdapat pada blog. Efek Lazy load hanya akan berfungsi apabila page di scroll. Image selepas page yang di scroll akan terpapar dengan menggunakan efek jQuery Lazy Load. 

Lazy Load membantu meringankan blog dengan mengurangkan tempo masa proses loading page pada sebuah blog terutama pada blog yang banyak memaparkan image gambar ataupun image yang berukuran atau size besar.

Dan Untuk memasang jQuery Lazy Load di blogspot Cukup mudah, ikuti beberapa langkah di bawah:

Login Blogger Dashboard --> Design --> Add A Gadget --> HTML/Javascript.

Copy Paste Kode di bawah ini ke dalam widget/gadget HTML/Javascript

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'></script>

<script type='text/javascript' src='http://davitblog.googlecode.com/files/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/AVvXsEi8veOUQK8HgYdO5f6v618nLfnQq2KNj7iuCRcuJxqMUslAu3sWimGrHChRZWDR1T5q-XD0YS7hLzbO800M1q0l5UGjoiZbg_QTXMrNPCu31fQlu3DZ8krXZKVE1iz-LwgkmLh3parNiZE/s1600/grey.gif"

});

});

</script>

Dan Simpan 

Catatan :

Jika tidak ada perubahan efek yang terjadi setelah kode di Save, coba pastekan kode tersebut sebelum atau di atas kode </body> pada script template.

Jika belum juga terjadi perubahan setelah kode tersebut di paste di atas atau sebelum kode , coba dengan paste kode tersebut sebelum atau di atas kode </head>

Sumber: Di sini

Ini kode yang ke dua,silahkan anda pilih mau yang pertama atau yang ke dua,dua duanya juga boleh ko.
sok aja di copas semua kodenya.

<link href='http://loadingringannabilbalwell.googlecode.com/files/Nabil-balwell-kautau.css' rel='stylesheet' type='text/css'/>

dan ini kode yang ke tiga

<script charset='utf-8' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> <script src='http://cuerosb.googlecode.com/files/cueros%20-lazyload.js' type='text/javascript'/> <script charset='utf-8' type='text/javascript'> $(function() { $(&quot;img&quot;).lazyload({placeholder : &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXzHLP2JEW-PefM_1UaGBWMR6XxxWiKUqZeO4Ylsuyd4l7VNbQzG9-ql0r7fI2bUE-C3CtJVI9WhYQT5AaHgBOSQyu9uEzyxzp5c5YDPP3rELKTirLIuR1lF_daBYFul8Qr8WKm0dddmI/&quot;,threshold : 200}); }); </script>


OK langsung aja ikuti langkah nya.
Log in ke blog anda
Klik Rancangan
Klik Edit HTML/ JavaScript
Centang Expand Template Widget
Cari kode </head>
Setelah itu kopy code yang di atas tadi dan pasang di atas kode </head>

Fungsi dari script tersebut sebagai data xtrenal css anda yang akan di update atau di browser langsung dari hosting google.

Pengertian nya adalah browser tidak akan lelet dalam mengeja susunan css template anda, Karna css template anda secara otomatis akan di backup di data xternal dari hosting nya google.

Logika nya gini : Jika kita di suruh mencari alamat baru pasti kita akan berhenti sejenak dan bertanya-tanya, Belum lagi kalo kesasar maka akan menyita banyak waktu untuk berpinda dari titik A ke titik B.

Namun Berbeda jika kita sudah menghafal nya. dengan berlari sambil memejamkan mata pun kita akan tibah dengan cepat dari titik A ke titik B.

Saya Harap ini cukup jelas.

TRIMAKASI SEMOGA BERMANFAAT

Sumber ke 2: Di sini
Sumber ke 3: Di sini



Html buku tamu show hide

Login Blogger Dashboard --> Design --> Add A Gadget --> HTML/Javascript.

Copy Paste Kode di bawah ini ke dalam widget/gadget HTML/Javascript\

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW8Qc7LI5DUn1ZCN6rBOxbp8x-hwEcQ5K7eu_i0nypVCjTe4uGfxyfoARj4xZsUY08RLeZ6tA2hVSZ1Bhe9fveT3sBD4iK2Mdr2emxzgDBD7Trc0q7dE71kpdBYowiKY3f2MGm5qtoFtlr/') no-repeat;


}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">
<!-- Letakkan kode buku tamu anda di  sini -->
<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<small>Widget by: <a href="http://kampungkuini.blogspot.com/" target="_blank">kp</a></small>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>




Masukan code buku tamu anda di tulisan ya di kasih warna merah