How to create a contact form in HTML

This tutorial will teach you how to create a very simple contact form for HTML based website template.

First of all create 2 files: contact_form.html and contact.php. The first file will contain HTML code for the form and the second -will process the data from the form


HTML

Below is the HTML code of the contact form
   
<form action="contact.php" method="post">
    Your name
    <input type="text" name="cf_name">
    Your e-mail
    <input type="text" name="cf_email">
    Message
    <textarea name="cf_message">
    <input type="submit" value="Send">
    <input type="reset" value="Clear">
</form>

And this is how it will look in the browser

HTML contact form

Let’s have a quick look at some main aspects of it. The <form> tag should have 2 additional attributes:

action=”contact.php” – this attribute specifies where to send the data from the contact form fields, when it has been submitted

method=”post” – this attribute specifies how to send data from the form to the file specified in the action attribute

The <input> and <textarea> tags should have an attribute “name” with a unique identifier. This attribute is used to identify form data after it has been submitted to the server
And the 2 input elements that are used as Submit and Clear buttons, one should have type=”submit” assigned to it and the other type=”reset”

PHP

Now for the contact.php file that will actually grab the data from the fields, compose into a message and send to your email. Below is the code of the file with comments to its major sections.

Assigning the data sent from the contact form fields (cf_name, cf_email, cf_message) to php variables ($cf_message, $field_email, $field_message)
   
$field_name = $_POST['cf_name'];
$field_email = $_POST['cf_email'];
$field_message = $_POST['cf_message'];

$mail_to shall contain the site owner email, this is where the email is sent to. You can specify multiple emails by separating them with a comma (e.g. mail-one@template-help.com, mail-two@template-help.com)
   
$mail_to = 'test@test-mail.com';

Subject of the email you receive from the contact form

$subject = 'Message from a site visitor ' . $field_name;

Constructing the body of the message
   
$body_message = 'From: '.$field_name."\n";
$body_message .= 'E-mail: '.$field_email."\n";
$body_message .= 'Message: '.$field_message;

Constructing the headers of the message
   
$headers = "From: $cf_email\r\n";
$headers .= "Reply-To: $cf_email\r\n";

Defining mail() function and assigning it to a variable $mail_status, which is used below to check whether the mail has been sent or not
   
$mail_status = mail($mail_to, $subject, $body_message, $headers);

If the mail() function executed successfully then do the code below
   
if ($mail_status) { ?>
    <script language="javascript" type="text/javascript">
        // Print a message
        alert('Thank you for the message. We will contact you shortly.');
        // Redirect to some page of the site. You can also specify full URL, e.g. http://template-help.com
        window.location = 'contact_page.html';
    </script>
<?php
}

If the mail() function fails, then execute the following code
   
else { ?>
    <script language="javascript" type="text/javascript">
        // Print a message
        alert('Message failed. Please, send an email to gordon@template-help.com');
        // Redirect to some page of the site. You can also specify full URL, e.g. http://template-help.com
        window.location = 'contact_page.html';
    </script>
<?php
}?>

Read More

How to create vertical and horizontal menu - HTML/CSS

This tutorial will show you how to create a vertical and horizontal menus in HTML using CSS styles. Before you proceed please make sure you are familiar with unordered list HTML tags.  

Ok, first of all create an HTML menu using the unordered list:

<ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Partners</a></li> <li><a href="#">Contacts</a></li> </ul>

Then you need to create new CSS file and attach it to the HTML page:

<link href="style.css" rel="stylesheet" type="text/css" />

You can also use the inline styles.

<style type="text/css">     ...here goes your CSS styles... </style>

As a result you shou have the following HTMl code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>     <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <ul>     <li><a href="#">Home</a></li>     <li><a href="#">About</a></li>     <li><a href="#">Services</a></li>     <li><a href="#">Partners</a></li>     <li><a href="#">Contacts</a></li> </ul> </body> </html>

The unordered list has it’s own styles so without any additional changes you have a vertical menu.

