Cute Profile for Blogger [FIXED]

Assalamualaikum dan Salam Maal Hijrah. Hari ini aku nak menulis satu tutorial yang diadaptasikan dari Wordpress plugin. Tergerak hati untuk membuat tutorial ni sebab Piston Pecah tanya aku camne nak buat. Selepas di selidik, cute profile hanya boleh dipakai di Wordpress. Tetapi sekarang tidak lagi.

Bagi pengguna Wordpress, korang boleh mendapatkan Cute Profile di http://wordpress.org/extend/plugins/cute-profiles/. Bagi pengguna Blogger/Blogspot tumpukan perhatian korang.

Kemas kini terbaru : Jika korang merasakan ianya sukar, boleh mencuba pada Cute Profiles V2

1. Pastikan korang mendownload icon-icon tersebut. Muat Turun Icon. Saiz file hanya 257.3kb.

2. Extractkan file tersebut. Terdapat 3 folder didalamnya. Upload icon-icon tersebut.

3. Log masuk akaun korang dan pergi ke Layout. Klik Add a Gadget dan pilih HTML/Javascript..

4. Masukkan code dibawah.

<div style="display:scroll; position:fixed; top:80px; left:0px;">
<!-- facebook -->
<a
target="_blank"
onmouseover="document.facebook.src='url_image'"
onmouseout="document.facebook.src='url_image'" href="url_facebook"/>
<img src="url_image" name="facebook"/>
</a>

<br/>

<!-- twitter -->
<a
target="_blank"
onmouseover="document.twitter.src='url_image'"
onmouseout="document.twitter.src='url_image'" href="url_twitter"/>
<img src="url_image" name="twitter"/>
</a>

<br/>

<!-- Feeds -->
<a
target="_blank"
onmouseover="document.feeds.src='url_image'"
onmouseout="document.feeds.src='url_image'" href="url_feed"/>
<img src="url_image" name="feeds"/>
</a>

<br/>

<!-- Contact -->
<a
target="_blank"
onmouseover="document.contact.src='url_image'"
onmouseout="document.contact.src='url_image'" href="url_contact"/>
<img src="url_image" name="contact"/>
</a>

<br/>

<!-- grab -->
<a
onmouseover="document.grab.src='http://img693.imageshack.us/img693/801/grab.png'"
onmouseout="document.grab.src='http://img163.imageshack.us/img163/8895/grab1.png'" href="http://bit.ly/8tZZa0">
<img src="http://img163.imageshack.us/img163/8895/grab1.png" name="grab"/>
</a>

5. Customise code. Arahan seperti dibawah..

6. Save dan lihat hasil.

Customize Cute Profile.

<!-- facebook -->
<a
target="_blank"
onmouseover="document.facebook.src='url_image'"
onmouseout="document.facebook.src='url_image'" href="url_facebook"/>
<img src="url_image" name="add me"/>
</a>

<br/>

Cara mengubah code diatas adalah seperti berikut.

a) Korang boleh meletak apa-apa nama pada code yang diwarnakan seperti contoh dibawah.

• <!-- facebook -->

korang boleh menukar facebook kepada apa-apa perkataan.

b) Tukarkan url_image kepada link gambar yang telah korang upload. Pastikan korang meng'upload' dan memasang gambar/icon yang betul.

• onmouseover="document.facebook.src='url_image'"

Pastikan url gambar untuk code ini korang upload dari folder hover

• onmouseout="document.facebook.src='url_image'" href="url_facebook"/>

Untuk code ini, pastikan gambar yang korang upload dari folder grayscale/transparent
url_facebook - pastikan korang meletak url yang valid.

• <img src="url_image" name="facebook"/>

Untuk code ini, pastikan gambar yang korang upload dari folder grayscale/transparent
pastikan url yang anda letakkan pada code diatas sama seperti code diatas.

c) Kedudukan Cute Profile pada blog.

• <div style="display:scroll; position:fixed; top:80px; left:0px;">

Tukarkan perkataan yang diwarnakan kepada 'right' jika anda mahu ia berada di bahagian kanan blog.

d) Untuk memastikan icon yang dipasang akan hover/mouseover korang kena pastikan kesemua perkataan yang di warnakan dibawah adalah sama..
Dekatkan arrow mouse anda pada icon yang berada di bahagian kiri..

• Dekatkan arrow mouse korang pada icon cute profile yang berada di bahagian kiri blog ini jika korang tidak memahami apa itu hover/mouseover.
• Icon tersebut akan bertukar dari grayscale ke icon yang berwarna.
  

<!-- feeds -->
<a
target="_blank"
onmouseover="document.feeds.src='url_image'"
onmouseout="document.feeds.src='url_image'" href="url_feed"/>
<img src="url_image" name="feeds"/>
</a>

<br/>

P/S : JIKA KORANG MERASAKAN IA SUSAH, KORANG BOLEH MENCUBA CUTE PROFILE V2 PULAK. PERGI KE TUTORIAL CUTE PROFILE V2