Tutorial Sembunyikan Shoutbox Blog

Pada kebiasaannya, shoutbox akan berada di sidebar dan akan dapat dilihat terus. Tutorial kali ini akan menunjukkan tutorial untuk sembunyikan shoutbox anda.:)



Antara sebab kenapa disembunyikan shoutbox ini adalah untuk menampakkan page yang lebih kemas dan mungkin juga untuk tampil unik berbanding blog-blog lain.


Tutorial sembunyikan shoutbox seperti di bawah

1. Login akaun blogger anda, dari dashboard > design > page element > add a gadget > HTML/javascript.

2. Copy dan paste kod berikut ke ruangan html/javascript

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://2.bp.blogspot.com/-hp5hb7Z7Gvk/TmzEhhJZRmI/AAAAAAAAGgo/vmECDANflYw/s320/shoutbox.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #666666;
background:#F5F5F5;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">

KOD SHOUTBOX DISINI

<div style="text-align:right"><a href="http://tutorialuntukblog.blogspot.com/2011/09/tutorial-sembunyikan-shoutbox-blog.html" target="_blank"><small>tutorial here</small></a>
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

Nota: Gantikan "KOD SHOUTBOX DISINI" dengan kod shoutbox anda.
(tiada shoutbox.?)


3. Save dan lihat hasilnya.:)

TAMBAHAN.

Secara default, tab shoutbox adalah berwarna hijau, anda boleh menukar mengikut warna yang anda mahu dengan gantikan url yang anda mahu.

.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://2.bp.blogspot.com/-hp5hb7Z7Gvk/TmzEhhJZRmI/AAAAAAAAGgo/vmECDANflYw/s320/shoutbox.png') no-repeat;
}

Anda copy sahaja mana² url dari tab di bawah ini.
(tidak tahu cara dapatkan url gambar.?)




Tab kredit:ohcerita.com

Follow Up Komen Blogger

Apabila anda menghantar komen di sesebuah entri blogger lain yang mempunyai sistem komen asal (default), bagaimana cara anda follow-up komen tersebut samada dibalas atau tidak.?







Ada 2 cara untuk mengetahui samada ianya sudah dibalas atau tidak.



1. Buka entri tersebut beberapa kali/berapa hari kemudian untuk ketahui samada komen anda dibalas atau tidak.



2. Satu notification akan dihantar ke email anda mengatakan komen anda sudah dibalas



Semestinya cara kedua lebih mudah dan senang bukan.?.:)



Kali ini tutorial tidak melibatkan sebarang perubahan pada kod blog anda, cuma admin hendak tunjuk apa yang perlu anda klik untuk membolehkan anda follow up komen di blog blogger lain. Ini kerana admin perasan ini agak kurang disedari oleh blogger² dan tertanya² bagaimana hendak adakan sistem untuk follow up komen di blogspot sedangkan ianya sudah tersedia.:)



Mudah sahaja, apabila anda tengok pada bahagian komen sesebuah entri, paparan adalah seperti berikut.



Bagi komen yang embedded di bawah entri, anda klik pada 'subscribe by email'





Atau



Kalau komen yang dibuka pada page lain, pastikan anda tick pada 'Email follow-up comments to'





Itu sahaja. Senang dan mudah bukan.?:)



Ini contoh notification apabila admin subscribe comment di blog http://garpukuning.blogspot.com/







Jadi lepas ini senang, anda komen sahaja di mana² blog, dan subscribe untuk memudahkan anda.:)



p/s: Sebelum ini admin juga ada buat tutorial bagaimana hendak tahu jika pengunjung blog komen entri blog anda.

Tips SEO : Blog Title dan Description

Dalam entri lepas, admin ada bagitahu tentang kepentingan mempunyai url blog yang bersesuaian dengan tujuan berblogging, Tips SEO : Url blog / Niche blog. Dan mungkin seperti yang diketahui, mungkin ada yang ramai 'sayang' untuk tukar alamat blog yang asal.







Oleh itu, untuk kali ni admin akan tekankan faktor seterusnya yang penting untuk menarik trafik ke blog kita daripada search engine. Title blog dan description adalah yang seterusnya. Ini juga boleh dikatakan sebagai identiti sesebuah blog. Seperti blog ini admin menggunakan identiti Tutorial untuk blog dan tips blogspot.





Kenapa title dan description penting.



