Rounded Image hover effect. (Efek gambar melengkung)

Maafkan saya, sebab lama tak update. Tapi terima kasih, korang still singgah sini. =')

Sekarang nak buat tutorial Rounded Image hover effect atau efek gambar lengkung (main tibai je name benda alah ni. haha. ;p). Ramai sangat dah mintak, sila lempang nadd sekarang sebab lambat sangat buat tutorial ni. T______T

Ni lah contoh efek gambar tu bile cursor di halakan ke gambar. =)

*sorry tau lambat. =_______=" *

Untuk minima template & classic template (Temp.Designer kat bwh.)

1. Pergi Dashboard >> Design >> Edit HTML
2. Then, tekan kat keyboard : "Ctrl + f" (tekan Ctrl dgn f serentak), akan keluar satu kotak find.
3. cari code ni : a img {
4. Pastu, copy code bawah ni pulak : 

   -webkit-transition-duration:.4s;} img:hover {filter: alpha(opacity=60); opacity: .6; -webkit-box-shadow: 0px 0px 20px #FA58AC; -moz-box-shadow: 0px 0px 20px #FA58AC; -webkit-border-top-right-radius:20; -webkit-border-top-left-radius:20; -webkit-border-bottom-right-radius:20; -webkit-border-bottom-left-radius:20;}img:hover {filter: alpha(opacity=60); opacity: .60; border: 1px dashed #FA58AC; border-radius: 30px; -moz-border-radius: 30px;}

   *noted: tulisan berwarna boleh ubah. #FA58AC boleh tuka color lain kat SINI. dashed boleh tukar jadi: solid/dotted/inset/outset/double (test sendiri)
   
   
5. Paste kan di sebelah a img { tadi. =)
6. SIAP!

Untuk Template Designer

1. Pergi Dashboard >> Design >> Edit HTML >> pilih Template Designer *sebelah Edit HTML*
2. cari :
3. Then cari, Add CSS. Copy and paste code ni kat situ. (tengok gamba)

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

Last: SAVE je. SIAP! =)

ok.BaiBai. <3

p/s: AWAY untuk 3 HARI.

pergi BERCUTI. yay! :D

UPDATED!

Tutorial ni maybe dah tak support format blog baru skrg,

sbb tu ramai yang buat tak jadi.

Cubalah byk kali, tapi if still tak jadi..

tak dapek den nak nolong.

Sorry T___T

Tweet ♥

Nak side income dengan berblog? Tak payah traffic tinggi tinggi.

Sekarang ni tengah hangat orang cakap pasal heartbeat ni.

heartbeat ni lebih kurang dengan nuffnang jugak. tapi instead of kita kena kejar traffic baru kita dapat buffered earning kan, dengan heartbeat ni korang tak payah kejar traffic dah. cuma daftar dan dengan setiap klik yang orang klik akan dapat RM0.04. Yang bestnya iklan dia akan ada di blog korang 24/7. so, traffic tak tinggi pon boleh dapat side income. Kalau nak lebih kena rajin lah. =)

Kepada newbie-newbie macam saya ni, boleh lah try. Tak payah nak jeles dengan blog orang lain boleh kaya raya dengan nuffnang, kita pon boleh denagan heartbeat. Tapi kena rajin blogwalking jugak. =)

jangan risau status gliterati nuffnang takkan berubah sebab heartbeat ni cuma jual barang barang souvenir just for advetising je.

FOLLOW THE STEP BELOW

1. Mula mula klik sini dulu untuk ke website diorang.

2. Then klik Icon Hearbeat seperti yang dibulatkan tu.

3. Klik CREATE ACCOUNT dan isi kesemua maklumat berkenaan.

4. Masukkan Password Email Address then klik I agree HeartBeat's Terms of service then klik continue.

5. Then dah create account klik Join HB!Affiliate seperti kotak merah dibawah.

6. Klik Online Application (seperti yang ditunjukkan dibawah) then isi kesemua maklumat yang diperlukan.

7. Pilih cara pembayaran yang hendak dibuat kepada anda. tick i agree and then klik continue.

8. Klik GET A CODE (seperti lampiran dibawah)

9. Copy Code yang anda kehendaki (bertanda merah bulat), ikut korang lah nak letak dia kat mana. kat sidebar ke. kat top sidebar ke. copy code yang sesuai ya.

10. Kalau nak check berapa earning korang. boleh Klik My HB!Affiliate