As for the horizontal menu you need to perform some changes in HTML and CSS.

First of all add new class to the list, replace <ul> with <ul class="horizontal">

Now in the CSS file let’s make the menu horizontal. The unordered list has margin and padding values assigned by default. we need to clear them:

ul.horizontal{ margin:0; padding:0; }

Then make your list items display horizontally:

ul.horizontal li{ display:block; float:left; padding:0 10px; }

Read More

How to add Bread Crumb in blogger

Breadcrumbs or breadcrumb trail is a navigation aid used in user interfaces. It gives users a way to keep track of their location within programs or documents. The term comes from the trail of breadcrumbs left by Hansel and Gretel in the popular fairytale.

The trails like Home » Label » Post Name are the breadcrumbs.

Here is a screenshot of a Breadcrumb Trail


Now that you know what a breadcrumb is , let us get into the details of adding the same to your Blogger Blog.

1. Go to Template > Edit HTML and  check the check box which says Expand the Widget Templates.

2. Now in the Template, Find

<b:include data='top' name='status-message'/>

and immediately above that, paste this line of code

<b:include data='posts' name='breadcrumb'/>

3. Now find

<b:includable id='main' var='top'>

If you find two occurrences of this, then locate the second one(locate the only one otherwise) and immediately above that paste this code snippet 

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == "static_page"'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v="http://rdf.data-vocabulary.org/#">
<span typeof="v:Breadcrumb"><a expr:href='data:blog.homepageUrl' rel="v:url" property="v:title">Home</a></span>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'>
 » <span typeof="v:Breadcrumb"><a expr:href='data:label.url' rel="v:url" property="v:title"><data:label.name/></a></span>
</b:if>
</b:loop>
 » <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

This code will only display the last label of the post in the breadcrumb. If you want to display all the labels, then you will have to remove those 2 green lines of code.

4. Save the Template

5. If you want to make the breadcrumb smaller then go to Template Designer > Advanced > Add CSS and add the following Snippet there and Apply the changes

.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}

Now you should have a working breadcrumb navigation on your system. The original breadcrumb idea is based on Hoctro's Code from HOCTRO  breadcrumb hack. It has been modified to accommodate Search Pages, Label Pages and Archives.The post breadcrumb uses RDF breadcrumb Markup to assist you in displaying breadcrumbs in Google Search Results.

Read More

How To Create A Website very easily

Do you want to learn how to build a website for yourself?

Just follow these 4 to 5 simple steps to learn to create a website for yourself:

1- Register A Domain Name

2- Host Your Website

3- Change Name Servers At Domain Registrar

4- Use Pre-Installed Basekit Site Builder or Install WordPress CMS In Just A Few Clicks

5- Configure WordPress and Publish Your Website (Not required if you use Basekit Sitebuilder in Step 4)

Yes, it’s that easy. Just follow these 5 given steps, and you can learn to make a website in no time.

1- Register a Domain Name

A good domain name(www.yourname.com) is a must for any business, or even if you are creating a personal website.
If you have a registered a firm with a name say Stigma Solutions then register a domain name like stigmasolutions.com or stigmasolutions.net

If those names are not available then you can use some stop words like global, online, etc.. Therefore, you can register domain name like stigmasolutionsglobal.com or stigmasolutionsonline.com, etc. You can even add City or State names at the end like stigmasolutiontexas.com. There are a lot of ideas, and you just need to think over what suits your business. You can even register an unrelated name like mycoolwebsite.com

Check our Domain Name Selection guide for more information on how to select a good domain name.

To register a domain visit GoDaddy.com as its the best and most reliable domain registrar in the world, and you can easily register domain name under $12. We register all the domains for our clients through GoDaddy only as we know that our domain names are fully secured with them.

Here are a couple of Godaddy Screenshots showing How to Check Domain Name Availability & Start Domain Registration Process

Screenshot 1 – Check Domain Name Availability at Godaddy Homepage

Screenshot 2 – After you click on GO button as in Screenshot 1, you will get this screen on next page to complete your order