Ok admin buat contoh yang mudah, kalau anda suka satu lagu, apa yang biasanya anda pikir untuk merujuk kepada lagu tersebut. Tajuk lagu, artis, dan album serta mungkin tahun lagu keluar. So ini boleh admin katakan sebagai title dan description. Begitu juga blog, title dan description penting sebagai pengenalan awal, selepas itu baru masuk bab lirik (entri) dan lain-lain.

(macam tak best je contoh admin bagi ni.:)



Bagaimana hendak letak/ubah title dan description



Untuk pengguna blogger, tidak sukar untuk menukar title blog dan description.



Dari dashbord > settings > basic

Dan anda akan lihat bahagian title dan description. Anda boleh letak title dan description mengikut apa yang anda kehendaki yang bersesuaian dengan blog anda.

Contoh title dan description blog ini adalah seperti di bawah.









Bagaimana untuk letakkan title dan description.?



1. Untuk title, tidak perlu begitu banyak perkataan, cukuplah antara 3 hingga 5 patah perkataan. Jika terlalu banyak, sebenarnya agak menggangu apabila diindex di search engine. Ini kerana apabila diindex oleh search engine, title blog ini akan ditunjuk bersama title entri dalam result di search engine. Dan title blog juga akan dipaparkan di browser.







2. Untuk description boleh buat ayat sehingga 500 patah perkataan. Kebiasaannya untuk description ini akan ditunjukkan di bawah title blog.

description blog boleh dibuat dalam ayat yang menerangkan apa kandungan blog anda dan juga kenapa blog itu diwujudkan.



------------------



Penggunaan title dan description blog yang betul secara tidak langsung membuka mata search engine kepada blog anda. Admin tahu mungkin masih ada yang was-was hendak tukar title blog, mungkin sebab title blog sekarang sudah 'cantik', lagi² yang berblogging sekadar suka².:)



Bagi yang blogging memang ada tujuan yang khusus, baik anda tukar title dan description anda. Besar juga kesannya kepada SEO blog anda.:)Dan juga untuk title dan description ini, masih ada beberapa 'penambahbaikan' yang boleh dilakukan kepada keduanya. Admin akan ceritakan dalam entri seterusnya.



Happy blogging.:)

Tips SEO : Url blog / Niche blog

Apabila hendak daftar buat blog pada kali pertama, apa yang anda pikirkan.? Semestinya anda akan pikir apakah alamat blog yang anda rasa berkenan. Mungkin pada awal berblogging url blog dirasakan tidak penting, tetapi setelah lama sedikit dalam arena blogging ini, barulah diketahui pentingnya untuk mempunyai alamat blog yang bagus.







Ini kerana, alamat blog atau senang dinamakan url blog adalah salah satu faktor utama dan paling penting untuk SEO. Sebelum ini admin juga ada buat satu entri di blog unwanted untuk tips pemilihan url blog, dan anda boleh tengok point no 5 iaitu pemilihan url blog yang berkaitan.



Apabila memilih url blog yang betul, secara tidak langsung anda telah menggunakan teknik SEO samada anda sedar atau tidak pada permulaannya. Anda juga boleh tengok url blog tutorial ini, iaitu tutorialuntukblog. Walaupun sebelum ini admin juga ada buat tutorial di blog unwanted, kemudian admin sambung di blog ini. Tajuk yang admin pilih untuk blog ini memang untuk menjadikan lebih mesra SEO.







Niche blog boleh dikatakan sama sahaja dengan alamat blog dan url blog, tetapi perkataan niche ini biasanya digunakan untuk blogger yang menggunakan domain dan hosting sendiri.



Contoh?



Anda hendak buat blog berkaitan komputer, dan hendak mendapatkan trafik ke blog tersebut dengan menggunakan url yang sesuai,

so url yang mungkin bagus untuk SEO anda ialah; tipskomputer, tips-komputer, belajarkomputer, ilmukomputer. Jika url sebegini digunakan, kemungkinan untuk diindex di engin pencarian adalah lebih tinggi.







Bagaimana jika url sekarang tidak seperti yang dikehendaki.?



Tidak perlu bimbang dan tergesa-gesa. Kalau blog anda sekarang bukan url yang bagus, ada boleh tukarkan alamat blog, tetapi admin rasa tidak ramai yang sanggup lagi² jika url blog itu memang sudah ada maksud yang tersendiri. Admin juga sayang url unwanted86 apa dan admin tidak tukar pun.:)



