Cute Profile for Blogger V2

Code cute profile yang aku keluarkan pada entri lepas, nampaknya tidak boleh dijalankan pada sesetengah blog. Mungkin kerana masalah coding clash atau sebab-sebab lain. Dan pada hari ini, aku akan mengeluarkan satu lagi alternatif untuk korang memasang cute profile pada blog korang. Tutorial yang lepas juga amat sukar bagi mereka yang baru berjinak-jinak dalam customize blog.

Cara pemasangan kali ini agak mudah jika nak dibandingkan seperti yang lepas.

1. Muat-turun icon Cute Profile.

[CuteProfileV2]
Size : 64kb

2. Upload icon tersebut kedalam image hosting pilihan korang. Contoh : imageshack.us

3. Log masuk akaun blogger korang. Pergi ke Layout > Edit HTML

4. Cari </head> dan masukkan code dibawah sebelum </head>

<style type='text/css'>
a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}

a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }
</style>

5. Save template korang.

6. Pergi ke Layout dan klik pada Add a Gadget. Masukkan code dibawah.

<div style="display:scroll; position:fixed; top:80px; left:0px;">
<a class="linkopacity" href="URL_SITE" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="URL_ICON" /></a></br>
<a class="linkopacity" href="URL_SITE" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="URL_ICON" /></a></br>
<a class="linkopacity" href="URL_SITE" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="URL_ICON" /></a></br>
<a class="linkopacity" href="URL_SITE" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="URL_ICON" /></a></br>
<a class="linkopacity" href="URL_SITE" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="URL_ICON" /></a></br>
</div>

7. Edit dan save. Selamat mencuba. Kedudukan cute profile boleh diubah dengan menukar left ke right.


p/s: Code diatas juga korang boleh gunakan untuk membuat image seperti gambar dibawah. Hanya perlu buangkan code yang diwarnakan biru.

<div style="display:scroll; position:fixed; top:80px; left:0px;">
<a class="linkopacity" href="URL_SITE" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="URL_ICON" /></a>
</div>

Contoh :

Tanpa Code


Dengan code
Dekatkan mouse korang pada gambar