Motivation - Kali ini saya akan membagikan Tutorial Blog, yaitu cara "Membuat Efek Loading pada Blog". Memberikan Efek seperti ini pada blog, tidak akan mengurangi kecepatan loading blog. bahkan efek ini akan sangat bermanfaat, karena akan meningkatkan 50% lebih kecepatan dari loading blog anda sebelumnya.
Anda Pasti Bingung, Apa sih itu Efek Loading Blog? Efek loading blog akan muncul pda saat anda mengklik link di blog anda, lalu akan muncul tampilan Loading di Blog anda. Nah, Gimana Cara Pasangnya? Kalau begitu tidak usah terlalu lama, yuk disimak Caranya di bawah ini:
Letakkan Kode JQuery ini tepat diatas kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>Setelah itu, letakkan CSS Berikut tepat diatas kode ]]></b:skin>
/* LOADING */Setelah Itu, Letakkan Lagi Kode HTML dibawah ini, tepat diatas kode </body>
#muat-halaman {
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;
}
<div id='muat-halaman'>
<span style='font-size:70px;font-weight:bold;'>Please Wait ..</span><br/>
To Open!<br/>The Page Is Being Loaded<br/><a href='http://www.under-88.blogspot.com' style='position:absolute;bottom:0;right:0;font-size:8px;color:#fff!important'>link</a></div>
<script type='text/javascript'>
//<![CDATA[
$(function() {
var siteURL = "http://" + top.location.host.toString();
var $internalLinks = $("a[href^='"+siteURL+"'], a[href^='/'], a[href^='./'], a[href^='../'], a[href^='#']");
$internalLinks.click(function() {
$('#muat-halaman').fadeIn(800).delay(8000).fadeOut(1200);
});
$('#muat-halaman').click(function() {
$(this).hide();
});
});
//]]>
</script>
Simpan Template. Sekarang Anda bisa mencoba/mengujinya di blog anda sendiri dengan syarat, tidak menggunakan attribute target="_blank" .
Nah, Itulah Artikel yang dapat saya berikan Kali ini "Membuat Efek Loading pada Blog". Semoga Bermanfaat. Terima Kasih.
Motivation_2014Arsip
