Selasa, 24 April 2012

download di sini

Kamis, 05 April 2012

Cara Buat Folder Transparan Di hp JAVA

Jumat, 16 Maret 2012

Efek senget apabila cursor menyentuh link



Caranya:

1) Sign in akaun blogger

2) Dashboard > Design > Edit HTML > Tick kotak "Expand Widget Templates"

3) Dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari kod
a:hover {

4) Kemudian copy paste kod di bawah selepas kod a:hover { yang korang cari tadi:
transform: rotate(7deg);
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
-webkit-transform: rotate(7deg);

contoh:
 a:hover {
transform: rotate(7deg);
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
-webkit-transform: rotate(7deg);


5) Sekali lagi, dengan menggunakan ctrl + F, cari kod di bawah pula:
a:link {


6) Kemudian copy paste kod di bawah selepas kod a:link { tadi:
transition: transform .5s ease-in;
-moz-transition: -moz-transform .5s ease-in;
-o-transition: -o-transform .5s ease-in;
-webkit-transition: -webkit-transform .5s ease-in;

Contoh:
 a:link {
transition: transform .5s ease-in;
-moz-transition: -moz-transform .5s ease-in;
-o-transition: -o-transform .5s ease-in;
-webkit-transition: -webkit-transform .5s ease-in;

7) Klik preview, jika tiada error, klik save dan lihat hasilnya.

Selamat mencuba! :)

 * efek ini hanya berkesan pada browser mozila firefox

Efek senget apabila cursor menyentuh image

Preview:

Menarik bukan?

Caranya:

1) Sign in akaun blogger

2) Dashboard > Design > Edit HTML > Tick kotak "Expand Widget Templates"

3) Dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari kod
]]></b:skin>
4) Kemudian copy paste kod di bawah sebelum kod ]]></b:skin> yang korang cari tadi:
.post img{
transition: transform .5s ease-in;
-moz-transition: -moz-transform .5s ease-in;
-o-transition: -o-transform .5s ease-in;
-webkit-transition: -webkit-transform .5s ease-in;
}
.post img:hover{
transform: rotate(5deg);
-moz-transform: rotate(5deg);
-o-transform: rotate(5deg);
-webkit-transform: rotate(5deg);

contoh:
.post img{
transition: transform .5s ease-in;
-moz-transition: -moz-transform .5s ease-in;
-o-transition: -o-transform .5s ease-in;
-webkit-transition: -webkit-transform .5s ease-in;
}
.post img:hover{
transform: rotate(5deg);
-moz-transform: rotate(5deg);
-o-transform: rotate(5deg);
-webkit-transform: rotate(5deg);

 ]]></b:skin>

7) Klik preview, jika tiada error, klik save dan lihat hasilnya.

Selamat mencuba! :)

Efek senget apabila cursor menyentuh blockquote

Preview:


Tutorial kali ini akan menunjukkan cara macam mana nak buat efek senget pada Bloquote apabila di sentuh cursor, seperti dalam preview di atas. Ikuti tutorial di bawah step by step. Sebelum itu, kepada sesiapa yang tak tahu cara nak pasang kotak pada petikan blockquote, sila rujuk tutorial ini atau untuk pengguna simple template, rujuk tutorial ini.

1) Sign in akaun blogger

2) Dashboard > Design > Edit HTML

3) Dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari kod

.post blockquote {
atau kod di bawah
blockquote:hover {

4) Copy kod di bawah dan paste SELEPAS / DI BAWAH kod yang korang cari di langkah 3 tadi
blockquote:hover {
-webkit-border-radius: 36px 12px;
-moz-border-radius: 36px 12px;
-webkit-transform: skew(1.deg,1.5deg);
-moz-transform: rotate(3deg);
-webkit-transform: rotate(3deg); }
border:2px dashed #000000;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomright: 10px;
}

5) Klik preview, jika tiada error, klik save template.

Selamat mencuba! :)

Efek round hover pada image apabila dilalukan cursor


Untuk membuat kesan khas pada gambar seperti preview di atas, sila ikuti tutorial di bawah:

1) Login akaun blogger anda

2) Dashboard > Design > Edit HTML > Backup template terlebih dahulu (untuk lagkah berjaga-jaga)

3) Tekan ctrl + F serentak, cari kod

/* Headings
atau
/* Header

Copy kod di bawah dan paste SEBELUM kod /* Headings atau /* Header
a img {
-webkit-transition-duration:.4s;}
img:hover {filter: alpha(opacity=60);
opacity: .9.9;
border-radius:50px;
border: 1px #FF66CC;
-webkit-box-shadow: 0px 0px 20px #FF66CC;
-moz-box-shadow: 0px 0px 20px #FF66CC;
}

Contoh:
a img {
-webkit-transition-duration:.4s;}
img:hover {filter: alpha(opacity=60);
opacity: .9.9;
border-radius:50px;
border: 1px #FF66CC;
-webkit-box-shadow: 0px 0px 20px #FF66CC;
-moz-box-shadow: 0px 0px 20px #FF66CC;
}

/*Header


4) Save dan lihat hasilnya.

Selamat mencuba! :)

Efek Link Bergoyang / Nudging

Demo:

Cuba korang lalukan cursor pada mana-mana link dalam blog ni, apa jadik? ada goyang tak? :) efek menarik ni korang boleh cuba apply dekat blog masing-masing.. kalau berminat la, kalo tak berminat jangan paksa diri ok,he2..caranya:

1) Sign in akaun blogger

2) Dashboard >> Design >> Page Element >> Add A Gadget >> Html / Javascript

3) Copy dan paste kod di bawah pada ruang Html / Javascript tadi:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script><script type='text/javascript'> $(document).ready(function() { $('a').hover(function() { $(this).animate({ marginLeft: '10px' }, 400); }, function() { $(this).animate({ marginLeft: 0 }, 400); }); });</script>
400 - speed / laju efek nudging. Korang boleh adjust nilai ni untuk kelajuan efek, lagi kecik nilai, lagi laju efek goyang.

4) Lastly macam biasa, klik save dan lihat hasilnya.

Selamat mencuba! :)