Cara Membuat intro Loading Sebelum Masuk blog

Share this Article now on :

Berawal dari rasa penasaran karna melihat salah satu web yang sangat keren sekali (menurut saya loh :D) akhirnya saya cari tau lewat mbah google....

Aha! akhirnya ketemu juga cara membuat Loading (halamn Intro) sebelum masuk ke homepage blog..

oke langsunh aja yak....

1.  Login Blogger.

2. Kemudian Rancangan => Edit HTML => Klik (Centang) Expand Template Widget

3. Kemudian cari code ]]></b:skin> , untuk lebih cepat tekan CTRL+F pada keyboard.

4. Copy code Jquery dibawah ini :

#loading {

    position: fixed;

    z-index: 50;

    top: 0; left: 0;

    width: 100%; height: 100%;

    background: #000 url(http://i1206.photobucket.com/albums/bb455/binkbenk/loading.gif?imgmax=800) no-repeat center;

    line-height: 350px;

    text-align: center;

    font-size: 36px;

    color: #353231;

    text-indent: -9999px;

}

.v2 #loading { display: none; }

#progress-bar {

    position: absolute;

    top: 0; left: 0;

    background: #f3f3f3;

    opacity: 0.8;

    width: 0;

    height: 18px;

}

#loader {

 background: url(<span style="background-color: #ea9999;">http://i1206.photobucket.com/albums/bb455/binkbenk/loading.gif?imgmax=800</span>) no-repeat center 25%;

 height: 100%;

 display: block;

}

Pastekan diatas code ]]></b:skin>

5. Kemudian cari code </head> , gunakan cara cepat seperti tadi.

6.. Copy code dibawah ini :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'/>

<script>

(function($){

$(&quot;html&quot;).removeClass(&quot;v2&quot;);

$(&quot;#header&quot;).ready(function(){ $(&quot;#progress-bar&quot;).stop().animate({ width: &quot;25%&quot; },1500) });

$(&quot;#footer&quot;).ready(function(){ $(&quot;#progress-bar&quot;).stop().animate({ width: &quot;75%&quot; },1500) });

$(window).load(function(){

    $(&quot;#progress-bar&quot;).stop().animate({ width: &quot;100%&quot; },600,function(){

        $(&quot;#loading&quot;).fadeOut(&quot;fast&quot;,function(){ $(this).remove(); });

    });

});

})(jQuery);

</script>

Pastekan diatas code </head>

7. Kemudian cari code </body>, gunakan cara cepat seperti tadi.

8. Copy code dibawah ini :

<script src='http://x-gen.googlecode.com/files/x-gen-jquery.js' type='text/javascript'/>

<script type='text/javascript'>

$(function() {

$(&#39;#navigation a&#39;).stop().animate({&#39;marginLeft&#39;:&#39;-85px&#39;},1000);

$(&#39;#navigation &gt; li&#39;).hover(

function () {

$(&#39;a&#39;,$(this)).stop().animate({&#39;marginLeft&#39;:&#39;-2px&#39;},200);

},

function () {

$(&#39;a&#39;,$(this)).stop().animate({&#39;marginLeft&#39;:&#39;-85px&#39;},200);

}

);

});

</script> 

Pastekan diatas code  </body>

yang berwarna merah (http://i1206.photobucket.com/albums/bb455/binkbenk/loading.gif?imgmax=800 )

bisa kalian ganti dengan file gif kalian. woke lalu save tample kalian.... Done!! selesai :)  

Eh iya jangan lupa backup dulu temple kalian sebelum melakukn proses ini..

Anda sedang membaca artikel tentang Cara Membuat intro Loading Sebelum Masuk blog dan anda bisa menemukan artikel Cara Membuat intro Loading Sebelum Masuk blog ini dengan url https://papasangkil.blogspot.com/2014/03/cara-membuat-intro-loading-sebelum.html,anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel Cara Membuat intro Loading Sebelum Masuk blog ini sangat bermanfaat bagi teman-teman anda,namun jangan lupa untuk meletakkan link Cara Membuat intro Loading Sebelum Masuk blog sebagai sumbernya.Dan baca juga Privacy Policy DeeJayHan-Blog dengan url http://deejayhan.blogspot.com/2011/11/shell-collection.html.

Rating Artikel : 5 Jumlah Voting : 99480 Orang