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

Senin, 27 Februari 2012

Blog Butterfly Effect

 


Membuat kesan yang unik dan menarik merupakan salah satu strategi untuk mendongkrak popularitas blog. Salah satu cara untuk membuat kesan yang unik dan menarik adalah dengan memasang efek kupu-kupu yang sedang terbang di blog. Efek kupu-kupu ini menggunakan javascript flying image yang menggunakan gambar animasi gif kupu-kupu. Contoh hasil dari efek kupu-kupu ini bisa dilihat pada postingan artikel ini, coba perhatikan tampilan blog. Pada tampilan blog terdapat kupu-kupu yang seolah-olah sedang terbang di tampilan blog. Efek kupu-kupu ini bisa di nonaktifkan dengan cara meng-klik kupu-kupu tersebut.

Cara Pemasangan :
  • Login ke blog sobat...

  • Klik "Design" kemudian klik "Add a Gadget" kemudian pilih "HTML/JavaScript", seperti gambar dibawah ini.



  • Copy-paste kode script berikut ini di kotak postingan gadget.
    - Efek Kupu-kupu 1


    <script src="http://monozcore-project.googlecode.com/files/KupuKupu1.js" type="text/javascript"></script>



    - Efek Kupu-kupu 2


    <script src="http://monozcore-project.googlecode.com/files/Kupu-kupu123.js" type="text/javascript"></script>

    Catatan :
    • Apabila script ditaruh di template blog maka taruh script di atas kode </Head>.
    • Apabila script ditaruh di gadget blog maka kosongkan judul gadget.

  • Klik "Save" dan lihat hasilnya...
Gimana infonya... keren-kan ??? Seperti biasa jangan lupa supportnya ya... supaya kreasi berikutnya makin unik dan menarik... terima kasih, akhir kata...

.: Semoga Bermanfaat :.

 




Diposting oleh di 04.07.00

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)