This is the first tutorial of five which will focus on how to create some of the objects and elements you see being used all around this site. 
 
Floating Social Bar
One of the most important aspect to webdesign is SEO, however, the ability to get your site "out there" and to create visitor loyalty is not as simple as just getting your site indexed in top search engines. By taking advantage of social networking, such as Twitter, Facebook, Google and many more, you will find it much easier to promote your site or blog and generate a growing loyal visitor base. 

In this tutorial I will show you how to develop a simple floating social bar, which is a great way to incorporate social tools such as the Facebook like button and much more. 

STEP 1: The CSS

Start by filling out our CSS, this can either be saved in a .css file, pasted into your pre-existing .css file or pasted between <style></style> tags in your HTML. 
#floating-box-wrapper{
 width:800px;
 margin:0 auto 0 auto;
 height: auto;
 position: relative;
}
 
#floating-box-container{ 
 float:left;
 top:0;
 left:-80px;
 position:absolute;
 width:60px; 
}
 
#floating-box-container .fixed{ 
 position:fixed;
 top:0;
}
 
#floating-box{ 
 border:2px solid #ddd;
 border-right:0;
 background-color:white;
 padding:.8em 0 .8em .8em;
 margin-top:150px;
 z-index:1;
 -webkit-border-top-left-radius:6px;
 -webkit-border-bottom-left-radius:6px;
 -moz-border-radius-topleft:6px;
 -moz-border-radius-bottomleft:6px;
 border-top-left-radius:6px;
 border-bottom-left-radius:6px;
 width:60px; 
 }
 
#floating-box .hr {
 margin-left: -2px;
 height:1px;
 border-bottom:1px solid #cccccc;
 margin:.6em 0;
 width:55px;
}
 
#floating-box .fb_like { 
 margin-top:.5em;
 margin-bottom:.5em;
 margin-left: 2px;
 width: 60px;
 height: 60px;
}
 
#floating-box .buzz { 
 margin-left: -3px;
 margin-top:.5em;
 margin-bottom:.5em;
 width: 60px;
}
 
#floating-box .pluss { 
 margin-top:.5em;
 margin-bottom:.5em; 
 width: 60px;
 height:60px;
 margin-left:-2px;
}
You will need to play around with some of the margins to make the floating bar appear correctly on your site. We use the webkit and moz css functions for the rounded boarders, thus this displays the same in all browsers. The .hr class is used for our boarders between buttons.  

Get Facebook Like

STEP 2: The Buttons

We now need to get a hold of the social buttons we plan to use in the floating social bar. First head over to Facebook Developers for the Like button. For our floating social bar I suggest the following settings: Send Button: unchecked, Layout Style: box count, Width: 50px. Save the frame code into note pad.
 
Get Buzz Button
Now head over to Google Buzz for the Buzz button. Select Post to Google Buzz, for this tutorial we are using the following settings: Style: Button Only, Size: Small. The rest is up to you, now copy this code also into note pad.
 
Get Google +1
Now head over to Google +1 Your Site for the +1 button. Select the Tall (60px) as well as your language, and copy the code also to note pad.

STEP 3: The HTML Markup

Now we have our CSS in place and we have all our social button's codes we can start filling out our HTML, you will just need to copy each of your saved button codes into their respective div class, the order is really up to you. If you are using Yola I suggest pasting this in your HTML heading area.

   
<div id="floating-box-wrapper">
 <div id="floating-box-container">
 <div id="floating-box" class="fixed">
 <div class="fb_like">
 <!-- Facebook Like Code -->
 </div>
 <div class="hr"></div>
 <div class="buzz">
 <!-- Google Buzz Code -->
 </div>
 <div class="hr"></div>
 <div class="pluss">
 <!-- Google +1 Code -->
 </div>
 </div>
 </div>
</div>

That's that your very own floating social bar, all you need now are some visitors to like and share your site. It is also interesting to note that no matter what page of your site you are on the Facebook Like button will show the same figure as it is set to your domain name were as the other two buttons are set to post about the page that they are clicked on.