Monday, October 18, 2010

Tutorial Cute Profile (Icon Web)

Greeting once again . Baru aku ingat hari tuu ada orang request mcm mana nak buat cute profile (icon web) . Nak tahu macam mana ? Tengok nie ~


Hah , tuu la icon web . Let's start !
  • Oke , mula-mula korang download icon² dekat sini . http://www.box.net/shared/j2j6pz97ml
  • Lepastu korang upload icon tadi dekat photobucket atau mana² web lain .
  • Korang pon boleh cari icon² dekat photobucket . Yang tuu pandai-pandai laa cari ekk ;]
  • Pergi Dashboard > Design > Edit HTML > tick Expand Widget Templates .
  • Tekan ctrl + f , lepastu cari kod
</head>

  • Copy code kat bawah nie lepastu paste SEBELUM code </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>

  • Tekan save tempale .
  • Pergi Layout > Add Gadget > HTML / JavaScript . Lepastu copy code kat bawah and paste kan .
<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>

  • Edit "URL_SITE" , "URL_ICON" and save . Korang pon boleh tukar kedudukan cute profile dengan menukar right ke left . =]


Selamat Mencuba ! 

2 comments:

Nadia said...

sys , kenapa dye jadi melintang ye ? tak jadi menegak pon T.T

Azmiera said...

@Nadia ade code tesilap kot . sy buat oke je . cuba tgk balik oke :))