2- Host Your Website

After you have registered your domain name as in Step1, you need to host your website.

In order to publish your website on WWW(Word Wide Web) you need to purchase a web hosting account so that you can upload your website online. You can even create professional email ids like anthing@yourdomain.com through a web hosting account.

A Company that provides you web hosting service is known as Web Host or Web Hosting Company.

Do check our Web hosting tips page to learn more about web hosting.

HostGator.com is one such web hosting company, which is very reliable and offers hosting plans to all types of users. It’s very important to choose a reliable hosting company as if their hosting server goes down then your site will also become offline and your visitors would not be able to open your website which seems to be very embarrassing. So never go for cheap hosting companies as at first it sounds good but in a long run, you will only lose time and money with such cheap hosting companies.

Therefore, we highly recommend HostGator as its trusted by thousands of website owners, and they have a very strong server uptime record, and their support staff too is very friendly and fast.
However if you are looking for cheaper but reliable hosting option then you may also try hosting at TheWebBrains.com .

We even managed to get a 25% Discount Coupon Code for our readers.
Just use the coupon code “traffictools” during the checkout at Hostgator and you will get 25% discount on web hosting.

Images Showing How to Order Web Hosting at Hostgator

Screenshot 1 – Click on Web Hosting option at Hostgator Homepage and you will get the screen like above.
You can select from any of the plans given there.

Screenshot 2 – After you click on Order Now button as in Screenshot 1, you will get this screen on next page to complete your order.
Enter your domain name and click on Continue To Step 2 to make the payment and complete your purchase.

You can also use the Coupon Code “traffictools” during the checkout process at Hostgator to get 25% discount on web hosting.

Tip- Purchase hosting for 2 years and you can instantly save more than $35.

3- Change Name Severs At Domain Registrar

After you have purchased Web Hosting Account you need to modify Domain Name Servers at your domain registrar who in our case is GoDaddy.

Once you get Hosting Account Login Information email from Web Hosting Company, i.e. HostGator in our case than in that email you will also find the name server details like:

ns1.hostgator.com
ns2.hostgator.com

NameServers usually start with letters ns like ns1 or ns15 or ns3233, etc and should be two or more NameServers in number. If you are unable to find it then contact your web hosting company through phone or email, and they will inform you the name servers being allotted to your hosting account.

Once you have the Name Servers then login to your GoDaddy Domain control panel from www.GoDaddy.com

1- After you are logged in Go to an option on top menu named Domains–> Domain Management

You will get list of all domain names you have registered with Godaddy.

2 – Click on your Domain Name there.

3 - Then on next Page Click on Option Nameservers–> Set Nameservers

4 - There select the Last option i.e. “I have specific nameservers for my domains.”

Enter the 2 nameservers you got from your web hosting company e.g. Hostgator.

Click Ok.

5 - And on next page you will get a confirmation message like:

“Your changes have been submitted.
These changes usually take 2 hours. However, it may take up to 48 hours for these changes to take effect. These time frames are estimates and not guaranteed.”

In case if you are unable to change the Name Servers then just contact GoDaddy, and they will provide you instructions on how to do it.

However, after changing the NameServers, you still need to wait for 24-48 hours for Name Servers to propagate around the world and then only your site could be published online.

4- Use Pre-Installed BaseKit Site Builder that comes free with Hostgator Web Hosting account to Create your Website

If you have purchased web hosting from some other company or if you don’t want to use Hostgator’s BaseKit Site builder then install and use WordPress and its tutorial is given below.

Install WordPress CMS In Just A Few Clicks

WordPress is a CMS and also a Blogging Platform through which you can easily select design/theme for your website and then create pages for your website and publish it online very easily. In order to install WordPress you need to visit cPanel of your hosting account.

After 24- 48 hours since you have changed Name Servers at your Domain registrar as in Step 3, you would be able to open your cPanel hosting control panel through URL like www.domainname.com/cpanel
In above example replace your domainname.com with the actual domain name you have registered for yourself.

