kania blog

Showing posts with label bergerak. Show all posts

Sunday, December 8, 2013

Foto Foto Keren Cinemagraph yang Bisa Bergerak

Beberapa hari ini saya sedang rajin hunting foto-foto keren hasil dari Cinemagraph. Eh, apa itu Cinemagraph? Oke, sebagai awam, kita sebut saja Cinemagraph itu adalah foto yang gambarnya bisa bergerak, seperti di film Harry Potter.

Dengan kata lain, Cinemagraph adalah foto hasil teknik foto dengan penambahan unsur animasi pada bagian tertentu sehingga gambar pada foto tersebut terlihat bergerak. Berikut ini beberapa contoh foto-foto keren hasil Cinemagraph:

Bagaimana, keren kan foto hasil Cinemagraph ini? Anda juga bisa membuatnya dengan Handphone Nokia atau Android lewat aplikasi Cinemagraph yang kompatibel dengan tipe HP Anda.

Friday, November 8, 2013

Membuat tab browser bergerak berputar seperti ular

Cara membuat
1. Login ke blog sobat
2. Klik dasbord
3. Klik rancngan
4.Klik tambah gadget
5. pilih html/JavaScript
Masukkan kode dibawah ini

<script type=text/javascript>

//<![CDATA[
scrW=screen.availWidth
scrH=screen.availHeight
window.resizeTo(10,10)
window.focus()
for(a=0;a<80;a++){
window.moveTo(0,0)
window.resizeTo(0,scrH*a/80)
}
window.resizeTo(0,0)
for(b=0;b<80;b++){
window.moveTo(0,scrH/1)
window.resizeTo(scrW*b/80,0)
}
for(c=0;c<80;c++){
window.moveTo(scrW/1,scrH/1)
window.resizeTo(0,scrH*c/80)
}
for(d=0;d<80;d++){
window.moveTo(scrW/1,0)
window.resizeTo(scrW*d/80,0)
}
for(e=0;e<80;e++){
window.resizeTo(scrW*e/80,scrH*e/80)
}
window.moveTo(0,0)
window.resizeTo(scrW,scrH)
//]]>

Sunday, November 3, 2013

Membuat Link Tulisan Bergerak Saat Disentuh Mouse

Kadang kita sendiripun merasa bosan melihat link yang hanya diam ditempat saja apalagi untuk para blogger yang variatif...tentu hal ini sangat menarik. Kali ini akan saya jelaskan bagaimana membuat link bergerak jika disentuh mouse. Jika anda ingin membuatnya di blog anda simak ulasannya berikut ini.

Caranya :
login ke Blogger anda
Klik rancangan / tata letak
Klik edit html
Cari kode </head>
Setelah ketemu kode tersebut, copy kode dibawah ini setelah kode diatas :

<script src=http://code.jquery.com/jquery-latest.js type=text/javascript/>
<script type=text/javascript>
$(document).ready(function() {
$(a.nudge).hover(function() { //mouse in
$(this).animate({ paddingLeft: 20px },400);
}, function() { //mouse out
$(this).animate({ paddingLeft: 0 }, 400);
});
});
</script>

Jika link yang anda gunakan berbentuk teks maka gunakan kode seperti ini :

<a href="URLANDA" class="nudge">LINKTEKSANDA</a>

Jika anda menggunakan link berbentuk gambar maka gunakan kode seperti ini :
<a href="URLANDA" class="nudge"><img src="URLGAMBARANDA" ></a>

Ganti teks yang saya beri warna merah dengan URL anda, biru untuk link yang anda inginkan, coklat untuk url tempat dimana anda menyimpan gambar.

Semoga bermanfaat dan selamat mencoba