11. So lepas dah copy tu, macam biasa lah. Design > Add a Gadget > HTML/JavaScript > paste kan code yang korang dah dapat tadi > save. Then letak lah kat mana korang rasa orang lain senang nak klik. :) 

senang je! korang pon boleh promot heartbeat ni. =)

ini earning nuffnang i tanpa BE. Saje je blurkan nombor tu,

nak suruh korang teka. HAHA. Alhamdulillah. nak kumpul lagi banyak2, tak nak cashout. hehe.

I tahu heartbeat ni dari Hudalulu,

and tutorial tu copy-paste dari blog Sherah. =p

Cepatlah create account bagi yang takde, yang dah ada boleh klik klik kat blog i ni. =)
Sorry nuffnang, hehe. Nuffnang lambat lah. Dah SEBULAN nuff tak update earning. T.T

Tweet ♥

Energy saving mode

Di request oleh,

formspring me

Apa Energy saving mode ni?

contoh;

page selepas seminit di tinggalkan. Cool kan? heee~

cara-cara:

1. pergi  website www.onlineleaf.com

2. copy javascript code ni. <script language="javascript" type="text/javascript" src="http://www.onlineleaf.com/savetheenvironment.js"></script>

3. pergi dashboard >> Edit HTML >> paste code lepas </head>

@ dashboard >> design >> add gadget sidebar >> HTML/java script. Paste code dan save!

4. View blog, tunggu 1 minit nanti jadi macam kat atas tu.

boleh jugak kalau nak tukar bahasa dan masa energi ni. Apa?

nak tukar jugak??ok, macam ni,

copy code ni:

<script language="javascript" type="text/javascript" src="http://www.onlineleaf.com/savetheenvironment.js?lang=en&time=90"></script>

okey, sekarang kita tukar bahasa "en" tu dan masa "90",

en = English
id = Indonesia/ Malaysia

90 = 1.5 minit
120 = 2 minit
180 = 3 minit and so on..

ok tu je. thxandbai! ♥
Tweet ♥

UPDATE!-Banner maker via Photoscape atau buat banner sendiri dengan photoscape.

hiiyaaaaah ! 2 hari suda tak update blog terchenta.
Rindu nadd tak? Rindu tak? (tolong la ckp rindu. ;p)


Okey hari ni nak ajar cik Farah buat banner guna Photoscape.
Tapy, sebenarnya farah mintak di ajar guna photoshop.
Hasilnya sama je sebenarnya. Photoscape ke photoshop ke,
cuma photoshop agak complicated sikit. Takot fara tak paham nadd explain nnt.


Ini buktinya tau !

update.

SILA TEKAN:

Let's Start.
Okey first, mesti kena ada Photoscape lah kan.
bagi anda anda yg baca ni, teringin nak try, bole download SINI.

Korang perlukan at least DUA gamba. bace betol2, DUA ya, bkn satu.
Edit lah apa apa gamba yang korang suke.

pastikan SIZE gamba SAMA !

kalau lain lain size nanti nampak tak cantik dan tak kemas.

click image for better instruction.

click image for better instruction.

click image for better instruction.

click image for better instruction.

host/upload banner dekat photobucket,imageshack, etc.

register/sign up*(recommended)* jika perlu.

click image for better instruction.

click image for better instruction.

okay, now FINAL step. Yang ke-sepuluh.

u p d a t e !

Copy code bawah ni ke dalam notepad/wordpad/etc 

<center><a href=" URL BLOG KORANG " target="_blank"><img src="URL BANNER KORANG

<textarea rows="4" cols="20">
<a href=" URL BLOG KORANG " target="_blank"><img src="URL BANNER KORANG " border="0"  /></a></center> " border="0"  /></a>

 
sila edit URL BLOG KORANG dan URL BANNER KORANG,
dekat notepad/wordpad/etc tadi, dan
dah siap boleh teros letak dekat sidebar.

h a s i l n y a :

 

