Cara Membina Blog Anda: Tutorial Letak Salji Dalam Blog : Ver 2

! Tutorial Untuk Blog | Tips Blogspot

Tutorial Letak Salji Dalam Blog : Ver 2

July 10, 2011 at 9:17 AM

Meletakkan salji dalam blog boleh dijadikan unsur yang boleh menambahkan lagi ceria blog anda.:).

Ando boleh tengok demo salji berwarna purple yang admin letak di blog demo ini.

Tutorial untuk letak salji ini seperti berikut.

1. Dari dashboard > design > add a gadget > HTML javascript

2. Copy dan paste kod salji mengikut warna yang anda mahu ke dalam HTML/javascript

Putih
Tutorial Letak Salji Dalam Blog

<script type="text/javascript" src="https://sites.google.com/site/unwanted86/javascript/snowwhite.js"></script>

Purple

<script type="text/javascript" src="https://sites.google.com/site/unwanted86/javascript/snowpurple.js"></script>

Hitam

<script type="text/javascript" src="https://sites.google.com/site/unwanted86/javascript/snowblack.js"></script>

Biru

<script type="text/javascript" src="https://sites.google.com/site/unwanted86/javascript/snowblue.js"></script>

Merah

<script type="text/javascript" src="https://sites.google.com/site/unwanted86/javascript/snowred.js"></script>

3. Save dan lihat hasilnya.:)

Nota: Drag element ada ke bawah 'header' supaya salji muncul dari atas page blog anda.:)

Media Files
putih.png (PNG Image)

Kesan Khas Pada Gambar Apabila Dilalukan Cursor

July 10, 2011 at 6:28 AM

Satu kemestian bagi sesebuah blog mempunyai gambar di dalamnya. Tidak kira dalam entri atau di bahagian lain. Dan lebih menarik jika gambar yang anda letakkan memberikan sedikit kesan khas apabila anda lalukan cursor padanya.

Anda boleh lihat kesannya secara real di test blog ini.:)

Tutorial untuk membuat kesan khas pada gambar ini adalah seperti berikut.

1. Dari dashboard > design > edit html
(backup template untuk langkah berjaga²)

2. Dengan menggunakan fungsi find (ctrl + F), cari kod a img {

3. Delete kod selepas a img {, dan gantikan kod di bawah.

-webkit-transition-duration:.4s;}

img:hover {filter: alpha(opacity=60);
opacity: .6;
border-radius:20px;
border: 1px #FF66CC;
-webkit-box-shadow: 0px 0px 20px #FF66CC;
-moz-box-shadow: 0px 0px 20px #FF66CC;
}

Contoh:
Sebelum

Selepas

4. Save dan lihat hasilnya..:)

UPDATE:
Bagi yang tidak jumpa kod a img {,
copy kod di bawah, dan paste SEBELUM /* Headings atau /* Header

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

Note:
Anda boleh mengubah warna hover effect. Default warna pink (warna kegemaran perempuan ni.:).
Kalau hendak tukar warna lain, tukarkan FF66CC dalam kod di atas dengan kod warna yang anda suka. (kod warna lain boleh rujuk di sini)

Media Files
anigif.gif (GIF Image)