Jangan bimbang kerana tidak semestinya faktor url blog sahaja untuk SEO ini, ada lagi faktor² lain yang berkaitan. Cuma kalau url 'kena' menguatkan lagi SEO anda. Tetapi jika url anda tidak begitu cantik, boleh guna lagi teknik² SEO yang lain. Jika url anda cantik, anda ada satu kelebihan.:)

Apa Itu SEO

Bergelar seorang blogger, antara perkataan yang akan jumpai dalam dunia blogging ini adalah SEO. Boleh dikatakan SEO ini memang agak glamour terutamanya di kalangan blogger yang sudah agak lama bertapak di dunia blogging.



Bagi blogger baru, mungkin masih tertanya-tanya, apakah sebenarnya SEO ini. Apakah kesan yang dibawa kepada seseorang blogger. Kenapa sesetengah orang terkejar-kejarkan SEO, kenapa sesetengah orang tidak kisah berkaitan SEO. Kali ni admin akan terangkan secara ringkas pengenalan kepada SEO, semestinya kepada blogger baru di arena blogging ini.:)

Apa itu SEO.

- SEO adalah ringkasan kepada Search Engine Optimization. Kalau bahasa mudahnya adalah cara untuk mengoptimumkan apa yang anda buat di blog anda supaya blog anda tersenarai di search engine seperti google, yahoo, bing dan lain².


Apa tujuan SEO.

-Tujuan utama SEO bagi seorang blogger yang menggunakan teknik SEO adalah untuk mendapatkan trafik dari search engine. Kemudian baru berkaitan dengan pagerank, eaning dan sebagainya. Tetapi tujuan utama adalah trafik dari search engine.


Perlu ke SEO pada blogging.

- Pada blogger yang pentingkan trafik untuk ke blog mereka, YA.
Dan paling kurang tahu basic² utama dalam SEO ini.
- Bagi blogger yang berblogging sekadar diari, mengisi masa lapang, atau berblogging sekadar ada blog, SEO tidak begitu penting.


Banyak ke teknik SEO ini.

-Ya, ada banyak teknik SEO.
Admin akan terangkan dalam post-post lain selepas ini.


Kalau buat SEO ni konfirm berjaya ke.?

- Admin tidak boleh kata konfirm. Tetapi bagi sesiapa yang menggunakan dan mencubanya boleh dikatakan akan menampakkan hasilnya.



Contoh hasil SEO.?

Ini admin ambil dari blog admin satu lagi, unwanted86.blogspot.com. Berkaitan bulan ramadhan, so target SEO admin berkaitan ramadan. Gambar di bawah contoh trafik hasil SEO.




Ada beza ke SEO dan SERP.

Yup berbeza.
SEO - Search Engine Optimizationn - Lebih kepada teknik
SERP - Search Engine Results Page - Kedudukan dalam search engine. (kurang glamour:)



Perkaitan keduanya.?

Power SEO, akan power SERP.
Boleh kata SEO adalah usaha, SERP adalah hasil.:)


So, apa tekniknya.?

- nanti admin akan bagitahu dalam next entri. Ini kan baru pengenalan.:)

Tutorial Letak Salji Dalam Blog : Ver 2

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

<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.:)

Animated Recent Post Ver2

Recent post menunjukkan apakah post terbaru yang baru dihasilkan oleh seseorang blogger untuk blognya. Adanya animated recent post widget, dapat menambahkan lagi 'seri' bagi senarai recent post anda.



Anda boleh lihat demo animated recent post ver2 ini di blog demo ini.

Tutorial untuk membuat animated recent post ini adalah seperti berikut.

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

2. Copy dan paste kod di bawah ke dalam ruangan HTML/javascript yang anda buka.

<style type="text/css">
#rp_plus_img{height:377px;}
#rp_plus_img li {height:60px;padding:5px;list-style:none;
background-color:#ffffff;
border:solid 1px #000000;}
#rp_plus_img a{color:#00000;}
#rp_plus_img .news-title{display:block;font-weight:bold ;margin-bottom:4px;font-size:11px;
text-align:justify;
-moz-border-radius: 5px;}
#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #00000;width:55px;height:55px;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="https://sites.google.com/site/unwanted86/javascript/recentpost.js"></script>
<script type="text/javascript">
var speed = 1500;
var pause = 3500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img">
<script style="text/javascript">
var numposts = 5;
var numchars = 0;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul><small><a href="http://tutorialuntukblog.blogspot.com/2011/07/animated-recent-post-ver2.html" target="_blank">get this widget here</a></small>