<br> <a href=" http://yummynuts.blogspot.com/ " target="_blank"><img src="http://img524.imageshack.us/img524/3462/bannertutorial.gif" border="0"  /></a></center></span></span></font><span class="Apple-style-span" style="color: rgb(51, 51, 51); font-family: Arial,sans-serif; font-size: 13px;"><br /></div></div></div></span></div></div><p><font size="3"><br></font></p><br><p style="text-align: center;"><font size="3"><span><u><b><span style="color: red;"><br></span></b></u></span></font></p><p style="text-align: center; clear: both;" class="separator"><font size="3"><a style="margin-left: 1em; margin-right: 1em;" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTlaG35ze2HsGlZWVHtCdDVbd1mJOLuXproDbrIUhPTzxux4F94B9bLTGUnCOlUHESnVpqx5xLzbMf-RFt2FCC_NoQsdPprosZ7SOSc4OykuROnQ33vDdNPihuk_63xRtp2C8Fc3ru2Ac/s1600/k1.jpg" imageanchor="1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTlaG35ze2HsGlZWVHtCdDVbd1mJOLuXproDbrIUhPTzxux4F94B9bLTGUnCOlUHESnVpqx5xLzbMf-RFt2FCC_NoQsdPprosZ7SOSc4OykuROnQ33vDdNPihuk_63xRtp2C8Fc3ru2Ac/s400/k1.jpg" width="400" border="0" height="263"></a></font></p><p style="text-align: left;"><font size="3"><span><span style="color: red;"><font color="#000000">update ni sebab, ada lagi yg tanya.</font></span></span></font></p><p style="text-align: left;"><font size="3"><span><span style="color: red;"><font color="#000000">maybe tak paham kot (?)</font></span></span></font></p><p style="text-align: left;"><font size="3"><span><span style="color: red;"><font color="#000000">and, SORRY bukan taknak buat,</font></span></span></font></p><p style="text-align: left;"><font size="3"><span><span style="color: red;"><font color="#000000">tapi macam takde mood,</font></span></span></font></p><p style="text-align: left;"><font size="3"><span><span style="color: red;"><font color="#000000">nanti banner jadi macam tak cantik,</font></span></span></font></p><p style="text-align: left;"><font size="3"><span><span style="color: red;"><font color="#000000">nanti kena marah. wuwuwu~ TT__TT</font></span></span></font></p><p style="text-align: left;"><font size="3"><span><span style="color: red;"><font color="#000000">korang buat sendiri eh? eh? :)</font></span></span></font></p><p style="text-align: left;"><font size="3"><span><span style="color: red;"><font color="#000000"> </font></span></span></font></p><p style="text-align: left;"><b><font size="3"><span><span style="color: red;"><font color="#000000">ORIGINAL post- 26/o8/2o1o</font></span></span></font></b></p><p style="text-align: left;"><font size="3"><span><b style="color: rgb(204, 0, 0);">REPOST- 17/o1/2o11</b><u><b><span style="color: red;"><br></span></b></u></span></font></p><p></p>

 

UPDATE ni pon sebab, ada lagi yang tanya.

maybe tak paham kot (?)

and SORRY, bukan taknak buat banner tu,

tapi macam takde mood,

nanti banner jadi macam tak cantik,

nanti kena marah. wuwuwu~ T___T

korang buat sendiri eh? eh? :)

ok.thanks.bai. <3

ORIGINAL POST- 26/08/2010

REPOST- 17/01/2011

dah ada friend page sendiri. hehehe.

jom lah LIKE. :)

Tweet ♥

Kacang je tuka font blog rupanya.

Senang sangat tukar font blog sebenarnya..
Sumpah baru jumpa dan baru tahu. hahaha..
ketinggalan zaman betol, org lain dah tau lame dah kot. =.="
beriya- iya je buat macam kevin & amanda.

Sape nak tuka font blog dia jugak?
meh nak tunjuk caranya. :D
tapi, untuk minima template je menjadi.
template selain tu tak tau lah, buat eksperimen sendiri la ek.

Tapi kalau ade yang rasa nak tukar ke template minima,
pegi kat "Edit HTML" tu, cari "Select Layout Template" kt bwh sekali.
then tukar je and save ye. (BACKUP TEMPLATE ASAL DULU.)

Okey, jom start. yey!
Pegi "Edit HTML", Tick yang "Expand Widget" tuh.
Cari perkataan "Text Font". tekan Ctrl+f lah senang.
Pastikan jumpa yg macam gamba bawah ni:

Tukar semua "Georgia" dan "Serif" pada nama font lain.
contoh:

• Papyrus
• Century Gothic
• Script MT Bold
• Tempus Sans ITC

*kalau nak font byk lagi, tengok dekat Microsoft Word lah.

Kalau dah tukar, Preview dulu yer sayang.
Dah puas hati, Save je teros !

Amacam? Jadi tak?
Kalau jadi bgtau lah, nak jugak terjah blog korang. :)
Tak jadi? Sila ulang balik dari awal,
Jangan lupa baca Bismillah ye.

Kalau tak jadi jugak, cuba Try yang ni pulak.

tapi, nadd tak penah try lagi yang ni.