If Name Servers are propagated successfully then you would get a popup at above URL, which will ask for username and password for cPanel.

To get Username and Password check the Account Information Email sent by your web hosting company.

1 - Once you are able to login to Cpanel through www.yourdomain.com/cpanel go to option named Fantastico De Luxe and click on it.

2 - And on Fantastico page, you will find an option named WordPress under the option “Blogs”.

3 – Click on WordPress and then click on the link named New Installation that appears thereafter.

4 - And on Next page select your domain name on which you want to install the WordPress and enter some strong password, your email and other requested details there. You can change those details anytime later too from your WordPress Admin control panel once the installation is complete.
Click on “Install WordPress” button to get the final page.

5 - Finally click on Finish Installation Button and WordPress will be completely installed on your domain.

So now when you will open www.yourdomain.com then you will find a default WordPress blog page with a text like “Hello World!”, ‘Welcome to WordPress. This is your first post.”.

If you see that then it means you have done everything correctly and WordPress is successfully installed.

Sometimes you would be able to see default WordPress page on www.yourdomain.com after a delay of 15-30 minutes or even one hour or more as it depends on hosting company’s server configuration. However, in HostGator accounts, we usually find it immediately after installation.

You may also try to clear your browser cache and cookies if you are still unable to see default WordPress page on your domain.

5- Configure WordPress And Publish Your Website

After installing the WordPress you need to Configure WordPress, Select Design, input Content for your various Pages and Publish.

- To Configure WordPress you need to login to WordPress admin area from www.yourdomain.com/wp-admin
Replace yourdomain.com with the actual domain name on which you have installed WordPress.

There you can login and configure various settings for your website/blog using Settings option there.

- To Select a design go to option Appearance-> Themes -> Install Themes
In install themes option you can select options like Colours, Design width, Subject, etc. and click on FIND THEMES option to get some cool free themes.

Just select the desired theme and click on Install button and after its installed, just activate it.

If you don’t like the newly installed theme/design then install more themes using the same way.

You can manage(activate/deactivate/delete) all your themes from Appearance-> Themes -> Manage Themes option.

- To Publish: Once you have settled with your dream design then go to option Pages -> Add New

There you can give a Page Title/Heading name in First Box and Page Content in Second Large Box. You can change font, colours, etc. from the toolbar in that box. E.g. your first page can be named as Home that you want to display when someone opens www.yourdomain.com.

Once you are satisfied, you can click on Publish button on the right side to publish that page on your website.
In the same way, you can create other pages for your website like About us, Products and Services, Help, etc.

Once you have created your pages then go to option Settings -> Reading

Under option, Front page displays change the Radio button selection from Your latest posts TO A static page.
In the Front Page option select the Page Name, that you want to display as your homepage i.e. the first page that you want to display when someone opens your website at www.yourdomain.com

And click on Save changes button and Congratulations your site is online at www.yourdomain.com

You can do as many numbers of changes as you want to your website like changing designs(themes), adding, deleting, editing pages, etc.

Everything is under your control, and you can update your site as often you wish.

Remember WordPress is a very popular and vast platform that has thousand of designs, plugins and features so just keep on playing with it, and you will learn at least a new cool trick every single day.

This is a very simple tutorial. There are tons of other things you can do in wordpress admin area like changing theme/design of your site, posting to blog, installing extra plugins etc. If you face any difficulty then just post it here in the comments section and we will reply back to you with the solution.

So here comes the end of a basic tutorial on building a website.

There are a lot more tutorials on this website which you can read after you have published the website following the above 5 steps so just bookmark our website using CTRL+D on your keyboard and also share it with your friends on FaceBook, Twitter, Google Plus, etc.
Sharing won’t cost you anything but will motivate us a lot to keep helping you like always.

Read More

How to add Table of Contents in Microsoft Word Document

Create a table of contents

Hide All

