Cara Membuat Efek Zoom Gambar saat Dilalui Kursor

Cara Membuat Efek Zoom Gambar saat Dilalui Cursor. Pernahkah sobat melihat gambar membesar sendiri ketika disentuh cursor ? Apa ? Gak Pernah ? Sama Donk !! hehehe ... Kali ini Zona Artikel akan membagikan informasi tentang Membuat Efek Zoom Gambar saat Dilalui Cursor.

Demo

Bagaimanakah cara membuatnya, langsung saja ke TKP !!
1. Login ke Blogger
2. Pilih Rancangan > Edit HTML > Centang Expand Template Widget.
3. Kemudian letakkan kode berikut diatas kode ]]></b:skin>
    (Gunakan CTRL+F untuk memudahkan pencarian)

.cayunhover img{
-webkit-transform:scale(0.3); /*Webkit: Scale down image to 0.8x original size*/
-moz-transform:scale(0.3); /*Mozilla scale version*/
-o-transform:scale(0.3); /*Opera scale version*/
-webkit-transition-duration: 9.9s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
opacity: 0.7; /*initial opacity of images*/
margin: 0 10px 5px 0; /*margin between images*/
}


.cayunhover img:hover{
-webkit-transform:scale(1.2); /*Webkit: Scale up image to 1.2x original size*/
-moz-transform:scale(1.4); /*Mozilla scale version*/
-o-transform:scale(1.1); /*Opera scale version*/
box-shadow:0px 0px 30px blue; /*Kode Css3 untuk efek shadow*/
-webkit-box-shadow:0px 0px 30px blue; /*Untuk safari*/
-moz-box-shadow:0px 0px 30px blue; /*Untuk Mozilla*/
opacity: 1;
}

4. Kemudian Save Template.


Apakah dah selesai ? Belum. Masih ada kode lagi nih yang ketinggalan.
Masukan kode berikut dengan cara Rancangan > Tambah Gadget > Pilih HTML/Java Script

<div class="cayunhover">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimXx6qZKCIOF7qxifTYXE6w8JvtIqB4voqW9-WbbDlbh4NIyR98zPfTuSqeorNwdRAoKlfb4AeDdZnaHe7-GWhFwTZtrbOrrpsxg96vaFhNNeHrnOJN5Y_rmGrN52n7jvijfYR1sxP9cQ/s1600/blogger-logo%5B2%5D.png"/>

</div>

Ket.

*  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimXx6qZKCIOF7qxifTYXE6w8JvtIqB4voqW9-WbbDlbh4NIyR98zPfTuSqeorNwdRAoKlfb4AeDdZnaHe7-GWhFwTZtrbOrrpsxg96vaFhNNeHrnOJN5Y_rmGrN52n7jvijfYR1sxP9cQ/s1600/blogger-logo%5B2%5D.png  bisa Anda ganti dengan gambar yang lain.

Ingat !! Jangan sampai lupa di SIMPAN ...
Selamat Mencoba ?!!

Continue reading...

Hal Konyol Ketika Bermain Game Digimon Rumble Arena

Setelah sekian lama saya bermain game Digimon Rumble Arena ps1, baru kali ini saya mendapati hal konyol pada game tersebut. Jika sobat penasaran langsung saja lihat video berikut.

Lihat di Youtube : http://youtu.be/zDTR4tP0YAE

Continue reading...

Buku Tamu

Continue reading...

Cara Membuat Efek Meteor Jatuh di Blog

Cara Membuat Efek Meteor Jatuh di Blog. Langsung saja ke TKP !!


1. login blogger
2. Rancangan > Tambah Gadget > pilih HTML/Java Script
3. Lalu copy kode di bawah ini

<script language="javascript">
nd_mode="meteor";
nd_sound="on";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_top";
</script>
<script language="javascript" src="http://www.netdisaster.com/js/mynd.js"></script>

4. Terakhir SIMPAN


Selamat Mencoba ?!!

Continue reading...

Cara Membuat Cursor Diikuti Bintang di Blog

