cara membuat loading di blog

Kali ini saya ingin berbagi ilmu cara membuat loading di blog.Tidak usah panjang-panjang
langsung kita menuju ke tutorial

Cara ke 1

Login ke blog kamu dulu.

Cara ke 2

Pilih Template Terus Edit HTML

Cara ke 3

Copy kode dibawah ini diatas kode </style> atau ]]></b:skin>

Untuk mencari ]]></b:skin> atau </style>
klik Ctrl+F 

#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/AVvXsEhsfzKEzRSZT_Zh39Nm20HPJOGtp8kYkHd1zgfI5W4YIDYfqdCa725Lu9cspai7h-SnxIWdyCUgt8L93k1CS3MxxOMnHlDap5wmGUkBZHrkbghl5WHh8QsMY68DrqTm9YCrEk6zwx-dXtg/s200/load6.gif") no-repeat 50% 50%;
    padding:1em 1.2em;
    display:none
    }

Cara ke 4

• Copy kode dibawah ini diatas kode </head>

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

Kalo Jquery sudah ada di blog kamu lewati saja langkah ini.

Cara ke 5

• Copy kode dibawah ini diatas 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>

Semoga bermanfaat



  

Read More

Cara membuat animasi kursor di blog

Ha bosen ya pakai kursor itu mending pakai kursor

ini hanya kusus untuk blog. 

 caranya:

1.login ke blogger kamu dulu

2.pilih tata letak

3.pilih tambahkan gadget Html/JavaScript

4.copy paste kode yang kamu mau dibawah ini

5.simpan

 

  



<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/holidays/hol-3/hol257.cur), progress !important;}</style><a href="http://www.cursors-4u.com/cursor/2008/12/03/christmas-grinch-santa.html" target="_blank" title="Christmas Grinch Santa"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Christmas Grinch Santa" style="position:absolute; top: 0px; right: 0px;" /></a>



<style type="text/css">body, a:hover {cursor: url(http://ani.cursors-4u.net/comics/mic-1/mic14.cur), progress !important;}</style><a href="http://www.cursors-4u.com/cursor/2013/02/21/chibi-captain-america.html" target="_blank" title="Chibi Captain America"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Chibi Captain America" style="position:absolute; top: 0px; right: 0px;" /></a>

<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/set/2
/set142_zombie_hands.zip), progress !important;}</style><a href="http://www.cursors-4u.com/cursor/2012/02/05/zombie-hand-set.html" target="_blank" title="Zombie Hand Set"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Zombie Hand Set" style="position:absolute; top: 0px; right: 0px;" /></a>

<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/people/peo-9/peo1012.cur), progress !important;}</style><a href="http://www.cursors-4u.com/cursor/2012/01/16/tim-tebow-florida-gators.html" target="_blank" title="Tim Tebow Florida Gators"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Tim Tebow Florida Gators" style="position:absolute; top: 0px; right: 0px;" /></a>

Dan masih banyak lagi kunjungi web : http://www.cursors-4u.com

caranya
1.pilih kategori yang kamu suka




2.misalnya pilih smileys
Lalu pilih yang kamu mau
lalu copy kode di option#1-universal CSS/HTML  Code

Read More