SEO Friendly Scrollbar Tutorial » Onpoint Creations Web Blog

About Onpoint Creations - Sydney Website Design
 
Home Who We Are Our Services Our Client List Our Portfolio Our Webblog Contact Us Sitemap


Sydney Search Engine Optimisation

About Onpoint Creations Sydney Website Design   About Onpoint Creations Sydney Website Design
 

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.

7 Responses to “SEO Friendly Scrollbar Tutorial”

  1. tim Says:

    Worked perfect first time! Neat way to add a scroll bar.

  2. Kimberly Cummings Says:

    Thank you! Ta! Kind regards! Many thanks SO much!

  3. Search SEO Says:

    Major thankies for the blog.Really looking forward to read more. Want more.

  4. ??? ??????? Says:

    If this is true, than i’ll make more web sites for this theme.

  5. Ross Crumbly Says:

    Cheers for this fantastic. I am wondering if you were planning of writing similar posts to this one. .Keep up the exceptional articles!

  6. Tyrell Prayer Says:

    I ran into this page accidentally, surprisingly, this really is a terrific internet site. The website owner has done an excellent job writing/collecting articles to post, the info here is actually insightful. You just secured yourself a guarenteed reader.

  7. clé wifi Says:

    Wow, that’s it.

Leave a Reply

 
About Onpoint Creations Sydney Website Design   About Onpoint Creations Sydney Website Design