Langsung saja pada penjeasannya dari pada banyak basa-basi. Hehehehe...
1.Pertama harus punya Blogger
2.Masuk ke menu Template
3.Klik edit Html
4.Masuka kode Html di bawah ini di atas </head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="https://googledrive.com/host/0Bz6NggaZAz1DVnZsS2F6SllZOXc" type="text/javascript"></script>
<style>
#load-page-moura { width:100%; height:100%; position:fixed; left:0; top:0; z-index:+100000; overflow:hidden; text-align:center; background:#111; }
$circle-size:10vmin; * { box-sizing:border-box; position:relative; }
.loader { margin-top:250px; }
.circle { border-radius:100vmax; display:inline-block; height:20vmin; opacity:.5; width:20vmin; }
.pulse .circle { animation:pulse-1 800ms infinite ease-in-out alternate; margin:0 -4vmin; transform:scale(0); }
.two .circle { animation:pulse-1 800ms infinite ease-in-out alternate; margin:0 calc(0vw - 10vmin); position:absolute; transform:scale(0); }
.circle:nth-of-type(1) { background:#FF9800; }
.circle:nth-of-type(2) { background:#FFC107; animation-delay:100ms; }
.circle:nth-of-type(3) { background:#FFEB3B; animation-delay:200ms; }
.circle:nth-of-type(4) { background:#CDDC39; animation-delay:400ms; }
.circle:nth-of-type(5) { background:#8BC34A; animation-delay:500ms; }
.circle:nth-of-type(6) { background:#4CAF50; animation-delay:600ms; }
@keyframes pulse-1 {
25% { transform:scale(0); } 100% { transform:scale(1); }
}
</style>
<script src="https://googledrive.com/host/0Bz6NggaZAz1DVnZsS2F6SllZOXc" type="text/javascript"></script>
<style>
#load-page-moura { width:100%; height:100%; position:fixed; left:0; top:0; z-index:+100000; overflow:hidden; text-align:center; background:#111; }
$circle-size:10vmin; * { box-sizing:border-box; position:relative; }
.loader { margin-top:250px; }
.circle { border-radius:100vmax; display:inline-block; height:20vmin; opacity:.5; width:20vmin; }
.pulse .circle { animation:pulse-1 800ms infinite ease-in-out alternate; margin:0 -4vmin; transform:scale(0); }
.two .circle { animation:pulse-1 800ms infinite ease-in-out alternate; margin:0 calc(0vw - 10vmin); position:absolute; transform:scale(0); }
.circle:nth-of-type(1) { background:#FF9800; }
.circle:nth-of-type(2) { background:#FFC107; animation-delay:100ms; }
.circle:nth-of-type(3) { background:#FFEB3B; animation-delay:200ms; }
.circle:nth-of-type(4) { background:#CDDC39; animation-delay:400ms; }
.circle:nth-of-type(5) { background:#8BC34A; animation-delay:500ms; }
.circle:nth-of-type(6) { background:#4CAF50; animation-delay:600ms; }
@keyframes pulse-1 {
25% { transform:scale(0); } 100% { transform:scale(1); }
}
</style>
*Penting kalau di Template kamu ada Jquery (warna Merah). maka langsung saja dari
<script src="https://googledrive.com/host/0Bz6NggaZAz1DVnZsS2F6SllZOXc" type="text/javascript"></script>
<style>
#load-page-moura { width:100%; height:100%; position:fixed; left:0; top:0; z-index:+100000; overflow:hidden; text-align:center; background:#111; }
$circle-size:10vmin; * { box-sizing:border-box; position:relative; }
.loader { margin-top:250px; }
.circle { border-radius:100vmax; display:inline-block; height:20vmin; opacity:.5; width:20vmin; }
.pulse .circle { animation:pulse-1 800ms infinite ease-in-out alternate; margin:0 -4vmin; transform:scale(0); }
.two .circle { animation:pulse-1 800ms infinite ease-in-out alternate; margin:0 calc(0vw - 10vmin); position:absolute; transform:scale(0); }
.circle:nth-of-type(1) { background:#FF9800; }
.circle:nth-of-type(2) { background:#FFC107; animation-delay:100ms; }
.circle:nth-of-type(3) { background:#FFEB3B; animation-delay:200ms; }
.circle:nth-of-type(4) { background:#CDDC39; animation-delay:400ms; }
.circle:nth-of-type(5) { background:#8BC34A; animation-delay:500ms; }
.circle:nth-of-type(6) { background:#4CAF50; animation-delay:600ms; }
@keyframes pulse-1 {
25% { transform:scale(0); } 100% { transform:scale(1); }
}
</style>
<style>
#load-page-moura { width:100%; height:100%; position:fixed; left:0; top:0; z-index:+100000; overflow:hidden; text-align:center; background:#111; }
$circle-size:10vmin; * { box-sizing:border-box; position:relative; }
.loader { margin-top:250px; }
.circle { border-radius:100vmax; display:inline-block; height:20vmin; opacity:.5; width:20vmin; }
.pulse .circle { animation:pulse-1 800ms infinite ease-in-out alternate; margin:0 -4vmin; transform:scale(0); }
.two .circle { animation:pulse-1 800ms infinite ease-in-out alternate; margin:0 calc(0vw - 10vmin); position:absolute; transform:scale(0); }
.circle:nth-of-type(1) { background:#FF9800; }
.circle:nth-of-type(2) { background:#FFC107; animation-delay:100ms; }
.circle:nth-of-type(3) { background:#FFEB3B; animation-delay:200ms; }
.circle:nth-of-type(4) { background:#CDDC39; animation-delay:400ms; }
.circle:nth-of-type(5) { background:#8BC34A; animation-delay:500ms; }
.circle:nth-of-type(6) { background:#4CAF50; animation-delay:600ms; }
@keyframes pulse-1 {
25% { transform:scale(0); } 100% { transform:scale(1); }
}
</style>
5.Letakan Kode Html di bawah ini tepat di bawah <body>
<div id="load-page-moura">
<div class="loader pulse">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
</div>
<div class="loader pulse">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
</div>
6. Trahir Save. Selesai dehhhhhh
Kalau ada pertanyaan koment di bawah ye... :)
No comments:
Post a Comment