HTML Codes For Different Beautiful Scroll Bars For Blogs/Websites

There are couple of occasions where you have to add HTML text areas with scroll bars to your blog or website. This can be achieved through couple text boxes with different designs. Below are the top 9 ways by which you could add elegant scroll bars/text areas to blogger or your website in general.

HTML Codes For Different Beautiful Scroll Bars

Before we move on, you may like to see the text areas that i posted earlier:


#1 Basic Html Scroll Box



<div style="height:120px;width:250px;font:16px/26px Georgia, Garamond, Serif;overflow:scroll;">

When your text will exceed the limit, it will automatically scroll down Just see the example below.

</div>



Hello
How are you ?
Are you Fine ?
What are you doing now-a-days ?
Which School u r studying
Oh thats great
Thats cool
I m cool.

You can change the font, height and width according to your wish


#2 Colored Scroll Box




<div style="height:90px;width:160px;overflow:scroll;background-color:#67F152;">We have added a background color to this HTML scroll box. This is done using the CSS 'background-color' property.</div>

Example:









We have added a background color to this HTML scroll box. This is done using the CSS 'background-color' property.

 

#3 Adding Different Borders To A Scroll Box

 


<div style="height:80px;width:180px;overflow:scroll;border:1px solid #0ADA0A;">You can add borders to HTML scroll boxes using the CSS 'border' property. Borders can be of any thickness, and any color. You can specify whether it's solid, dotted, dashed, and more. You can also specify a different border for each side of your scroll box.</div>


You can add borders to HTML scroll boxes using the CSS 'border' property. Borders can be of any thickness, and any color. You can specify whether it's solid, dotted, dashed, and more. You can also specify a different border for each side of your scroll box.



<div style="height:80px;width:180px;overflow:scroll;border:9px solid #0ADA0A;">You can add borders to HTML scroll boxes using the CSS 'border' property. Borders can be of any thickness, and any color. You can specify whether it's solid, dotted, dashed, and more. You can also specify a different border for each side of your scroll box.</div>


You can add borders to HTML scroll boxes using the CSS 'border' property. Borders can be of any thickness, and any color. You can specify whether it's solid, dotted, dashed, and more. You can also specify a different border for each side of your scroll box.



<div style="height:80px;width:180px;overflow:scroll;border:9px dotted #0ADA0A;">You can add borders to HTML scroll boxes using the CSS 'border' property. Borders can be of any thickness, and any color. You can specify whether it's solid, dotted, dashed, and more. You can also specify a different border for each side of your scroll box.</div>


You can add borders to HTML scroll boxes using the CSS 'border' property. Borders can be of any thickness, and any color. You can specify whether it's solid, dotted, dashed, and more. You can also specify a different border for each side of your scroll box.




<div style="height:80px;width:180px;overflow:scroll;border:9px dashed #0ADA0A;">You can add borders to HTML scroll boxes using the CSS 'border' property. Borders can be of any thickness, and any color. You can specify whether it's solid, dotted, dashed, and more. You can also specify a different border for each side of your scroll box.</div>


You can add borders to HTML scroll boxes using the CSS 'border' property. Borders can be of any thickness, and any color. You can specify whether it's solid, dotted, dashed, and more. You can also specify a different border for each side of your scroll box.




<div style="height:80px;width:180px;overflow:scroll;border:9px groove #0ADA0A;">You can add borders to HTML scroll boxes using the CSS 'border' property. Borders can be of any thickness, and any color. You can specify whether it's solid, dotted, dashed, and more. You can also specify a different border for each side of your scroll box.</div>


You can add borders to HTML scroll boxes using the CSS 'border' property. Borders can be of any thickness, and any color. You can specify whether it's solid, dotted, dashed, and more. You can also specify a different border for each side of your scroll box.



<div style="height:80px;width:180px;overflow:scroll;border:9px double #0ADA0A;">You can add borders to HTML scroll boxes using the CSS 'border' property. Borders can be of any thickness, and any color. You can specify whether it's solid, dotted, dashed, and more. You can also specify a different border for each side of your scroll box.</div>


You can add borders to HTML scroll boxes using the CSS 'border' property. Borders can be of any thickness, and any color. You can specify whether it's solid, dotted, dashed, and more. You can also specify a different border for each side of your scroll box.




#4 Picture Scroll Box : Adding A Picture Inside A Scroll Box





<div style="height:221px;width:330px;overflow:scroll;">
<img src="http://i516.photobucket.com/albums/u323/natural_pics/milford_sound.jpg" border="0" width="330" height="221" alt="Sample picture for scroll box: Milford Sound, New Zealand" /><br />
<img src="http://i516.photobucket.com/albums/u323/natural_pics/franz_josef_glacier2.jpg" border="0" width="330" height="221" alt="Sample picture for scroll box: Franz Josef Glacier, New Zealand" />
</div>