You create a table of contents by choosing the heading styles — for example, Heading 1, Heading 2, and Heading 3 — that you want to include in the table of contents. Microsoft Office Word searches for headings that match the style that you chose, formats and indents the entry text according to the heading style, and then inserts the table of contents into the document.
Microsoft Office Word 2007 provides a gallery with multiple table of contents styles to choose from. Mark the table of contents entries, and then click the table of contents style that you want from the gallery of options. Office Word 2007 automatically creates the table of contents from the headings that you marked.

What do you want to do?

---

---

Mark entries for a table of contents

The easiest way to create a table of contents is to use the built-in heading styles (heading style: Formatting applied to a heading. Microsoft Word has nine different built-in styles: Heading 1 through Heading 9.). You can also create a table of contents that is based on the custom styles that you have applied. Or you can assign the table of contents levels to individual text entries.

Mark entries by using built-in heading styles

1. Select the heading to which you want to apply a heading style.
2. On the Home tab, in the Styles group, click the style that you want.
   
   
   For example, if you selected text that you want to style as a main heading, click the style called Heading 1 in the Quick Style gallery.

 Notes 

• If you don't see the style that you want, click the arrow to expand the Quick Style gallery.
• If the style that you want does not appear in the Quick Style gallery, press CTRL+SHIFT+S to open the Apply Styles task pane. Under Style Name, click the style that you want.

Mark individual text entries

If you want the table of contents to include text that is not formatted as a heading, you can use this procedure to mark individual text entries.

1. Select the text that you want to include in your table of contents.
2. On the References tab, in the Table of Contents group, click Add Text. 
3. Click the level that you want to label your selection, such as Level 1 for a main level display in the table of contents.
4. Repeat steps 1 through 3 until you have labeled all of the text that you want to appear in the table of contents.

Create a table of contents

After you mark the entries for your table of contents, you are ready to build it.

Create a table of contents from built-in heading styles

Use this procedure if you created a document by using heading styles.

1. Click where you want to insert the table of contents, usually at the beginning of a document.
2. On the References tab, in the Table of Contents group, click Table of Contents, and then click the table of contents style that you want.
    Note    For more options, click Insert Table of Contents to open the Table of Contents dialog box.

Create a table of contents from custom styles that you applied

Use this procedure if you already applied custom styles to your headings. You can choose the style settings that you want Word to use when it builds the table of contents.

1. Click where you want to insert the table of contents.
2. On the References tab, in the Table of Contents group, click Table of Contents, and then click Insert Table of Contents.
3. Click Options.
4. Under Available styles, find the style that you applied to the headings in your document.
5. Under TOC level, next to the style name, type a number from 1 to 9 to indicate the level that you want the heading style to represent.  Note     If you want to use only custom styles, delete the TOC level numbers for the built-in styles, such as Heading 1.
   
6. Repeat step 4 and step 5 for each heading style that you want to include in the table of contents.
7. Click OK.
8. Choose a table of contents to fit the document type:
   • Printed document  If you are creating a document that readers will read on a printed page, create a table of contents in which each entry lists both the heading and the page number where the heading appears. Readers can turn to the page that they want.
   • Online document  For a document that readers will read online in Word, you can format the entries in the table of contents as hyperlinks, so that readers can go to a heading by clicking its entry in the table of contents.
9. To use one of the available designs, click a design in the Formats box.
10. Select any other table of contents options that you want.

Update the table of contents

If you added or removed headings or other table of contents entries in your document, you can quickly update the table of contents.

1. On the References tab, in the Table of Contents group, click Update Table.
   
   
   
   
   
   
2. Click Update page numbers only or Update entire table.

Delete a table of contents

1. On the References tab, in the Table of Contents group, click Table of Contents.
   
2. Click Remove Table of Contents.

Read More

How To Create A Website Toolbar And Widgets To It

Over the past year, we’ve seen website toolbar’s become an increasingly popular way for site-owners to offer users a consistent set of powerful social features, regardless of what page they’re on – Share, Subscribe, Tweet, Talk – you name it and chances are there’s a toolbar out there that offers some variation of these features. Facebook were one of the first companies to introduce this toolbar concept and have been the source of inspiration for many others. 

