/* 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 */

Selasa, 28 Februari 2012

Flying Love Bee

Begitu banyak kreasi widget dengan efek animasi yang unik dan menarik yang bisa diaplikasikan untuk menarik minat pengunjung blog, seperti postingan artikel yang satu ini Flying Love Bee yaitu animasi lebah cinta yang terbang di blog menghiasi tampilan blog dengan cinta dan kasih sayang... hehehe sedikit dramatisir biar romantis... untuk contoh preview mending langsung dicoba aja sendiri, pemasangannya gampang koq...

Cara Pemasangan :

Login ke blog sobat...

Klik "Design" kemudian klik "Edit HTML" setelah itu klik centang pada "Expand Widget Templates", seperti gambar dibawah ini.

Cari kode </Head> pada template blog (tekan tombol keyboard CTRL+F untuk menampilkan kotak pencarian di browser dan mempercepat pencarian) kemudian copy kode di bawah ini dan paste di atas kode </Head> tersebut.

<script language="javascript">
var floatURLimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU8o_vaPU4qdw_I2og4e-t_tWX84qTK43ixPZKeGwL8Ybc4joUKcZeapriUX0mowd7BEL707wqZ2iojX05EQx1Si-0rPfg-g9yYkgH8ZLW8-Odc_OCdMMh_2hP3znJyH3AJnURuXAhgrV8/s800/MonozCore_Love_Bee.gif";
</script>
<script language="javascript" src="http://monozcore-project.googlecode.com/files/DragonScript.js"></script>

| Blog Tools

- Keterangan :
- Kode yang berwarna biru merupakan URL Link Gambar.

Klik "Save" dan lihat hasilnya...

.: Semoga Bermanfaat :.

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)