Cara Membuat Animasi Login Cap Jempol Di Home Blog

Tutorial Belajar Blog - Cara Membuat Animasi Login Cap Jempol Di Home Blog ini memberikan efek manipulasi terhadap blog agar nampak seperti sedang login dengan Cap Jempol. Inspirasi ini didapat dari tetangga blogger kita santa-mars blogmates. Pada Postingan sebelumnya Cara Membuat Animasi Loading Blog Keren merupakan Tips animasi blog yang tidak berbeda jauh memberikan kesan yang menarik para pengunjung ketika berada di home blog kita.

Langsung masuk aja ke tutorial cara membuat social button Melayang, 
  • Buka Template > Edit HTML > Expan Template Widget
  • Cari kode </body>
  • Lalu Paste kan kode di bawah tepat di atas kode </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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9Rkxhx8m5nOvRbAp7jNSpHIbmMhpo6S_WgD5xSJrQjysVdqjQSKCc0ZGOl9OrK6KUeXiD3O2ecxt8k1soCBsKcQFEbRcgHjy41V9eGE1SVSanJkdVu9E9rl-FON0Uhk87jDoPs0xQrzE/s28/Shutdown.png',
       Nama_Login_Anda = 'Oktri Darmadi';
</script>
<script src='https://tutorialbelajarblogger.googlecode.com/files/animasi-login3.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>

D E M O | D E M O


Note!
  • Gambar Login ukuran 28 x 28 pixel
  • Tulisan Yang Berwarna Merah Bisa diganti dengan Nama Anda Sendiri
  • Js yang Berwarna Kuning Lebih baik diganti dengan Js anda Sendiri apabila diganti juga tidak apa2
Terima Kasih Sudah Berkunjung Semoga Tidak Lupa Untuk Berkomentar.

27   komentar

bagus nie.... sukses dah q coba di blog aku
Reply Delete
knp blong ku ngak muncul gambarnya
Reply Delete
diblog aku suskes ko mba putri....
di demo blognya belajar blog juga sukses...
Reply Delete
saya juga baru selesai posting beginian sob,,tp saya dapat script nya dari blog kang mars,,,

salam kenal sobat..
Reply Delete
ehh,,,script dr SANTA MARS bukan KANG MARS
Reply Delete
ia gan tu kan dr bang santa mars .. pada postingan kan sudah saya tulis inspirasi dari blogmate santa mars
Reply Delete
oh ya bner,,,soalnya kemarin inget nya saya itu kang mars,,bukan santa mars,jd gk nyambung,,hee
Reply Delete
gan ko di blog ane gk mucul ya? malah layar hitam yg gk ada isi nya !
Reply Delete
iya gan sama blog ane juga ga ada gambar malah hitam semua .. T_T
Reply Delete
Anonim mengatakan... 19 Mei 2013 pukul 07.49
malam gan..
di blogku sudah berhasil di terapkan
cuma saya mau tanya. gimana caranya agar efek login cap jempol itu jg muncul ketika masuk ke postingan..
soalnya di blogku cuma mncul di homepage aja nii..
please reply yah.. thank share'a.
Reply Delete


KODE DI ATAS........



ahahah bukannya bagus di halaman homepage... nanti bikin sedikit lama lho klo halaman postingan jg

Reply Delete
<b:if cond='data:blog.pageType == "item"'>
KODE DI ATAS........
</b:if>

Reply Delete
mas kok di blog saya setelah klik login jadi item seemua mas, ada solusinya??
Reply Delete
Malam mohon maaf nih..
saya udah coba di blog saya saat saya save dan lihat blog malah smua blank hitam smua dan animasi nya gak jalan saya tunggu saya berusaha pencet sana pencet sini tapi ttp ajah...
tolong bantuan nya kk :'(
Reply Delete
Kok blog sy jg jd htam smua ..mhon batuanya.
Reply Delete
saya juga pakai ini mas, tapi jsnya udah aku edit :D
Reply Delete
wah keren gan .. semoga semakin berkreasi gan..
terima kasih sudah berkomentar
Reply Delete
kok aku nggak bisa ni buktinya http://inibarubloggreget.blogspot.com/
Reply Delete
makasih atas trik nya
Reply Delete
Keren banget min , thx infonya , tetap semangat ya ^_^
visite : regal-new.blogspot.com
Reply Delete
Komentar ini telah dihapus oleh pengarang.
Delete
Keren Banget Gan Coba Dech Di Liat

http://gamezonehacker.blogspot.com/
http://daviethardcore.blogspot.com/

100% Work :D
Reply Delete
Yess Saya Berhasil , Terima kasih ya Mas Oktri Tutorial nya
semoga sukses selalu blog nya
Reply Delete
Visit my Blog ya Mas oktri [ http://rivalzwildanz.blogspot.com ]
itu semua widget dari blog ini , terima kasih ya
Reply Delete
done , thanks mas oktri animasi loginnya sudah saya pasang di blog saya :D
kunjungi : www.friend-4efer.blogspot.com
Reply Delete
makasih banyak kak :D
mantap dah :D

Kunjungi juga blog saya : http://joe-erick.blogspot.com
Reply Delete
kok setelah login, gk muncul halaman blognya ya mas? malah hitam semua? ditunggu respondnya !! :D
Reply Delete

Posting Komentar

Cancel Reply