/* HourGlass THEME */ .ip-header { position: fixed; top: 0; z-index: 100; min-height: 480px; width: 100%; height: 100%; background: #505050 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFmgBn63Xy93Q-liqCuagUsbwD_rnNODt4N_a6O950WcuCsHpK9aijMbT-V6Q0RyT_g6iilt8GbUdwxrkgV-dRg82d57nNhAAg1bgWeQ2uy8yZ_oIcVq_5mJtBeyehODdE1lqvQjElhdws/s1600/hourglass.gif) no-repeat center center; /* warna background dan gambar loader */ z-index: 999999; } .ip-header .ip-loader svg path.ip-loader-circlebg { stroke: #fff; /* warna background circle loader */ } .ip-header .ip-loader svg path.ip-loader-circle { -webkit-transition: stroke-dashoffset 0.2s; transition: stroke-dashoffset 0.2s; stroke: #13BAFA; /* Warna garis circle saat loading */ } /* Pre-Loader main */ .ip-loader { position: absolute; left: 0; width: 100%; opacity: 0; cursor: default; pointer-events: none; } .ip-loader { bottom: 20%; } .ip-header .ip-inner { display: block; margin: 0 auto; } .ip-header .ip-loader svg path { fill: none; stroke-width: 6; } /* Animasi */ .loading .ip-loader { opacity: 1; -webkit-animation: animInitialHeader 1s cubic-bezier(0.7,0,0.3,1) both; animation: animInitialHeader 1s cubic-bezier(0.7,0,0.3,1) both; } .loading .ip-loader { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } @-webkit-keyframes animInitialHeader { from { opacity: 0; -webkit-transform: translate3d(0,800px,0); } } @keyframes animInitialHeader { from { opacity: 0; -webkit-transform: translate3d(0,800px,0); transform: translate3d(0,800px,0); } } .loaded .ip-loader { opacity: 1; } .loaded .ip-loader { -webkit-animation: animLoadedLoader 0.5s cubic-bezier(0.7,0,0.3,1) forwards; animation: animLoadedLoader 0.5s cubic-bezier(0.7,0,0.3,1) forwards; } @-webkit-keyframes animLoadedLoader { to { opacity: 0; -webkit-transform: translate3d(0,-100%,0) scale3d(0.3,0.3,1); } } @keyframes animLoadedLoader { to { opacity: 0; -webkit-transform: translate3d(0,-100%,0) scale3d(0.3,0.3,1); transform: translate3d(0,-100%,0) scale3d(0.3,0.3,1); } } /* Animasi header ketika loading selesai */ .loaded .ip-header { -webkit-animation: animLoadedHeader 1s cubic-bezier(0.7,0,0.3,1) forwards; animation: animLoadedHeader 1s cubic-bezier(0.7,0,0.3,1) forwards; } @-webkit-keyframes animLoadedHeader { to { -webkit-transform: translate3d(0,-100%,0); } } @keyframes animLoadedHeader { to { -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0); } } .layout-switch .ip-header { position: absolute; } /* End Preloader */

Minggu, 26 Februari 2012

Animasi Spiderman di Blog

SPIDERMAN.. Salah satu superhero yang banyak disukai orang termasuk saya. Nah pada postingan artikel kali ini saya akan membahas salah satu widget yang bertemakan Spiderman. Widget ini menggunakan karakter Spiderman yang akan turun dari pojok kanan atau kiri atas layar browser dan mengawasi kegiatan para pengunjung blog anda...

Anda mau widget SPIDERMAN seperti di atas ???

Nah, ikuti tutorialnya di bawah ini :

Login ke blog anda...
Klik "Design" kemudian klik "Edit HTML" Setelah itu centang "Expand Widget Templates".
Cari kode <Body> kemudian letakan kode berikut ini tepat di bawah kode <Body>.

<div align="left">
<embed allowscriptaccess="sameDomain" flashvars="&col1=d89b09&col2=7cc034&dayAdd=0&cal=true&gig_lt=1248336103578&gig_pt=1248336182359&gig_g=1&gig_n=blogger" height="400" loop="true" menu="false" pluginspage="http://www.adobe.com/go/getflashplayer" quality="best" src="http://www.widgipedia.com/widgets/orido/RedSpidey-5671-8192_134217728.widget?__install_id=1248336094072&__view=expanded" swliveconnect="true" type="application/x-shockwave-flash" width="250" wmode="transparent"></embed></div>
Untuk posisi widget silakan anda sesuaikan kode <div align="left">, "left" jika dipasang di kiri dan "right" jika ingin dipasang di kanan.
Klik "Save Template" dan lihat hasilnya...

.:Semoga Bermanfaat:.

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)