Blogger Manual: SCROLLABLE TEXT AREA

Friday, June 26, 2009

This time, in this blogger manual I want to write about making a scrollable text area. You can see at my sidebar, there is a customization menu widget right there, and it’s using scrollable text area function. This kind of text area can help you to save place. Different with the marque function which is uncontrollable, this scrollable text area can be fully controlled by its user.
Ok, so what do we need to make this scrollable text area? Ow, simple enough, you only need to put this code in the HTML/JAVASCRIPT Editor gadget.

<div style=”overflow:auto;width:250px;height:300px;padding:10px;border:1px solid #eee”>
YOUR TEXT HERE
</div>

For example Try to write this in to your HTML/JAVASCRIPT editor…

<div style=”overflow:auto;width:250px;height:300px;padding:10px;border:1px solid #eee”>
My name is Fritz, and I’m the webmaster of blogger manual… Are you seeing this text?
</div>

And the result will be seen like this…

My name is Fritz, and I’m the webmaster of blogger manual… Are you seeing this text?My name is Fritz, and I’m the webmaster of blogger manual… Are you seeing this text?My name is Fritz, and I’m the webmaster of blogger manual… Are you seeing this text?My name is Fritz, and I’m the webmaster of blogger manual… Are you seeing this text?My name is Fritz, and I’m the webmaster of blogger manual… Are you seeing this text?My name is Fritz, and I’m the webmaster of blogger manual… Are you seeing this text?My name is Fritz, and I’m the webmaster of blogger manual… Are you seeing this text?My name is Fritz, and I’m the webmaster of blogger manual… Are you seeing this text?My name is Fritz, and I’m the webmaster of blogger manual… Are you seeing this text?

You can customizing the size of this text area by changing the value of WIDTH and HEIGHT parameter. You don’t need to worry about your text will be overflow in the text area, because we already use OVERFLOW command and its value is set to AUTO. So when the number of characters that you type is over the size of your text area, a scrolling function will appear.

If you use this function for your menu (like this blogger manual does) than you should enter some links into this text area… and how you gonna do this? Use this code below

<div style=”overflow:auto;width:250px;height:300px;padding:10px;border:1px solid #eee”>
<ul>
<li><a href=”URL address” target=”_blank”>ANCHOR TEXT</a></li>
<li><a href=”URL address 2” target=”_blank”>ANCHOR TEXT 2</a></li>
</ul>
</div>

For Example,

<div style=”overflow:auto;width:250px;height:300px;padding:10px;border:1px solid #eee”>
<ul>
<li><a href=”http://tutorial-for.blogspot.com” target=”_blank”>Blogger Manual</a></li>
<li><a href=”http://google.com” target=”_blank”>Google Search</a></li>
<li><a href=”http://tutorial-for.blogspot.com” target=”_blank”>Blogger Manual</a></li>
<li><a href=”http://google.com” target=”_blank”>Google Search</a></li>
<li><a href=”http://tutorial-for.blogspot.com” target=”_blank”>Blogger Manual</a></li>
<li><a href=”http://google.com” target=”_blank”>Google Search</a></li>
<li><a href=”http://tutorial-for.blogspot.com” target=”_blank”>Blogger Manual</a></li>
<li><a href=”http://google.com” target=”_blank”>Google Search</a></li>
<li><a href=”http://tutorial-for.blogspot.com” target=”_blank”>Blogger Manual</a></li>
<li><a href=”http://google.com” target=”_blank”>Google Search</a></li>
</ul>
</div>

And the result will be seen like this

Blogger Manual Blogger Manual Blogger Manual

Google Search

Blogger Manual

Google Search

Blogger Manual

Google Search

Blogger Manual

Google Search

Blogger Manual

Google Search

Well, I use target=”_blank” command to make your new site open in a new window or a new tab. It’s simply can help you to increase the bounce rate of your blog. What is the bounce rate? The bounce rate is the number of visitor that visit your page for several times. It’s one of simple SEO trick… Well, I think … it’s the time to clse this blogger manual. See you in my next posting….