Sample picture for scroll box: Milford Sound, New Zealand

Sample picture for scroll box: Franz Josef Glacier, New Zealand




#5 Clickable Picture Scroll Box




<div style="height:221px;width:330px;overflow:scroll;">

<a href="http://www.natural-environment.com/places/milford_sound.php" target="_blank"><img src="http://i516.photobucket.com/albums/u323/natural_pics/milford_sound.jpg" border="0" width="330" height="221" alt="Sample picture for scroll box: Milford Sound, New Zealand" /></a><br />

<a href="http://www.natural-environment.com/places/franz_josef_glacier.php" target="_blank"><img src="http://i516.photobucket.com/albums/u323/natural_pics/franz_josef_glacier2.jpg" border="0" width="330" height="221" alt="Sample picture for scroll box: Franz Josef Glacier, New Zealand" /></a>

</div>


Sample picture for scroll box: Milford Sound, New Zealand

Sample picture for scroll box: Franz Josef Glacier, New Zealand



#6 Adding Text In A Pictured Scroll Box



<div style="height:220px;width:325px;overflow:scroll;font:35px/45px cursive;color:#A6120D;background:url('http://i516.photobucket.com/albums/u323/natural_pics/milford_sound.jpg');">Background pictures are ideal for when you want to place text over the top of your picture. When using a background picture, scrollbars will only appear if we have enough text in the scroll box.
</div>


Background pictures are ideal for when you want to place text over the top of your picture. When using a background picture, scrollbars will only appear if we have enough text in the scroll box.



#7 Horizontal Scroll Box




<div style="border:1px solid black;width:200px;height:100px;overflow-y:hidden;overflow-x:scroll;">

<p style="width:250%;">

By using overflow-x, we can create scroll bars when the contents of this div are wider than the container. By setting this paragraph to 250 percent, it is 250 percent wider than the parent container - forcing an overflow.

</p>

</div>



By using overflow-x, we can create scroll bars when the contents of this div are wider than the container. By setting this paragraph to 250 percent, it is 250 percent wider than the parent container - forcing an overflow.




#8 Vertical Scroll Box


<div style="border:1px solid black;width:200px;height:100px;overflow:scroll;overflow-y:scroll;overflow-x:hidden;">

<p style="height:250%;">
By using overflow-y, we can create scroll bars when the contents of this div are bigger/higher than the container. Also, by setting this paragraph to 250 percent, it is automatically 250 percent higher than the parent container - forcing an overflow.

</p>

</div>


By using overflow-y, we can create scroll bars when the contents of this div are bigger/higher than the container. Also, by setting this paragraph to 250 percent, it is automatically 250 percent higher than the parent container - forcing an overflow.




#9 Hide Scroll Box : Cool text Area For Bloggers


<textarea rows="10" cols="20" style="overflow:hidden;">

Enter as much text as you can... until you'd expect a vertical scrollbar to appear. Go on!

</textarea>



About the Author

My Name is Haider Afridi. I love Blogging but due to lack of knowledge in any particular Topic, i thought to start a Fan Club on a Celebrity whom i Love the most. The Salman Khan Fan Club. You can contact me on Facebook

COMMENTS

.
Name

AdSense affiliate marketing Announcement AskHassam Blogger Blogging Tips Blogosphere News Bluehost Building Traffic BuySellAds Contest Customizations Disqus Tutorials Domain Hosting Drop Down Menus eBook Email Marketing Facebook Tutorials Feedburner Freelancing Giveaway Google Google Analytics Google Gmail Google Plus Tricks Guest Post HowTo Interview Making Money Online Monetization Motivation PayPal Pinterest Plugins review SEO Slideshare Social Media Top Lists Twitter Wordpress YouTube
false
ltr
item
BloggingeHow | Making Blogging Simpler: HTML Codes For Different Beautiful Scroll Bars For Blogs/Websites
HTML Codes For Different Beautiful Scroll Bars For Blogs/Websites
http://1.bp.blogspot.com/-UqSowgCpkVw/T2CwO9QID5I/AAAAAAAAC8c/mXMiHQGKc_g/s1600/html+text+area+with+scroll+bars.jpg
http://1.bp.blogspot.com/-UqSowgCpkVw/T2CwO9QID5I/AAAAAAAAC8c/mXMiHQGKc_g/s72-c/html+text+area+with+scroll+bars.jpg
BloggingeHow | Making Blogging Simpler
http://www.bloggingehow.com/2012/03/html-codes-for-different-beautiful.html
http://www.bloggingehow.com/
http://www.bloggingehow.com/
http://www.bloggingehow.com/2012/03/html-codes-for-different-beautiful.html
true
5839591175544873606
UTF-8
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy
Resources

Tools of the Trade