JavaScript, JQuery, CSS, HTML penghias blog

Dalam Ha ini Saya Akan Membagikan Beberapa Javascript Penghias BLOG agan..... saya hanya bisa menampilkan beberapa Javascript aja. karen...

Dalam Ha ini Saya Akan Membagikan Beberapa Javascript Penghias BLOG agan.....

saya hanya bisa menampilkan beberapa Javascript aja.
karena Jika saya menampilkan semuanya ... bisa mubajir...
cara pemasangan nya

Part 1
Javascript Efek Ketombe pada BLOG / yang disebut dengan Salju Halus

<script src="http://palmahutabarat.googlecode.com/files/palma-efek-turun-salju.js" type="text/javascript"></script>

1. Log In Pada BLOGGER
2. Masuk Pada BLOG yang ingin dihias
3. Setelah itu masuk Ke Rancangan atau yang disebut dengan Tata Letak pada blog
4. lalu Klick Tambah gadget atau ADd gatget
5. Copy Pastekan Code Javascript Yang Saya Sediakan Dibawah Ini Ke dalam Kolom Ke dua.
6. Setelah Itu simpan deh / Save .

Part 2

Javascript Cara Mempercepat Loading Blog With Script Lazyload (mode CSS)

cara pemakaian Letakan Kode Dibawah Ini tepat Di atas </head>

<script charset='utf-8' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://palmahutabarat.googlecode.com/files/palmahutabarat-easy-loading.js' type='text/javascript'/>
<script charset='utf-8' type='text/javascript'>
$(function() {
$(&quot;img&quot;).lazyload({placeholder : &quot;http://bit.ly/Qv60g5&quot;,threshold : 200});
});
</script>

Part 3

Tertarik ?? Bagi yang tertarik untuk membuatnya silahkan ikuti step by step berikut:

1. Seperti biasa login blogger sob!
2. Go to Design/Rancangan > Edit HTML > and ceklish pada "Expand Widget Templates"
3. Lalu cari kode ]]></b:skin> dan letakan kode CSS berikut tepat diatasnya.

#loading {
    position: fixed;
    z-index: 50;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: #000 url(URL_GAMBAR_ANDA) no-repeat center;
    line-height: 350px;
    text-align: center;
    font-size: 36px;
    color: #353231;
    text-indent: -9999px;
}
.v2 #loading { display: none; }
 
#progress-bar {
    position: absolute;
    top: 0; left: 0;
    background: #f3f3f3;
    opacity: 0.8;
    width: 0;
    height: 18px;
}
#loader {
 background: url(<span style="background-color: #ea9999;">URL_GAMBAR_ANDA</span>) no-repeat center 25%;
 height: 100%;
 display: block;
}

Keterangan:

Perhatikan kode CSS diatas untuk URL_GAMBAR_ANDA 

Gantilah gambar loading blognya sesuai kreasi sobat.

Tapi bila ingin seperti gambar yang ada pada DEMO, silahkan pakai gambar ini:

(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV495ZEWZuWbugFoOkibaQ3pSZlWH0tBzwr1t1IqFRzMNQD56DxGDscGpQxJMtsOaWxoHIt2feuVX7hwFKvzd9m7vDpKgswz4UFFPIruV-NZjrC-V2H9toD8HStEwUkYY00wvtMNFXKMdt/s1600/loading.gif)

5. Bagian kedua yaitu menambahkan script JQuery,

cari kode </head> dan taruh script JQuery berikut tepat diatasnya:



<script src="http://palmahutabarat.googlecode.com/files/palmahutabarat-jquery-min2.js"></script>


Kalau script JQuery diatas sudah ada di blog sobat, maka tidak perlu lagi memasangnya.

Kemudian tambahkan lagi script berikut dibawahnya:



<script>
(function($){
$("html").removeClass("v2");
$("#header").ready(function(){ $("#progress-bar").stop().animate({ width: "25%" },1500) });
$("#footer").ready(function(){ $("#progress-bar").stop().animate({ width: "75%" },1500) });
$(window).load(function(){ 
    $("#progress-bar").stop().animate({ width: "100%" },600,function(){
        $("#loading").fadeOut("fast",function(){ $(this).remove(); });
    });
});
})(jQuery);
</script>


6. Next lanjut untuk edit HTML. Cari kode <body> letakan kode berikut tepat dibawahnya.



<div id='loading'>
<div id='progress-bar'></div>
<div id='loader'>Loading...</div>
</div>


7. Simpan template dan lihat hasilnya.



Tambahan:

Ingat, untuk hasil yang sudah kita buat diatas itu efek loadingnya disetiap halaman yang kita buka!

Jadi bagi kalian yang hanya ingin tampilan loading blognya hanya di Home Page'nya saja,

silahkan ganti kode HTML pada langkah No.6 dengan kode dibawah ini:



<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='loading'>
<div id='progress-bar'></div>
<div id='loader'>Loading...</div>
</div>
</b:if>

 TQ forKode-BLOGGER

Selesai sob! Selamat mencoba Membuat Efek Tampilan Loading Halaman Pada Blogspot,
 dan semoga sukses. Bila sobat mengalamai kesulitan dalam prakteknya 
bisa sobat langsung tanyakan dengan berkomentar pada tread ini.