loading efek ketika memuat/membuat halaman blog

Tutorial selanjutnya adalah membuat efek loading ketika memuat/membuat halaman blog. Efek ini cukup keren, karena sambil menunggu halaman blog semuanya terload, maka efek ini akan muncul. Sehingga pengunjung tidak menjadi bosan. Ya begitu lah..

Bagi yang belum mengetahui efek ini, silakan klik salah atu link yang ada di blog ini, maka eek itu pun akan muncul.

Bagaimana cara membuat efek tersebut?

• Masuk ke mode Template > Edit HTML. Cari kode ]]></b:skin>
• Letakkan kode dibawah ini tepat di atas kode ]]></b:skin>

/* LOADING  EFEK */
#page-loader{
position:fixed;
top:0;
left:0;
background-color:#000;
z-index:9999;
text-align:center;
width:100%;
height:100%;
padding-top:200px;
font-size:25px;
color:#fff;
display:none;
}
/* LOADING  EFEK */

Anda bisa merubah kode CSS ini, agar tampilannya lebih menarik lagi

• Kemudian cari kode </body>
• Letakkan kode di bawah tepat di atas kode </body> 

<div id='page-loader'>
disini kamu letakkan sesuatu entah gambar atau tulisan atau apalah
</div>

Untuk kata-katanya bisa diganti, sesuai kebutuhan.

• Cari lagi kode </head>
• Masukkan kode di bawah ini, tepat di atas kode </head> 

<script type='text/javascript'>
$(function() {
var siteURL = &quot;http://&quot; + top.location.host.toString();
var $internalLinks = $(&quot;a[href^=&#39;&quot;+siteURL+&quot;&#39;], a[href^=&#39;/&#39;], a[href^=&#39;./&#39;], a[href^=&#39;../&#39;], a[href^=&#39;#&#39;]&quot;);
$internalLinks.click(function() {
$(&#39;#page-loader&#39;).fadeIn(1500).delay(6000).fadeOut(1000);
});
// Hilangkan overlay saat diklik untuk mengatasi gangguan, terutama jika link internal diset dengan target=&#39;_blank&#39;
$(&#39;#page-loader&#39;).click(function() {
$(this).hide();
});
});
</script>

PENTING!
Jika belum memasang JQuery di blog, pasang dulu yah. Caranya letakkan kode di bawah ini diatas kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/> 

Bagikan Artikel Ini ke: Facebook Twitter Google+ Linkedin Technorati Digg

Posted by Unknown, Published at 05.30 and have 6 komentar