Fantastic Soul: Tutorial Blogger

Mungkin sobat blogger sudah pernah dengar,bahkan sudah pernah memasang atau memang sudah pernah posting tentang sebuah animasi pada sebuah blog,yaitu animasi loading yang jika kita membuka artikel satu ke yang lainnya,animasi itu baru akan berfungsi.Seperti yang kita tahu bahwa animasi ini Berbeda dengan Save Mode atau screen saver pada blog yang memang hanya sebuah aksesoris saja,sedangkan untuk animasi loading benar-benar bekerja sesuai lama atau cepatnya loading pada sebuah blog tersebut.Nah untuk cara pembuatannya sendiri adalah dengan cara edit template blog sobat dengan cara:
1. Pertama Login ke akun blog sobat.
2. Klik rancangan --> Edit HTML --> Centang kotak expand template widget (jangan lupa backup template dahulu)
3. Kemudian Tambahkan KODE CSS Animasi Loading Blog di bawah ini tepat diatas ]]></b:skin>

#loadhalaman {position:fixed;opacity:0.93;top:0;left:0;background-color:#000;z-index:9999;text-align:center;width:100%;height:100%;padding-top:20%;color:#000;display:none;}
.loadball {background-color: transparent;
border: 5px solid #00a3ff;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
border-radius: 50px;
box-shadow: 0 0 35px #00a3ff;
width: 50px;
height: 50px;
margin: 0 auto;
-moz-animation: spinPulse 1s infinite ease-in-out;
-webkit-animation: spinPulse 1s infinite linear;}
.loadball-2 {background-color: transparent;
border: 5px solid #00a3ff;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-radius: 50px;
box-shadow: 0 0 15px #00a3ff;
width: 30px;
height: 30px;
margin: 0 auto;
position: relative;
top: -50px;
-moz-animation: spinoffPulse 1s infinite linear;
-webkit-animation: spinoffPulse 1s infinite linear;}
@-moz-keyframes spinPulse {0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #00a3ff}50% { -moz-transform:rotate(145deg); opacity:1; }100% { -moz-transform:rotate(-320deg); opacity:0; }}
@-moz-keyframes spinoffPulse {0% { -moz-transform:rotate(0deg); } 100% { -moz-transform:rotate(360deg); }}
@-webkit-keyframes spinPulse {0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #00a3ff} 50% { -webkit-transform:rotate(145deg); opacity:1;} 100% { -webkit-transform:rotate(-320deg); opacity:0; }}
@-webkit-keyframes spinoffPulse {0% { -webkit-transform:rotate(0deg); } 100% { -webkit-transform:rotate(360deg); }}

4. Kemudian Tambahkan JQuery ini diatas </head>, disini saya menggunakan Jquery versi 1.7.2 (Pasang jika belum ada Jquery di Template sobat)

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

5. Langkah terakhir, pasang Script dibawah ini diatas tag </body>

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

Selesai. Semoga bermanfaat bagi anda

sumber http://www.rr-cc.kbi.or.id/2013/11/cara-membuat-animasi-loading-di-blog.html

1 Comment

Unknown Tutorial Blogger

Cara Dapet Domain .co.vu Dan Setting Ke Blogge

Hai Sobat xD Kali ini admin mau bagiin Cara Dapet Domain .co.vu Dan Setting Ke Blogger nih ^_^ yok lanngsung aja ya xD

Buka http://codotvu.com

Isi Kolom Kosong tersebut.. Misalkan deikaze4rt lalu klik Register Domain

nah setelah itu ? codotvu akan minta sobat untuk mengisi pendaftaranya, isi aja sendiri :v dari pada lama mending pencet connect with facebook xD
Ntar muncul gambar seperti ini nih bro... Terus Pencet Oke ya bro.....