Loading Page trick For Blogspot, Wordpress & more

Posted by Gani Mugni Sabtu, 17 Desember 2011 0 komentar
Trik ini adalah trik yan pernah di share oleh master joy crazydavinci. Saya hanya ingin menambahkan bagaimana menerapkannya pada blogspot, karena blog saya sendiri memakai blogspot. Loading page ini sangat sederhana namun menarik menurut saya. Jika kamu berminat silahkan praktekkan dan terapkan di blog kamu :D.



Untuk hasilnya silahkan lihat LIVE DEMO .

Ok langsung ke caranya :


  • Pertama , Letakkan kode berikut dalam tag <head> atau lebih baik letakkan tepat di atas kode </head> .
<!-- Loading Page Script – CrazyDaVinci – http://crazydavinci.net -->
<style type="text/css">
/* add loading image */
body {
background:#4B4B4B url(http://static.int.crazydavinci.net/images/loading.gif) no-repeat fixed center;
}
/* hide page div */
#page{
display:none;
}
</style>
<script type="text/javascript">
function css(classORid,rules){
try{
var css=document.createElement("style");
css.innerHTML=classORid+"{"+rules+"}"
document.body.appendChild(css);
}
catch(e){}
try{
document.styleSheets[document.styleSheets.length-1].addRule(classORid,rules);
}
catch(e){}
}
function loaded(){
css("#page","display:block!important");
css("body","background:#000 url()");
}
if(window.addEventListener)window.addEventListener("load",loaded,false);
else if(window.attachEvent)window.attachEvent("onload",loaded);
else if(document.getElementById)window.onload=loaded;
</script>
Kemudian letakkan kode berikut tepat di bawah kode <body>
<div id="page">
Dan tambahkan kode </div> tepat di atas kode </body>

Maka contohnya akan menjadi seperti ini :

<html>
<head>
blah blah…
</head>
<body>

      <div id="page">
      <div></div>
      blah blah…
      <div></div>
      </div>

</body>

Tambahan : Lihat kode yang saya bold merah tebal. Silahkan edit jika kamu ingin merubah warna background blog, atau menambahkan gambar menjadi background. contoh  #fff url(http://static.desktopnexus.com/thumbnails/18573-bigthumbnail.jpg) .

Terima Kasih Dan jangan Lupa Follow Yah
TERIMA KASIH ATAS KUNJUNGAN SAUDARA
Judul: Loading Page trick For Blogspot, Wordpress & more
Ditulis oleh Gani Mugni
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip, baik itu sebagian atau keseluruhan dari isi artikel ini harap menyertakan link dofollow ke http://azharadzuan.blogspot.com/2011/12/loading-page-trick-for-blogspot.html. Terima kasih sudah singgah membaca artikel ini.

0 komentar:

Posting Komentar

Panduan blog dan SEO support Jual Online Baju Wanita - Original design by Bamz | Copyright of Azhara Blog.