2/19/14

Tutorial: Blur Image Hover Effect

Assalamualaikum.

Setelah berjaya mengkaji image hover effects, apa salahnya kongsikan dekat sini.
Basically bila guna effect blur ni, automatic semua gambar dalam blog akan menghasilkan blur effect bila kita halakan cursor ke atasnya.

Sorry yang dalam gambar ni tak obvious.


Step 1:
Copy the codes below.

img{
-webkit-filter: -webkit-filter: blur(1px);
}
img:hover{
z-index: -9999999999999999999999999px; -webkit-transition: 0.5s ease-in; -moz-transition: 1s ease-in; transition: 0.5s ease-in;
-webkit-filter: blur(1px);
}

Step 2:
Untuk pengguna simple template, pergi ke Template>Edit HTML.
Tekan Ctrl + F serentak dan cari code ]]></b:skin>
Paste codes tadi di ATAS code ]]></b:skin>

Untuk pengguna blogskin, pergi ke Template.
Tekan Ctrl + F serentak dan cari code <style>
Paste codes tadi di BAWAH code <style>

Step 3:
Tukar 1px tu kepada beberapa angka yang anda nak. Semakin besar angka, semakin strong dia punya blur effect. Tapi tak digalakkan guna angka yang besar sebab sakit kepala tengok blur effect yang terlampau strong. Guna 1px - 5px je okay.

Step 4:
Klik Preview. Bila dah berkenan, klik Save.

DONE!

Credit image: Skyler95

Tutorial: Overlapping bottom background

Assalamualaikum.

Overlapping: bertindih
Bottom: bawah

So... contoh dia macam dalam gambar di bawah ni.

This is my example. 
Background batu-bata grey di bahagian bawah tu overlapping bottom background.



Step 1:
Copy the codes below. Highlight dan tekan Ctrl + C serentak untuk copy.

<div style="background-image: url('URL BACKGROUND'); position: fixed; height: 80px; bottom: 0px; left: 0px; width: 100%; z-index: -1; "></div>

Step 2:
Untuk pengguna Simple Template, pergi ke Layout>Add a gadjet>HTML/JavaScript.
Paste codes tadi ke dalam bahagian Content.
Tak perlu letak Title. 

Untuk pengguna Blogskin, pergi ke Template.
Tekan Ctrl + F serentak dan cari code </Style>
Tampal codes tadi di BAWAH code </Style>

Step 3:
Ganti text URL BACKGROUND dengan url background kesukaan anda.

Step 4:
Klik Preview dulu. Kalau dah berkenan, baru klik Save.

 DONE!

Tutorial: Overlapping rotated background

Assalamualaikum.

Tajuk di atas main reka je (Selalu ada masalah nak pilih tajuk)

Overlapping: bertindih
Rotated: diputar

So... it looks like this.

This is my example. Background dotted line pink tu background sebenar.
Yang stripe biru cream tu background bertindih.


Step 1:
Copy the codes below. Highlight dan tekan Ctrl + C serentak untuk copy.
<div style="
background-image: url('URL BACKGROUND'); position: fixed; top: -300px; right: -300px; width: 500px; height: 500px; -webkit-transform: rotate(50deg); -moz-transform: rotate(50deg); -o-transform: rotate(50deg);"></div>
Step 2:
Untuk pengguna Simple Template, pergi ke Layout>Add a gadjet>HTML/JavaScript.
Paste codes tadi ke dalam bahagian Content. Tak perlu letak Title.

Untuk pengguna Blogskin, pergi ke Template.
Tekan Ctrl + F serentak dan cari code </style>
Tampal codes tadi di BAWAH code </style>

Step 3:
Ganti text URL BACKGROUND dengan url background kesukaan anda.
Ganti text right tu kepada left kalau anda nak overlapping background tu berada pada bahagian kiri blog.

Step 4:
Klik Preview dulu. Kalau dah berkenan, baru klik Save.

DONE!

Tutorial: Atasi masalah system laptop lag/freeze

Tak reti nak bagi tajuk yang sesuai sebenarnya. Tutorial ni khas kepada sesiapa yang laptop dia kadang-kadang jammed. Menyampah bukan?

Sebenarnya nak atasi masalah ni ada banyak cara. Ada banyak tips. Yang nak dikongsikan ni guna kaedah delete unimportant files. Salah satu sebab laptop punya memory jadi berat, sebab laptop kita penuh dengan files yang tak penting.

So let's get started.

Step 1
Buka folder Recycle Bin. Right-click, lepastu klik "Empty Recycle Bin".

Step 2
Klik Windows Start button dekat bawah hujung sebelah kiri. Search "Run" dekat kotak search.


Step 3
Taip "prefetch" dekat kotak Run tadi. Then, klik "OK".


Step 4
Select all ataupun tekan ctrl dan A serentak. Right-click, kemudian Delete.
Senang cerita, delete semua files dalam folder prefetch tu.



Step 5
Ulang balik Step 2. Kali ni, taip "%temp%" dekat kotak Run tu. Then, klik "OK"
Ulang Step 4. Delete semua files yang ada dalam folder tu. Kalau ada pop up message yang mengatakan unable to delete, klik Skip.


Step 6 *optional*
Step 6 ni bagi sesiapa yang ada application CCleaner. Kalau tak ada, boleh download. Cari je dekat Google atau Youtube yang free punya. Kalau malas nak download, tak payah ikut step ni. Tapi digalakkan ikut. lol.

Bukak application CCleaner tu. Klik "Run Cleaner" dan tunggu sampai dia habis load 100%. Then, klik "Analyze".



Step 7
Klik "Registry". Then, klik "Scan For Issues". Tunggu sampai load 100% dan klik "Fix Selected Issues". 


DONE!
Hasilnya boleh jadi tidak begitu ketara, bergantung kepada prestasi laptop anda. Cewah.
Langkah-langkah di atas works for me, tapi tak tahulah laptop orang lain macam mana.

P/S: Anda dinasihatkan untuk menjalankan sesi "rawatan" ke atas laptop anda dengan mengikuti steps di atas seminggu dua kali