|
|
|
|
|
Put a Facebook rollover side tab onto a website
I will show you how to put a side tab button on to a website using HTML and CSS styles.
|
|
 |
|
|
|
|
|
|
|
|
|
|
 |
1.
|
|
|
Open a html text editor.
You can use Adobe Dreamweaver, or a simple text editor like Wordpad, Notepad, Notepad++ in Windows or TextEdit in Mac OS X.
Click here if you want to learn how to design a rollover button using Photoshop, or click here for a direct download of the Facebook side tab image used in this tutorial.
|
|
| |
2.
|
|
|
Under <head> and <title> tag enter following:
<style>
#facebook_tab
{
display: block;
width: 38px;
height: 100px;
We created a document style starting with <style> tag. Then we defined an element named facebook_tab with an id #facebook_tab. The element's width is exactly half width of the image (38px) we will use as a button and the same height as the image (100px).
|
|
| |
3.
|
|
|
Continue with the #facebook_tab properties:
background: url("Dreevoo_com_facebook_tab.gif") no-repeat 0 0;
position: fixed;
left: 0px;
}
With the background property, we define the image we will be using as a rollover side tab, Dreevoo_com_facebook_tab.gif in this case. We will fix the position with position: fixed, meaning the button will stay sticked on the same place no matter if you scroll up or down the webpage. Left: 0px; means it will stick to the left side of a web browser.
|
|
| |
4.
|
|
|
Let's add the mouse rollover effect, so when user roll their mouse over the button, it will change into the button on the right side of the image (Dreevoo_com_facebook_tab.gif in this case).
#facebook_tab:hover
{
background-position: -38px 0;
}
We set the background-position property to -38px 0.
-38 px means the off set of the image width and it's exactly one half of the image width used in this tutorial, meaning the second half of the image will appear on a mouse rollover. The second number 0, means there will be no off-set in height.
|
|
| |
5.
|
|
|
Continue with the following code:
#facebook_tab span
{
display: none;
}
With this id you decided not to show the text you will define in body.
Don't forget to close the style of your element with </style> .
|
|
| |
6.
|
|
|
And now for the actual html image code that will make your Facebook side tab visible and clickable. Anywhere between <body></body> tags enter the following html code:
<a id="facebook_tab" href="http://www.facebook.com/Dreevoo" title="Dreevoo.com on Facebook"><span>Dreevoo.com on Facebook</span></a>
You just made the image appear on a website. With href="http//......" you chose on which page should the user land after clicking the tab.
|
|
| |
7.
|
|
|
This is how it looks like on a random (empty) webpage ...
|
|
| |
8.
|
|
|
... and this is how it looks like when you roll over a mouse.
You can click here to try it out for yourself or right click the link and choose Save Link As... to download the html file.
|
|
|
 |
|
 |
|
 |
|
|
| |
|
|
|
|
|
| I have been gone for some time, but now I remember why I used to love this web site. Thanks, I will try and check back more often. How often do you update your web site? 女士 脫髮 維他命 https://blog.dnahairlab.com/blog/產後.... |
|
|
|
|
|
|
|
|
|
| I have been looking around for an article like this. Took some time but finally found it… Really good read thanks. It’s been difficult to find the information I needed. I use this website for a good deal. 英文補習 https://learnsmart.edu.hk/spencer-lam-en.... |
|
|
|
|
|
|
|
|
|
| You make so many great points here that I read your article a couple of times. Your views are in accordance with my own for the most part. This is great content for your readers. pailin https://pailin.com/ |
|
|
|
|
|
|
|
|
|
| Hello my family member! I wish to say that this post is amazing, great written and come with approximately all vital infos. I would like to see extra posts like this . 補習配對平台 https://www.upskyler.com |
|
|
|
|
|
|
|
|
|
| This is the correct weblog for anybody who needs to find out about this topic. You understand so much its almost hard to argue with you (not that I really would want…HaHa). You definitely put a brand new spin on a topic thats been written about for years. Great stuff, simply nice! 搬屋 風水 https://www.mrlaifengshui.com/ |
|
|
|
|
|
|
|
|
|
| I am often to blogging and i really appreciate your content. The article has really peaks my interest. I am going to bookmark your site and keep checking for new information. UFABETเทคนิคแทงบอลให้ได้เงิน https://www.executivelimousines-carhire..... |
|
|
|
|
|
|
|
|
|
| After examine a couple of of the weblog posts on your web site now, and I really like your manner of blogging. I bookmarked it to my bookmark website record and will probably be checking back soon. Pls take a look at my web page as well and let me know what you think. 英文補習 https://learnsmart.edu.hk/spencer-lam-en.... |
|
|
|
|
|
|
|
|
boles9,
10th Dec 2023, 5:44 PM |
|
|
| My website's ranking skyrocketed thanks to 백링크업체's content marketing services. Highly satisfied!https://backlinkhigh.com |
|
|
|
|
