Do you like social network? Add social network icons on your website.
This post explains how to use my CSS file and some lines of HTML code (unordered list with list elements) to add social-icons on your site with a link to your profile. See my social network section on this site (right-sidebar):
Step 1: link to CSS file
Add this line of cont in the <head> tag of your page:
<link href="http://woork.bravehost.com/iconize.css" rel="stylesheet" type="text/css" />
It contains a link to the CSS file with all classes to design social button. Classes are defined in this way:
.digg{background:url(...) left 2px no-repeat;}
.delicious{background:url(...) left 2px no-repeat;}
.delicious{background:url(...) left 2px no-repeat;}
Actual classes are:
.digg / .delicious / .technorati / .feed / .flickr / .mybloglog / .facebook / .twitter / .stumbleupon
Step 2: Add social icons on your page
To add a social icon you have to insert this simple code in your page with some <li> elements contained into an <ul> list with class parameter set to "iconize". Modify all links URL (in bold) with a link to your profile for each social netowork
<ul class="iconize">
<li class="delicious">
<a href="http://del.icio.us">delicious</a></li>
<li class="digg">
<a href="http://digg.com">digg</a></li>
<li class="technorati">
<a href="http://technorati.com">technorati</a></li>
<li class="feed">
<a href="#">feed</a></li>
<li class="flickr">
<a href="http://flickr.com">flickr</a></li>
<li class="mybloglog">
<a href="http://mybloglog.com">mybloglog</a></li>
<li class="facebook">
<a href="http://facebook.com">facebook</a></li>
<li class="twitter">
<a href="http://twitter.com">twitter</a></li>
</ul><a href="http://del.icio.us">delicious</a></li>
<li class="digg">
<a href="http://digg.com">digg</a></li>
<li class="technorati">
<a href="http://technorati.com">technorati</a></li>
<li class="feed">
<a href="#">feed</a></li>
<li class="flickr">
<a href="http://flickr.com">flickr</a></li>
<li class="mybloglog">
<a href="http://mybloglog.com">mybloglog</a></li>
<li class="facebook">
<a href="http://facebook.com">facebook</a></li>
<li class="twitter">
<a href="http://twitter.com">twitter</a></li>
I'm going to add new icon in the next way. Send me some suggests for new icons and social networks.
No comments:
Post a Comment