3. Save dan lihat hasilnya.

p/s: Sebelum ini admin juga ada buat tutorial animated recent post ver1.

Energy Saver Untuk Blog Anda.

Blog anda boleh diletakkan dalam mode energy saver jika anda mahu. Kalau dunia realiti ada Earth Hour untuk menunjukkan sokongan kepada penjimatan tenaga, blog anda pun boleh.:)



Contoh blog apabila diletakkan energy saver seperti gambar di bawah.



Tutorial untuk letakkan energy saver ini seperti berikut.


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

2. Dengan menggunakan fungsi Find (ctrl + F), cari kod </head>

3. Copy kod di bawah dan paste SEBELUM kod </head>

<script language='javascript' src='https://sites.google.com/site/unwanted86/javascript/savetheenvironment.js' type='text/javascript'/>

Contoh:



4. Save dan lihat hasilnya.

Nota: Anda perlu biarkan selama 1 minit untuk energy saver memulakan operasi.:)


p/s: Original code : www.onlineleaf.com/

Tutorial Buat Tab Menu / Navbar Menu

Mempunyai tab menu ataupun navbar menu dalam sesebuah blog boleh digunakan oleh pemilik blog untuk meletakkan link yang penting atau link yang ingin diberi perhatian oleh pengunjung blog. Anda boleh lihat contoh tab menu yang ringkas di sini







Tutorial untuk membuat tab menu / navbar menu adalah seperti berikut.







1. Dari dashboard > design > edit html

(backup template untuk langkah berjaga²)



2. Menggunakan fungsi find (ctrl + F), cari kod ]]></b:skin>

2.1 Jika tidak jumpa, cari kod </head>



3. Copy dan paste kod di bawah SEBELUM kod yang anda jumpa di langkah 2 @ 2.1

ul#list-nav {

list-style:none;

margin:20px;

padding:0;

width:525px

}



ul#list-nav li {

display:inline

}



ul#list-nav li a {

text-decoration:none;

padding:5px 0;

width:100px;

background:#FF0099;

color:#eee;

float:left;

text-align:center;

border-left:1px solid #fff;

-moz-border-radius: 5px;

}



ul#list-nav li a:hover {

background:#FF6699;

color:#000

-moz-border-radius: 5px;

}

Contoh.:







4. Save template anda.



5. Kemudian, kembali ke dashboard, pergi ke design > page element > add a gadget > HTML/javascript



6. Copy dan paste kod di bawah di dalam HTML/javascript kemudian tukarkan 'Link' dengan link yang anda mahu letak di tab menu.

Contoh : <li><a href='http://ohbest.blogspot.com'>Home</a></li>



Selepas selesai masukkan link yang dikehendaki,

save.

<div>

<ul id='list-nav'>

<li><a href='Link'>Home</a></li>

<li><a href='Link'>About Us</a></li>

<li><a href='Link'>Services</a></li>

<li><a href='Link'>Products</a></li>

<li><a href='Link'>Contact</a></li>

</ul>

</div>

7. Drag ke bawah element header, save dan lihat hasilnya.:)









Nota 1: Untuk langkah 3, anda boleh ubah beberapa kod seperti warna background, border, dan radius. Bergantung kepada bagaimana tab menu yang anda mahukan.



Nota 2: Jika anda hendak tambah tab menu, copy paste barisan di langkah 6.





Happy blogging.:)

Tips Menaip Entri Dalam Blog : Part 2

Sambungan daripada tips menaip entri dalam blog part 1, entri kali ini akan memberikan 3 lagi point yang boleh dititikberatkan jika anda menaip entri di dalam blog. Bagi yang belum membaca part 1, anda boleh baca dahulu sebelum sambung entri ini. Atau mana-mana dahulu pun boleh.:)



Untuk kali ini, 3 lagi point yang anda perlu pertimbangkan untuk menaip adalah seperti berikut.

1. Gambar

Meletakkan gambar adalah penting untuk sesebuah entri. Kewujudan gambar akan lebih mencorakkan lagi apa yang anda taip di dalam blog. Jadi gambar sememangnya mempengaruhi minat pengunjung untuk membaca kandungan entri anda.