Cara Membuat Cursor Diikuti Bintang di Blog. Ehm.. Memang gak ada habisnya berbicara tentang HTML. Kali ini Zona Artikel akan membagikan informasi tentang Cara Membuat Cursor Diikuti Bintang di Blog, Langsung saja ke TKP !!


1. login blogger
2. Rancangan > Tambah Gadget > pilih HTML/Java Script
3. Lalu, copy kode di bawah ini

<script type="text/javascript" src="http://cayunkatel.googlecode.com/files/rainbows.js"></script>

4. Terakhir SIMPAN

Selamat Mencoba ?!!

Continue reading...

Cara Membuat Back To Top Dengan Double Click di Blog

Tombol Back To Top banyak diidentikkan dengan Tombol widget di pojok kanan bawah yang bervariasi bentuknya. Kali ini Zona Artikel akan membagi informasi tentang Cara Membuat Back To Top Dengan Double Click di Blog. Langsung saja ke TKP !!

1. login ke blogger

2. Rancangan > Tambah Gadget > pilih HTML/Java Script

3. Lalu copy script di bawah ini

<script language="JavaScript1.2">
function dblclick() {
window.scrollTo(0,0)
}
if (document.layers) {
document.captureEvents(Event.ONDBLCLICK);
}
document.ondblclick=dblclick;
</script>

4. Terakhir SIMPAN

Selamat Mencoba ?!!

Continue reading...

Cara Membuat Link dengan Efek Pelangi

Cara Membuat Link dengan Efek Pelangi. Kali ini Zona Artikel akan membagi informasi tentang Cara Membuat Link dengan Efek Pelangi. Bagaimana caranya, langsung sja ke TKP !!

1. login blog

2. Rancangan > Edit HMTL
3. lalu cari kode </body>
4. lalu masukkan kode script dibwah ini diatas kode </body>
    (Gunakan CTRL+F untuk memudahkan pencarian)

<script src='https://sites.google.com/site/vikrymadzblogspotcom/vikrymadz/rainbowlink.js'/>

5. Terakhir SIMPAN


Selamat Mencoba ?!!


Sumber : vikrymadz

Continue reading...

Cara Mudah Membuat Tampilan Blog/Web Maintenance

Cara Mudah Membuat Tampilan Blog/Web Maintenance. Kali ini Zona Artikel akan membagi informasi tentang mengenai Cara Mudah Membuat Tampilan Blog/Web Maintenance. Cara ini bisa sobat pakai bila sobat ingin membuat tampilan maintenance pada blog/web sobat.

Cara ini hanya menggunakan trik CSS dengan penambahan gambar saja kok. Tapi trik ini bisa membuat blog/web sobat seakan-akan seperti sedang maintenance.

Langsung saja pada langkah Cara Mudah Membuat Tampilan Blog/Web Maintenance :

1. login blog

2. Rancangan > Edit HTML

3. taruh kode dibawah ini diatas kode ]]></b:skin>
    (Gunakan CTRL+F untuk memudahkan pencarian)

html {
  height: 100%;
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUVBo6exlc2ITbXXXa4em6ZedcTvzVXZgIxQ7_HQ8eNa-hrIqwXzzaS_IbwCGDleyfglll20zSzVKewmUpSmGYQR10atcPeIPUBT02qmzJrTjv2-5XcLL-4gqifNKY17TKxfrLshWDk4Q/s1600/Site-Maintenance.png) no-repeat center 50%;
  margin: 0;
}
body {
  display: none;
}

Ket.

* https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUVBo6exlc2ITbXXXa4em6ZedcTvzVXZgIxQ7_HQ8eNa-hrIqwXzzaS_IbwCGDleyfglll20zSzVKewmUpSmGYQR10atcPeIPUBT02qmzJrTjv2-5XcLL-4gqifNKY17TKxfrLshWDk4Q/s1600/Site-Maintenance.png bisa sobat ganti dengan gambar yang lain.

4. Terakhir SIMPAN


Selamat Mencoba ?!!

Continue reading...