Taking a leaf from their book, companies like Wibiya and Meebo have been at the forefront of a toolbar-for-the masses revolution, offering easily customizable widgets for almost anyone to install on their pages. Larger companies have also been hopping onto the toolbar-band too, with sites like CNET.com embracing this concept as a way to offer their visitors more ways to interact with their site.

In today’s post, I’m going to show you how to create your very own jQuery-powered website toolbar and then we’re going to pack it full of lots of useful widget features such as those found in the Wibiya-toolbar – I call it jQuery Fubar.


What Site-bars Are Out There At The Moment?

As I mentioned, we’ve all seen the widget-packed Wibiya Toolbar in action and they’ve recently moved from their invite-only model to being fully open to the public. Meebo (the popular web destination for online IM services) also started offering their own version of this toolbar and both of them offer something a little different (Meebo for example includes a pretty funky drag-and-share feature). Today, we’ve going to create our very own awesome website toolbar, but from a design perspective here’s how the Meebo and Wibiya bars look close-up.

Wibiya

 
Meebo




Now that we know what we’re aiming for, let’s see how easy it can be to put together something like this ourselves.




The First Step – Fixed Positioning with CSS


The first step in creating a website-toolbar is creating an empty div which can be correctly fixed-positioned at the bottom of any webpage. The HTML for this is:

<div id="content">&nbsp;</div>
 
<div id="floatingbar"><ul> <li><a href="#">Item name</a></li> <br /><li><a href="#">Item name</a></li> <br /><li><a href="#">Item name</a></li> <br /><li><a href="#">Item name</a></li> <br /></ul></div>

and the CSS for this can be found below.

  div#floatingbar
    {
    overflow: hidden;
    width: 100%;
    height: 0px;
    position: absolute;
    bottom: 0;
    left: 0;
    }
 
@media screen
  {
  body>div#floatingbar
    {
    position: fixed;
    }
  }

Whilst fixed-positioning isn’t very difficult to achieve using browsers like FireFox and Chrome, it’s been notoriously buggy to code for Internet Explorer 6. Thankfully TagSoup came up with this wonderful set of CSS/JS hackswhich claim to support fixed-positioning all the way back to IE5. If you’re creating a toolbar from scratch, I would definitely recommend reading their post as it’ll save you a lot of time later on. The IE Fix for this is:

JavaScript/HTML:

1 2 3 4

<link rel="stylesheet" type="text/css" href="css/fixed4ie.css" /> <script type="text/javascript">onload = function() { content.focus() } </script>

CSS:

body
  {
  height: 100%;
  overflow: hidden;
  font-size: 100%;
  }
div#content
  {
  width: 100%;
  height: 100%;
  overflow: auto;
  }

Once you’ve got your basic-toolbar in place…


The next thing you’re going to want to do is begin adding in some basic styling around it. Most website-toolbars are around the same dimension in height (although there is no official “standard”) so I’m going to set the height of my component as well as some very basic skinning and CSS to style my list items. The background design is made possible with a blue gradient PNG that has some light shadows added to it – similar to the kind of design Wibiya have gone for. Although CSS3 could be just as equally used to create this effect, remember that some people still use IE!

div#floatingbar
    {
    overflow: hidden;
    width: 100%;
    height: 38px;
    position: absolute;
    bottom: 0;
    left: 0;
    color: #000;
    font-family:Arial;
    font-weight:bold;
    background-image:url('../images/tui.png');
    }
 
#floatingbar ul {
list-style-type:none;
}
#floatingbar ul li
{
float:left; padding:14px;
color:#666; margin-top:-3px;
}
#floatingbar ul li a
{
text-decoration:none;
color:#fff; padding: 10px;
font-size:12px;  font-weight:normal;
font-family:Arial;
}
#floatingbar ul li a:hover { color:#000033;}

Now that this is done, I also want to add some basic animation to my toolbar so that when users first load up their page, the bar will slide up from the bottom. This is made possible using jQuery’s great animate() feature by keeping the initial height of the component at 0 and then tweening it up to it’s maximum height over a period of time. The code for this can be found below

