Laman


ShoutMix chat widget

Rabu, 13 Juli 2011

Cara Membuat Kupu-Kupu Terbang di Blog

Ingin tahu gimana caranya membuat kupu kupu terbang di blog. Kayak di blog ini. simaklah tutorial saya berikut ini yaa....

Caranya cukup mudah anda cukup memasukkan java sript untuk memunculkan kupu-kupu indah di blog anda. Baiklah langsung saja akan saya tuliskan cara membuatnya :

1. Login ke Blogger
2. Masuk ke Tata Letak
3. Trus Edit HTML
4. Trus copy-paste kode java script di bawah ini tepat
sebelum kode </head> untuk mempermudah pencarian tekan ctrl+f.


<script type='text/javascript'>
//<![CDATA[
var Ymax=8; //MAX # OF PIXEL STEPS IN THE "X" DIRECTION
var Xmax=8; //MAX # OF PIXEL STEPS IN THE "Y" DIRECTION
var Tmax=10000; //MAX # OF MILLISECONDS BETWEEN PARAMETER CHANGES

//FLOATING IMAGE URLS FOR EACH IMAGE. ADD OR DELETE ENTRIES. KEEP ELEMENT NUMERICAL ORDER STARTING WITH "0" !!

var floatimages=new Array();
floatimages[0]='http://i363.photobucket.com/albums/oo72/herisys/butterfly.gif';
floatimages[1]='http://i363.photobucket.com/albums/oo72/herisys/butterfly.gif';

Membuat Link Bintang Berkedip



Penampilan sebuah link akan lebih menarik jika ditambah dengan asesoris berupa bintang yang berkedip. Apalagi jika latar belakang dari link tersebut berwarna gelap, link akan terlihat lebih hidup ketika disorot mouse (bintang berkedip di sekitar link). Trik ini sudah banyak digunakan oleh blog-blog terutama yang memiliki latar belakang gelap.
Blog anda juga dapat ditambah dengan trik ini. Cuma disarankan ubahlah background blog anda menjadi lebih gelap agar bintangnya terlihat lebih jelas.
Berikut langkah-langkahnya :
  • Masuk ke Blogger.
  • Pilih Rancangan kemudian klik Edit HTML.
  • Backup dulu template anda, jika takut gagal.
  • Cari kode ini pada template anda :

    a:link {
    text-decoration:none;
    color: $(link.color);
    }

    a:visited {
    text-decoration:none;
    color: $(link.visited.color);
    }

    a:hover {
    text-decoration:underline;
    color: $(link.hover.color);
    )
  • Ganti kode css berwarna kuning dengan kode css dibawah ini dibawah ini :

    a:hover { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDmiUxO5rq5HfMwgvzQNV5g29tjlyKnabW-edPT9du4nnr_wnYKyo5dkEx4-5OGNroGwKhqlLJ-f258yO6BPEspyhZS7ZbfzXwu67WYUnHsSkdN_-xo8vKteva8zZEcwIdnW9CcEeii3nl/s128/bintang.gif);}
  • Secara lengkap susunannya jadi seperti dibawah ini :

    a:link {
    text-decoration:none;
    color: $(link.color);
    }

    a:visited {
    text-decoration:none;
    color: $(link.visited.color);
    }

    a:hover { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDmiUxO5rq5HfMwgvzQNV5g29tjlyKnabW-edPT9du4nnr_wnYKyo5dkEx4-5OGNroGwKhqlLJ-f258yO6BPEspyhZS7ZbfzXwu67WYUnHsSkdN_-xo8vKteva8zZEcwIdnW9CcEeii3nl/s128/bintang.gif);}
  • Tampilan image seperti dibawah ini :

  • Ganti url image (yang berwarna putih) dengan image milik anda sendiri, atau jika belum punya silahknan copy kode diatas dan paste pada template anda.
  • Klik tombol Simpan Template.
  • Lihat Link pada blog anda sekarang.
Info Indie