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

Selasa, 28 Februari 2012


Cara Pasang Custom Cursor Di Blogger



Tambah daya tarik blog sobat dengan memasang custom cursor di blognya, biar tampilan blog sobat makin oke dan lebih menarik. Secara default, cursor blog berbentuk panah, namun jika sobat bosan dengan tampilan itu, sobat bisa merubahnya sesuai dengan keinginan sobat. Tertarik ??? silahkan simak info lengkapnya berikut ini.

Siapkan cursor yang akan digunakan. Sobat bisa menggunakan cursor buatan sendiri atau mendownloadnya dari penyedia cursor gratisan. Berikut beberapa situs yang menyediakan cursor gratisan.
  • cursors-4u
  • jellymuffin
  • moocursors
  • 123cursors
  • myspacecursor
Pilih cursor yang sobat suka kemudian copy link cursornya. Sobat dapat menggunakan linknya secara langsung atau menyimpannya ke hostingan tempat penyimpan gambar yang sobat suka.

Langkah selanjutnya adalah memasang kode css cursor pada blog sobat. Ikuti langkahnya sebagai berikut.
  1. Login di Blogger.
  2. Pilih Template.
  3. Edit HTML.
  4. Search/cari (gunakan Ctrl+F pada browser) body {
  5. Letakkan kode yang berwarna biru seperti yang dibawah ini pada css class body. Contoh.
    body {
    background:#fff;
    margin:0;
    padding:40px 20px;
    font:x-small Georgia,Serif; text-align:center; color:#333; font-size/* */:/**/small; font-size: /**/small;
    cursor: url("https://sites.google.com/site/monozcore/home/OptimusPrimeCursor.cur"), default;
    }
  6. Ganti kode yang berwarna merah dengan alamat link cursor yang akan digunakan.
  7. Simpan Perubahan Template dan lihat hasilnya.
Gampang kan...jika sobat masih mengalami kesulitan silakan tanyakan di kotak komentar.

Tidak ada komentar:

Posting Komentar