SEO Friendly Scrollbar Tutorial
A scrollbar can be a very useful tool in many web design situations. There are many websites that have areas with fixed height, and so without a scrollbar the amount of text or content that you can place in these areas is very limited. A perfect example is aurifyclothing.com - if you take a look you will be able to see the main cell area has a scrollbar in place, to allow us to add as much text and content as we want, without increasing the height.
Now in ‘the old days’ frames were considered a practical and useful way of splitting a screen and adding a scrollbar, however the use of such a thing was not always considered ‘SEO Friendly’. Today the ability to simply add a scrollbar to a div area could not be easier, and the best thing about this is it is completely search engine friendly, the bots will index all text within the div. Ok sweet, so how do we do it you ask, let me show you:
First simply add a div to your page:
<div>
Here is the text that you will see inside the scrollable div. Add any text or images, or any other content you can think of into this div, and it will appear inside you scrollable area. You can add as much as you want, as the more you add the more you will be able to scroll down to view all the content.
</div>
Now, simply add a style to the div, and insert a style call ‘overflow’, along with a height & width:
<div style=”overflow: auto; width: 150px; height: 150px;”>
Here is the text that you will see inside the scrollable div. Add any text or images, or any other content you can think of into this div, and it will appear inside you scrollable area. You can add as much as you want, as the more you add the more you will be able to scroll down to view all the content.
</div>
If you copy and paste this code you will see a scrollable area with the text inside. Of course you can edit this by adding as many color and styles as you want, to match the site.
RSS
January 6th, 2008 at 5:24 pm
Worked perfect first time! Neat way to add a scroll bar.