cara membuat animasi seperti login

 
ini memberikan efek manipulasi terhadap blog agar nampak seperti sedang login dengan Cap Jempol. Inspirasi ini didapat dari tetangga blogger kita santa-mars blogmates. 

Langsung masuk aja ke tutorial cara membuat social button Melayang, 

• Buka Template > Edit HTML > Expan Template Widget
• Cari kode </body> atau </head>
• Lalu Paste kan kode di bawah tepat di atas kode tsb.

<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0MH6d_jbzGfci07knvJwF31c2SKsBNPkqWtPo3KTUwGalYesxkgNu1WHs3HD_MLGAid6k9BVM2pDG9GtWaeK3j2GIavZDolfmSpWcuBx_c1TpyHQo41Mcma1fIaVgUJZIAobrVYvdf08/s28/Shutdown.png',
       Nama_Login_Anda = 'Hilali';
</script>
<script src='https://overlay-basic.googlecode.com/svn/branches/animasi-login-amarajen.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>

perhatian

• Gambar Login ukuran 28 x 28 pixel
• Tulisan Yang Berwarna Merah Bisa diganti dengan Nama Anda Sendiri