How to change font on your blog (easy)

okey, Bai. <3

Tweet ♥

Kotak Oren comel atau blockquote.

Assalamualaikum and Hai.

First of all mau cakap, Apa Khabar kawan kawan blogger yg comil² dan hensem²?

Macam mane cuti hujung minggu? 

ohh.. dua hari tak hapdet blog. hek hek

bukan malas, tapi tak rajin. ;p

Okeyy, hari ni nak buat tutorial lagi.

Bukan nak berlagak ke apa. Orang mintak tolong.

Tak salahkan kita ajarkan. Dapat pahala. auuww~

 amoi yg gojess bertanya.

okey, kotak² oren tu di panggil blockquote.

macam ni. yang korang tengah tengok ni.
here goes the tutorial. :D

macam biasa pergi,

• Dashboard > Layout/Design > Edit HTML 
(BACKUP TEMPLATE dulu, nanti tak jadi nanges tak berlagu pulak.)
• Tekan CTRL+F dan cari kod bawah ni :

.post blockquote {
ATAU
blockquote

pastu akan jumpa code ala ala macam ni :

.post blockquote {

margin:1em 20px;
}

hightlight je semua code tu, gantikan dengan code ni :

.post blockquote {
background: #FFB380;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomleft: 10px;
padding: 6px;
Border: 3px solid #e06666;
margin:1em 20px;
}

okeyy, ada penerangan sikit,

.post blockquote {
background: #FFB380; (ini background color,ubah color lain SINI.)
 
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomleft: 10px; (ini bentuk border, hanya yang guna mozilla saje berfungsi. Tak caye? cuba view blog ni guna mozilla.)
 
padding: 6px; (tak payah usik.)

Border: 3px solid #e06666; (ini ketebalan dan garisan border.)
- tebal/nipis border boleh ubah di 3px. sila buat eksperimen sendiri.
- garisan border boleh ubah di solid.
ini contoh :
solid,garisan lurus.  ___________
dotted,garisan titik².  ................
dashed, garisan putus².  _ _ _ _ _ _ _


ada lagi: double, groove, ridge, outset, inset : buat eksperimen sendiri. ;p

 
margin:1em 20px; (tak payah usik)
}


dah puas hati, save saje.

macam mane nak guna?

pergi create New post, tulis saje ape ape
hightlightkan dan tekan 

ini contoh.

-Kalau tak jumpa code:

.post blockquote {
ATAU
blockquote

 Sila Ctrl + f, dan cari ]]></b:skin>

copy je code yang dah di beri dan paste sebelom  ]]></b:skin>

 Itu saje. 

p/s: Banyak gila blockquote kat entry ni. haha

Waktu korang korang baca entry ni, 

nadd sedang di ulit mimpi basah indah.

 Gua tak sihat lah.

DEMAM. :'( tsk tsk

TAMBAHAN.

Disebabkan ade budak budak comel yg manja bawah ni tanya,

so nak update sikit, :D

blockquote dengan background, just tambah :
background-image:url (Image URL);



macam ni :


 .post blockquote {
background-image:url (Image URL);
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomleft: 10px;
padding: 6px;
Border: 3px solid #e06666;
margin:1em 20px;
}

so, sini ade beberapa background comel kot?

copy je code tu. :)

http://i465.photobucket.com/albums/rr19/karrinaxsmile/Background%20music/wall_grey.gif

http://i234.photobucket.com/albums/ee284/ohbaby3425/patterns.jpg

http://dl3.glitter-graphics.net/pub/2725/2725413buoul6giov.gif

http://dl9.glitter-graphics.net/pub/2728/2728019krp8i2239s.jpg

http://dl6.glitter-graphics.net/pub/606/606506ynkjl9iq9c.gif

http://dl2.glitter-graphics.net/pub/2731/2731612wdjmgdstyl.jpg

for more kawaii background pergi sini dan sini juga. :)

UPDATE FOR TEMPLATE DESIGNER.

1. pergi dashboard >> klik design >> klik Template designer.
2. cari :
3. pastu copy code yg dah bagi kt ats tu,then cari "Add CSS" pastekan kat situ. (tengok gamba)

SIAP! untuk template designer ni tak sure boley letak background ke tak. boleh test sendiri. =)

okey, Bai <3

Tweet ♥

Scroll Box Comel.

Assalamualaikum dan Hai.

Ini Tutorial.

Kalau berminat teruskan membaca.

Tak berminat? baca jugak, kalau tak nanti cirit birit.

-_______-