Sabtu, 09 November 2013

Membuat Animasi Login Di Beranda Blog

Animasi Login Di Beranda Blog ini memberikan efek terhadap blog agar nampak seperti sedang login dengan Cap Jempol. Inspirasi ini saya dapatkan dari blog tetangga dan saya padukan dengan pengalaman tentang jQuery saya. Yah, lumayan memberikan kesan yang menarik bagi para pengunjung ketika berada di beranda blog kita.

Langkah-langkahnya :
  • Login ke blogger Anda
  • Pergi ke Template
  • Klik Edit Html
  • Letakkan element / kode script di bawah ini tepat di atas </body>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- Animasi Login Begin -->
<div id='animasi-loginSM' style='position:fixed;z-index:9001;background:transparent;height:100%;width:100%;left:0;top:0;'>
<script type='text/javascript'>
// ----- Gambar Ukuran 28 x 28 Pixel -----
var  Gambar_Login_Anda ='https://sites.google.com/site/situsdata/file/flash000.png',
       Nama_Login_Anda = 'rizki_rivaldi';
</script>
<script src='https://sites.google.com/site/situsdata/file/login1.js' type='text/javascript'></script>
</div>
<div id='animasi-munyer1' style='position:fixed;z-index:9000;background:black;height:55%;width:100%;left:0;top:0;'></div>
<div id='animasi-munyer2' style='position:fixed;z-index:9000;background:black;height:55%;width:100%;left:0;bottom:0;'></div>
<div id='animasi-munyer3' style='position:fixed;z-index:9000;background:black;height:100%;width:55%;left:0;top:0;'></div>
<div id='animasi-munyer4' style='position:fixed;z-index:9000;background:black;height:100%;width:55%;right:0;bottom:0;'></div>
<!-- Animasi Login End -->
<b:else/>
</b:if>
  • Lalu Simpan Template, dan lihat hasilnya.
Keterangan : Kode berwarna biru bisa diganti dengan nama sesuka hati Anda.
Untuk tampilan animasi login versi 2, klik disini

Artikel Terkait

1   komentar

Posting Komentar

Cancel Reply

Pengikut