Vertical Social Networking Tabs

---

As I've mentioned before, Web 2.0 websites are perfect for syndicating content around the Internet without using your own website or blog. By creating social networking profiles for your business or website, you are telling the search engines that you are really important.

When it comes to social networking sites like Facebook, Twitter, and MySpace, you want to be sure to link back to your blog or website, but also link to your social networking profile from your blog or website. In order to do this, people use WordPress plugins or they manually display clickable icons within their content.

How would you feel about including the links back to your site as vertical widgets that can be attached to the side of your content?

Well, now you can. I whipped this up in only a half hour, so I'm sure it could be optimized, but here is some code to display the vertical social networking tabs on your website.

Put this code in your CSS file or HTML header:

<style>
/* Vertical Button Styles */
.verticalButton { 
	padding: 5px 10px 5px 10px;
	background-color: #0099FF;
	color: #FFFFFF;
	display:block; 
	border-width: 1px;
	border-style: solid;
	border-color: #666666;
	border-bottom-width:0px;	
	text-decoration: none;
	font-size: 18px;		
	-webkit-transform: rotate(-90deg); 
	-moz-transform: rotate(-90deg);		
	width: 80px;	
	text-align:center;
}
#button1 {
	position:absolute; left:22px; top:280px;
}
#button2 {
	position:absolute; left:22px; top:380px;
)
</style>

Put this code into your HTML header to account for IE:

<!--[if IE]>
<style>
	#button1 {
		filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);		
		left:52px; 
		top: 230px;
	}
	#button2 {
		filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);		
		left:52px; 
		top: 330px;
	}		
</style>
<![endif]-->

Put this code into the top of your content area:

<a href="http://www.myspace.com/nh_website_design" title="MySpace" target="_blank" 
class="verticalButton" id="button1">MySpace</a>

<a href="http://www.twitter.com/TasenSoftware" title="Tasen Software on Twitter" target="_blank"
class="verticalButton" id="button2">Twitter</a>

You might need to mess around with size and position, but that should give you some vertical social networking tabs. Oh, and don't forget to change the URLs, or you will end up link back to my MySpace and Twitter pages.