Fancy following icons
You’ll have to use custom HTML to do this. If you’re not familiar with it, I don’t recommend this, as you can accidentally mess something up.
Basically, you will have slightly transparent Following icons. When you move your mouse over them, they become full coloured. I find it pretty fancy. You can see an example on my Tumblr’s sidebar.
What you need to do:
Add this before the </head> tag in your theme:
<script language=”Javascript”>
function lightup(imageobject, opacity){
if (navigator.appName.indexOf(“Netscape”)!=-1&&parseInt(navigator.appVersion)>=5)
imageobject.style.MozOpacity=opacity/100
else if (navigator.appName.indexOf(“Microsoft”)!=-1&&parseInt(navigator.appVersion)>=4)
imageobject.filters.alpha.opacity=opacity
ImageObj.style.filters.alpha.opacity=50
ImageObj.style.MozOpacity=0.5
}
</script>
Find <img src=”{FollowedPortraitURL-30}” alt=”{FollowedName}”/> in your code and add this:
<img src=”{FollowedPortraitURL-30}” alt=”{FollowedName}” style=”filter:alpha(opacity=50); -moz-opacity:0.5; opacity:0.5;” onMouseover=”lightup(this, 100)” onMouseout=”lightup(this, 50)”/>
You can also put the opacity in your CSS. Just add the following:
<img src=”{FollowedPortraitURL-30}” alt=”{FollowedName}” class=”icons” onMouseover=”lightup(this, 100)” onMouseout=”lightup(this, 50)”/>
And add this in your CSS:
.icons {
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity:0.5;
}
Note: I used portrait size 30, so remember to
change it if you want smaller/bigger icons.
Voilà, you’re ready!
