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


16 Comments

  1. Thanx tp nape mouseover tuh x jd pun eh??
    lg satu kod tuh agak sukar disalin, bleh
    pebaiki semula tak??

    ReplyDelete
  2. @Eriyza Thanks sebab bagitau.. Sebenarnya tak perasan benda tu..
    dah diperbaiki...

    ReplyDelete
  3. Peh azab juga pengguna blogspot kena host image lagi,

    tapi takpe asalkan ada kemahuan disitu ada jalan

    ReplyDelete
  4. This comment has been removed by the author.

    ReplyDelete
  5. mouse hover tu tak jadilah...mesti ada masalah kan...please cek code yer... thanks :)

    ReplyDelete
  6. @|i∂mÏŸur∂| - Code tak salah... mungkin tak bersesuaian dengan theme yang ko pakai...

    ReplyDelete
  7. Klu guna ie langsung tak function ahh.... (just testing)

    ReplyDelete
  8. macam susah je nak buat,
    xpe.. slow2

    ReplyDelete
  9. @cikgu isza - boleh cuba version 2 punye..
    http://mrpiratz.blogspot.com/2009/12/cute-profile-for-blogger.html

    ReplyDelete
  10. weh,, salam bro... apsal dier tak vertical cute profile tu... cube g kat blog aku kalo nak tgk...http://qudwahalhasanah.blogspot.com/.... kalo ade penyelesaian.... ko tulih kat shoutmix kat blog aku... trimas...

    ReplyDelete
  11. salam bro... tq very2 much.... da elok da.... Semoga berbahagia dunia akhirat

    ReplyDelete
Previous Post Next Post