/* 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, 19 Maret 2012


Widget Naga Terbang Di Blog #2



Setelah postingan artikel Widget Naga Hitam Terbang Di Blog, kali ini saya membuat postingan artikel Widget Naga Terbang Di Blog #2. Dijamin makin unik dan atraktif walaupun pada prinsipnya sih sama.

Beragam cara untuk meningkatkan popularitas blog, mulai dari seo, optimalisasi template, konten dan widget serta membuat tampilan blog yang menawan. Hal ini menjadi suatu kewajiban buat para blogger yang ingin blognya menjadi top of blog di kalangan blogger. Dari semua strategi yang digunakan terkadang sobat blogger sering melupakan 2 hal yang tak kalah pentingnya yaitu keseimbangan dan originalitas.

Keseimbangan berarti kesabaran dan keseriusan dalam mengolah dan mengelola blog, sehingga dapat memberikan info yang bermutu dan bermanfaat. Originalitas berarti keaslian info yang dibagikan harus bisa secara jujur dipertanggung jawabkan dan tidak melanggar etika penggunaan informasi yang diperoleh.

Oke... sob kita lanjutkan ke topik pembicaraan. Pada postingan kali ini saya akan membagikan info tentang mengoptimalkan tampilan blog yang salah satunya dengan menggunakan widget naga terbang di blog #2. Kali ini animasi naga banyak pilihannya, sobat blogger tinggal pilih dari opsi gambar naga yang ada. Monggo dipilih dulu gambarnya kemudian tinggal dipasang scriptnya...

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 </Body> 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 </Body> tersebut.

    <script language="javascript">
    var floatURLimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYEkG0SX8oEUOzKdmbQjUOkQ1gakZvZFca-eCF6DskApH7qNmbAWVqjcXN0k5m3zL4hCxXR1bne1Aq-zgCKISphpTLBu_9E0SqBMSb-5uf_UqhxJ1HvEtQL3ksJEz67o-xADBlZ-TAHyhL/s800/Flying-Rainbow-Dragon-Animated-Image.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, silakan pilih gambar naga yang sobat suka pada pilihan gambar naga yang ada di bawah kemudian tinggal ganti kode script di atas yang berwarna biru.

  • Klik "Save" dan lihat hasilnya...

Pilihan Gambar Naga :
  • Rainbow Dragon 

    Image Link :
    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYEkG0SX8oEUOzKdmbQjUOkQ1gakZvZFca-eCF6DskApH7qNmbAWVqjcXN0k5m3zL4hCxXR1bne1Aq-zgCKISphpTLBu_9E0SqBMSb-5uf_UqhxJ1HvEtQL3ksJEz67o-xADBlZ-TAHyhL/s800/Flying-Rainbow-Dragon-Animated-Image.gif

  • Cute Dragon 

    Image Link :
    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiplOdqVLafXtKAq8Hnh89tpL_t4Y5P1GkXXf5rTLXAG79GtnAm9kC_VsSg1aDhRp14eKHRPJmZ6VCMHddHWFPNwhYP9XyhhXB2RCwCP6edIJHGxc1JH6j3jwK3afWq_mu2GA2xGNpN7lB4/s800/Flying-Cute-Dragon-Animated-Image.gif

  • Fire Dragon 

    Image Link :
    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyH97wXNnHORStwktipIZenMJMaN7J-j80IC3ERslwzBtqKcW6TRkW7d08Tn_Qx_R_38hyphenhyphen7F0yk4pNIRd2ZJlTvrHIgx1FLXOLY1hyGXmgB7ZcIczDK0ZbUla25weMP3Id0c3k1OMot58S/s800/Flying-Fire-Dragon-Animated-Image.gif

  • Green Dragon 

    Image Link :
    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3yoKHApdNFQcffw0pdrU-J8UfgrWnmLR_GH0nXihrFzg-ZQQpIqcEomLID8PLnNFY6rKECFCkNImsuUeWOxTEm8QXgL7o1giSDd9rzpXaPMX-pCXg6rZoLrnXXii_HouImmFQDmO3zMgs/s800/flying-green-dragon-animated-image.gif

  • Red Dragon 

    Image Link :
    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3yoKHApdNFQcffw0pdrU-J8UfgrWnmLR_GH0nXihrFzg-ZQQpIqcEomLID8PLnNFY6rKECFCkNImsuUeWOxTEm8QXgL7o1giSDd9rzpXaPMX-pCXg6rZoLrnXXii_HouImmFQDmO3zMgs/s800/flying-green-dragon-animated-image.gif

  • Grey Dragon 

    Image Link :
    https://lh5.googleusercontent.com/-bSPHoql1wR0/TztrRbikGDI/AAAAAAAAA80/gRzuw3I_MlA/s800/Flying-Grey-Dragon-Animated-Image.gif
Wuiiihhh keren dah.... jangan lupa supportnya ya... biar kreasi berikutnya semakin unik, menarik dan atraktif... terima kasih, akhir kata...
.: Semoga Bermanfaat :.

Tidak ada komentar:

Posting Komentar