CSS:

div#floatingbar
    {
    height: 0px;
    }

JavaScript:

<script type='text/javascript'>
  $(function() {
  $('#floatingbar').css({height: 0}).animate({ height: '38' }, 'slow');
  });
</script>

This will end up creating something a little like this

Next, populate the toolbar with some links and some more jQuery Magic


In the next step of development, we’re going to add some nice visual effects to the toolbar, with the assistance of two of my favorite jQuery plugins – the first will provide us with some lightweight tooltips for our toolbar items whilst the second is going to be used for displaying our content.

1. jQuery Tipsy Tooltips for Toolbar Elements – This is a plugin used for adding Facebook-Like Tooltip effects to your site or links (http://onehackoranother.com/projects/jquery/tipsy/)

Sample Usage:

<script type='text/javascript'>
  $(function() {
 
  $('.toolbarLink').tipsy({gravity: 's'});
 
  });
</script>

2. jQuery PrettyPhoto - This is a lightbox alternative that allows you to display any type of content, in particular, iFrame content from local or external websites (http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/)

Sample Usage:

<script type="text/javascript" charset="utf-8">
  $(document).ready(function(){
 $(".gallery a[rel^='prettyPhoto']").prettyPhoto({theme:'facebook'});
  });
</script>

Let’s start adding some social features to the toolbar





When I first looked at the Wibiya toolbar, the big features that appealed to me were how easy it made it for any user to interact with all of the social networks associated with a website. I could easily take a look at the site’s Twitter account or become a fan of their Facebook Fan page, I could even easily browse through all their pictures without having to leave the page I was on. That "ease" of access impressed me, so I developed my website toolbar with widgets in mind.

When there are so many different ways currently available to pull in your recent tweets or display your Flickr albums in an easily scrollable box, why not find an implementation you like and just customize it?. So, that’s what we’re going to do.

1. Google Buzz Plugin – Mike More’s excellent Google Buzz Widget grabs the feed of your latest Google Buzz posts and refreshes this list depending on a set of parameters you’ve configured (http://www.moretechtips.net/2010/02/google-buzz-widget-jquery-plugin.html)

2. Sea of Clouds jQuery Twitter Plugin – This wonderfully compact plugin makes pulling your Twitter feeds a piece of cake and also allows you to customize the output quite extensively (http://tweet.seaofclouds.com/)

3. Facebook Fan Page Widget - The Facebook Fan Page Widget is a widget provided free by Facebook to site owners wishing to share their fan streams or followers in a box on their website. To allow you to show to Fan Box widgets side by side as in the original Wibiya bar, one can either choose to proxy one of the content boxes or load each of the widgets in separate iFrames which are then loaded into the same window.

4. Coolris Express Viewer - CoolIris offer the public a free version of their commercial 3D-Wall Component for use on your own personal sites. They’ve got a fantastic widget generator online that lets you pull in feeds from all sorts of sources including Flickr, YouTube or your own RSS Feed. It then takes this information and renders it as a scrollable wall of thumbnails that’s easy to view.

5. AddToAny Subscription and Share Widgets – These excellent widgets allow you to configure everything down to the event handlers that execute them so you can choose whether they appear on click or on mouse over. All the usual share sites and social networks are included and these guys even offer an API to anyone wishing to do more with their code.

6. ConveyThis.com Translation Features – Google Translate has been a favorite service among many of my fellow coders for a while now, but I came across this great service that allows you to give your visitors the choice to pick what translation service they want to use to translate your page once they’ve selected a language. Because some services have stronger features in one area of language than others, your visitors will have all the options they could want available to them. ConveyThis? also has a great widget you can add easily to your site, so definitely check it out.


Widget Delivery


Widgets (or plugins such as a Twitter-Reader or Translation service) can be delivered to our visitors through the site-bar in two main methods. The first is on page-load and the second is dynamically on-demand. The second of these options is the most beneficial as it means that we only have to load up the plugin when a user requests it. This can be either done through Ajax-Calls or iFrames.

In my implementation I have opted for iFrames through the PrettyPhoto Light-Box plugin – I thought this was a good idea because it provides a nice sandboxed area where the widget can execute as required without the chance of it interfering with the other widgets on the page. Whilst this isn’t a problem for most modern browsers, sandboxing widgets into iFrames can help lower the bug rate for older browsers like IE6.

To host a widget inside a lightbox iFrame, all you need to do is write or paste the code for it, once configured, into a new html file, save it into a local file in your toolbar directory and call it via PrettyPhoto as follows:

1	<a rel="prettyPhoto[iframe]" href="widget.html" title="Here's the tooltip text " class="toolbarLink"> My Page</a>

You can then freely call any widget file, with it’s very own themes if desired the same way you would any other link used from a lightbox. prettyPhoto also includes some pagination by default so if you want to easily flick through all of the widgets available on your toolbar you can do so through the controls at the bottom of the lightbox.

Further Customization & Demos

It’s possible to further customize your toolbar by adding in icons next to each of your widget links and floating them accordingly. For the example in today’s post, I’ve used some fantastic 24×24 icons from iconfinder.net, and you can see the final version of this page here (or click below to expand the screenshot).



You can also take your imagination one step further and replace all of the text in your toolbar with some nice images – I personally spent a few minutes putting together some gradient text in PhotoShop and here’s what the final product looked like.



With a little more work you could easily add some nice toggle buttons to the side of the toolbar to allow visitors to open or close it and there are a lot more widgets out there that you could experiment adding to your version.

and that’s it!. If you found today’s tutorial helpful, let me know in the comments section below.

Download All Of Todays Examples

You can download all of today’s examples including both the CSS/Icons version of Fubar as well as the Graphics version from the link below. All widgets can be obtained or generated from the site’s referenced in the list earlier in the article, but I’m also including my own ones in the example pack so you can see how easy it is to get setup.

 

Bonus: Fixed-Position Website Toolbar Plugins

As a bonus to today’s post, I’m also sharing some of the best out-of-the-box alternative solutions and tutorials available for creating your own customized fixed-position Site Bar. We all know that Wibiya is great for a one-click solution, but if you need something a little different one of these will definitely be able to help if the tutorial above doesn’t give you what you’re after.

CSS3 Fixed-Position Toolbar for your site with Social Networking Icons



Learn how to create a fantastic fixed footer toolbar for your site – this version includes some usefully placed social networking and subscription icons, great eye-candy tooltip effects and a complete tutorial on how to create it from start to finish. CSS3 Effects compliment it further with some nice visual design touches. Recommended for those who aren’t looking for extensive changes in customization to the above design and currently have more of a functionality requirement.


Facebook Style Footer-Toolbar from Soh Tanaka



Soh Tanaka presents this excellent tutorial on how to create a Facebook Style Fixed Site Footer toolbar. This implementation is very close to how the real Facebook site-bar looks and feels and even includes a follow-up tutorial on how to create a pop-out Friends List Chat bar. Recommended for those looking for a fully-featured example of how to create a floating site toolbar for further customization.

Floating Footer Toolbar



This entry from Ben Nadel, the most barebones of my recommended tutorials for today, will show you how to build a very very simple implementation of a floating site toolbar. This doesn’t include any of the sample icons or buttons that Soh Tanaka’s version above does so if you want an example that you can literally just start adding your own content to, this would be the one to get.  Ben’s version has been tested with many browsers including IE6, so cross browser compatibility won’t be an issue!.

JixedBar – A Fixed-Position Toolbar plugin for jQuery



Here’s a recently updated plugin that takes a lot out of the effort out of creating a fixed-position toolbar for your site. All you need to do is create a <ul> /<li> structure for each split section and then have the plugin transform it into the toolbar for you. It’s a hassle-free way of adding this feature to your projects and at under 7KB, it’s definitely a recommended download.

Read More