Cara Membuat Loading Page : Evil Loader

Posted by IRVAN JAYA on 5:02:00 AM

Easy Get Media - Cara Membuat Halaman Loading : Evil Loader .

 Hei sobat blogger semua !! Kalian pengen yah membuat blog/situs anda terlihat lebih cool ? kalau mau ini saya share script dan tutorial cara membuat halaman loading bertemakan Evil Loader. Halaman loading ini berjenis animasi (Gambar bergerak) jadi blog anda akan terlihat lebih cool dari sebelumnya. Dan ada banyak pilihan Loading Page diblog ini kok silahkan cara halaman loading/loading page pada search box blog ini untuk melihat pilihan tampilan yang lain !! :)

 Mari kita lanjut ketutorial instalasi Loading Page : Evil Loader-nya :
1. Login ke-blog sobat
2. Masuk ke-menu Template => Pilih Edit HTML
3. Cari kode </head> dan letak-kan kode dibawah ini tepat diatas kode </head> :
 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js' type='text/javascript'></script> <script src="https://cdn.rawgit.com/Brando07/share/newbe/new-seocips-LP.js" type="text/javascript"></script> <style> @import url(http://fonts.googleapis.com/css?family=Julius+Sans+One);  #load-page-seocips { width:100%; height:100%; position:fixed; left:0; top:0; z-index:999999; overflow:hidden; text-align:center; background:#111;}  .mata { width:20px; height:8px; background-color:#eee; border-radius:0 0 20px 20px; position:relative; top:40px; left:10px; box-shadow:40px 0 0 0 #eee;}  .kepala { -webkit-backface-visibility:hidden; position:relative; margin:-250px auto; width:80px; height:80px; background-color:#111; border-radius:50px; box-shadow:inset -4px 2px 0 0 #eee; -webkit-animation:node 1.5s infinite alternate; -webkit-animation-timing-function:ease-out; }  .badan { position:relative; margin:90px auto; width:140px; height:120px; background-color:#111; border-radius:50px/25px; box-shadow:inset -5px 2px 0 0 #eee; -webkit-animation:node2 1.5s infinite alternate; -webkit-animation-timing-function:ease-out; }  @-webkit-keyframes node {0% { top:0; } 50% { top:10px; } 100% { top:0; } }  @-webkit-keyframes node2 {0% { top:-5px; } 50% { top:10px; } 100% { top:-5px; } }  .circ { -webkit-backface-visibility:hidden; margin:60px auto; width:180px; height:180px; background-color:#111; border-radius:0 0 50px 50px; position:relative; z-index:-1; left:0%; top:20%; overflow:hidden; }  .tangan { -webkit-backface-visibility:hidden; margin-top:140px; width:120px; height:120px; position:absolute; background-color:#111; border-radius:20px; box-shadow:-1px -4px 0 0 #eee; -webkit-transform:rotate(45deg); top:75%; left:16%; z-index:1; -webkit-animation:node2 1.5s infinite alternate; -webkit-animation-timing-function:ease-out; }  .tulisan { position:absolute; width:100px; height:20px; margin:-10px auto; -webkit-font-smoothing:antialiased; font-family:'Julius Sans One',sans-serif; font-size:30px; font-weight:400; color:#eee; left:10%; top:5%; }  </style>
 *- Jika tidak bisa disave coba anda hapus kode penutup </script> pada kode diatas

4. Letak-kan kode dibawah ini tepat dibawah kode <body> :
<div id="load-page-seocips"> <div class="circ">   <div class="tulisan">Loading...</div><div class="tangan"></div><div class="badan"></div><div class="kepala">     <div class="mata"></div></div></div></div>
 5. Save template-nya dan lihat hasil-nya .

 Terima kasih telah membaca artikel diblog Easy Get Media !!


Nama Anda
New Johny WussUpdated: 5:02:00 AM

0 comments:

Post a Comment

29-04-2016 | Komentar Bebas |

Powered by Blogger.
CB