Membuat Efek Loading Blog

by Produksi Sukabumi , at 17.42 , have 8 komentar

      Yap Akhir nya setelah 3jam cari jalan kemana-kemana dan otak-atik kode tag kondisional, selesai juga pasang Photoshop Online di blog. hehe yap Sahabat kali ini saya akan bagikan cara membuat Efek Loading Pada Blog, ya mungkin untuk yang suka nongkrong di Kang Ismet pasti sudah pada tahu efek nya, hmm.. tapi di Kang Ismet saya cari-cari efek loading nya ga ada, cuman ada efek loading untuk komentar nya. oleh karena itu saya cari-cari diluar , yap akhirnya dapat juga, hehe. nah ternyata cara nya cukup mudah dan akan memberi kesan kepada pengunjung, seperti saya berkunjung ke blog Kang Ismet dan berkunjung ke sumber blog yang memberikan tutorial Cara Membuat Efek Loading Pada Blog. Yap langsung aja cara nya

1. Pertama Sahabat Masuk ke Blog lalu Edit HTML
2.Nah Copy kode css berikut diatas kode ]]></bskin>

    #page-loader {
    position:fixed !important;
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    z-index:999999;
    background: #303030 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxsuNCGGBChGUc5cC3yX43bIFDRCwLrNKhcr-cIm98P_cdBtuJLWPcYvZvMWshmmcer4zrOiUB08E4ACLamNzFs7PkupGVDWi2X6Ael1jvjLdvKpXk3GcJha5ArLfH6rwrC4pQxqUkFq_c/s1600/image_590519.gif") no-repeat 50% 50%;
    padding:1em 1.2em;
    display:none
    }

Info :

1. Kode Background: #303030 = bisa di ganti dengan warna yang disukai bila tidak paham masalah kode warna HTML Sahabat bisa lihat kode warna nya di Tools Warna

2. Kode yang berwarna biru bisa di isikan dengan URL gambar gif/animasi milik Sahabat sendiri, link gambar diatas adalah efek blog ini, jadi kalau suka dengan efek loading blog ini tidak perlu diganti atau bisa juga gunakan gambar yang diatas atau juga bisa menggunakan website pembuat gambar gif loading, diantara nya:

chimply.com/generator

webscriptlab.com

xeosoft.com

www.loadinfo.net

www.preloaders.net

www.ajaxload.info

3. Selanjut nya copy kode dibawah ini di atas kode </body>

    <script type='text/javascript'>
    //<![CDATA[
    // Menyisipkan markup tabir animasi
    $(document.body).append('<div id="page-loader"></div>');
    // Saat halaman aktif terpicu untuk berpindah/keluar menuju halaman lain...
    $(window).on("beforeunload", function() {
        // ... tampilkan tabir animasi dengan efek `.fadeIn()`
        $('#page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
    });
    //]]>
    </script>

4. Save Template dan rasakan perbedaan nya.. hihi

sumber: htp://labeltutorial.com

Yap semoga bermanfaatl Cara Membuat Efek Loading Pada Blog

Membuat Efek Loading Blog - written by Produksi Sukabumi , published at 17.42, categorized as Belajar , Triks Internet . And have 8 komentar

Facebook Twitter Google+ Linkedin Technorati Digg

Unknown 28 Januari 2014 pukul 19.52

kalau gak salah untuk memasang efek loading seperti ini harus menggunakan jquery terlebih dahulu deh sob..

Produksi Sukabumi AUTHOR 28 Januari 2014 pukul 20.04 Delete

hmm,. gitu ya gan, soal nya dari sumber tidak dijelaskan, di KI juga yang load di komentar tidak ada jqueri nya, yap tapi ok gan, nanti saya mau uji coba di blog satu lagi.. hehe thanks gan kunjungan nya..

Unknown 28 Januari 2014 pukul 21.23 Delete

efek page loading bukan hanya seperti itu sob.. ada lagi yang hanya menggunakan CSS @keyframes,
efek loading dari @keyframes gak usah pakai jquery. sehingga blog pun gak serasa berat..

Produksi Sukabumi AUTHOR 28 Januari 2014 pukul 21.36 Delete

wah ada lagi ya cara nya gan,. hmm, ane baru tau, di blog agan ada cara nya ga? kalau ga ada nanti ane mau keliling dunia lagi,. hihi lewat google..

Unknown 28 Januari 2014 pukul 22.45 Delete

lihat postingan terbaru saya gan ;)

Produksi Sukabumi AUTHOR 28 Januari 2014 pukul 23.24 Delete

yap ok siap gan Aldino.. hihi

joe 29 Januari 2014 pukul 06.35

menyimak mas, save dulu buat dipraktekkan

Produksi Sukabumi AUTHOR 29 Januari 2014 pukul 06.47 Delete

yap silahkan gan joe.. hihi n thanks sudah berkunjung..