Kalau anda baca buku, kan best kalau ada diselitkan gambar. Begitu juga entri blog. Paling kurang gambar yang ada adalah sekeping atau berapa banyak yang dirasakan perlu. Tetapi pastikan juga jangan letak terlalu banyak gambar dalam entri melainkan entri yang memang berbentuk penerangan bergambar.


2. Provokasi

Adakah bagus untuk melakukan provokasi semasa menaip blog.?. Jawapannya adalah YA. Menaip entri yang berbentuk provokasi sememangnya salah satu teknik menaip yang mampu menarik lebih ramai pengunjung untuk membaca dan komen.


Tetapi harus diingatkan, jangan melakukan provokasi yang bersifat keras. Lakukan provokasi yang lebih bersifat lembut dan menarik orang untuk membaca dan komen yang bernas, bukannya membaca dan di balas dengan cacian. Dan jika anda hendak tahu, entri yang melakukan provokasi pada jantina yang berlainan lagi bagus.:)

Provokasi akan membuatkan pembaca berasa 'geram' untuk baca dan komen..:). Contoh provokasi 'lembut' untuk lelaki, Lelaki memang banyak bagi alasan macam ni eh.?, dan contoh provokasi 'lembut' terhadap perempuan yang pernah ditaip sebelum ini.,Perempuan memang selalu macam ni eh. So entri ini akan membuatkan pembaca akan berasa relax untuk membaca dan rasa hendak komen je berbanding entri berbentuk fakta.:)


3. Persoalan.

Tinggalkan persoalan untuk entri anda. Persoalan juga boleh memacu pembaca untuk ingin selalu mengikuti setiap entri anda. Selain itu, persoalan juga membolehkan pembaca lebih berminat untuk menghantar komen.



Contoh, jika anda buat persoalan, "Hendak tahu apa yang terjadi lepas tu.? Nanti aku cerita dalam entri akan datang ye.". Apabila membaca, pembaca ingin tahu apa yang berlaku dan kemungkinan akan datang lagi untuk membaca. Kerana entri anda menimbulkan pertanyaan di pikiran mereka.

Juga boleh tinggalkan persoalan di akhir entri untuk pendapat, seperti " Apa yang korang rasa, perlu tak aku teruskan hubungan ini?"..(psst:tetapi janganla setiap entri ada persoalan pula.:)

Entri sebegini akan membentuk satu pembacaan yang bercorak pelbagai, bukan entri yang berbentuk mendatar sahaja.:)

------------------------------------------

Kebiasaaannya, untuk menghasilkan entri yang menarik, ianya lebih kepada pendekatan psikologi dan pengetahuan anda kepada sifat dan perlakuan manusia. Sebab jika anda menaip entri sebenarnya banyak pandangan orang dari perspektif yang berbeza. So ianya bergantung bagaimana anda tackle emosi pengunjung blog anda. Dan cara untuk tackle adalah hasilkan entri yang menarik perhatian mahkluk bernama manusia.:)

Tutorial Buat Scroll Box Untuk Blog Archive

Blog archive untuk sesebuah blog boleh menjadi list yang begitu panjang apabila banyak entri yang di post atau jika sudah lama terlibat dengan dunia blogging.

Tutorial kali ini kan menunjukkan bagaimana untuk jadikan blog archive anda boleh scroll untuk menampakkannya lebih ringkas menyenangkan mata memandang.:)



Tutorial untuk buat scroll bagi blog archive adalah seperti berikut.



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

2. Menggunakan fungsi find (ctrl + F), cari kod <div id='ArchiveList'>

3. Anda akan jumpa kod ini <div class='widget-content'> sebelum kod <div id='ArchiveList'>

4. Gantikan kod <div class='widget-content'> yang anda jumpa di langkah 3 dengan kod berikut.

<div class='widget-content' style='overflow:auto; height:200px'>

Note: Anda boleh tukar 200px dengan ketinggian yang anda mahukan.

Contoh:

Sebelum.


Selepas


4. Save dan lihat hasilnya.:)

-------------


Untuk scroll box widget lain yang menggunakan html code, boleh rujuk tutorial scroll box untuk widget

Kesan Khas Pada Gambar Apabila Dilalukan Cursor

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)