How To Insert A Scroll Box In Your Blog?

THIS IS A VERY GOOD WAY TO ADD A SCROLL BOX IN YOUR BLOGGER . I HIGHLY RECOMMEND THIS TIP TO ALL OF YOU.

---------------------------------------------------------------------------------
Sometimes you may have a lot of text or boring script to post on your Blogger blog, and you don't want it to make your blog a mile long to display it.

So the best thing that you can do is put all the boring stuff that people don't want to read, but just copy and paste, into a scroll bar. By using this method you can keep your posts looking neat and tidy and keep them a reasonable length.

This is a very easy tutorial because there is only five lines of code to use.

Log into Blogger > Dashboard > Posting > New Post and start writing your blog, when you get to the section where you need to add the scroll bar select the Edit HTML tab.

Then on the Edit HTML page all you need to do is copy the code below and add it to your posts.


<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="height: 300px; overflow: auto; padding: 10px; width: 260px;">

<ul>Your Text Here</ul>

</div>
</div>

--------------------------------------------------------------------

int patternCount=18; int ledCount=6; int ledOut[] = {11,10,9,6,5,3}; int brightness[6]={0,3,7,15,63,255}; int pattern[18][6]={ 0, 0, 0, 0, 0, 5, 0, 0, 0, 0, 5, 4, 0, 0, 0, 5, 4, 3, 0, 0, 5, 4, 3, 2, 0, 5, 4, 3, 2, 1, 5, 4, 3, 2, 1, 0, 5, 3, 2, 1, 0, 0, 5, 2, 1, 0, 0, 0, 5, 1, 0, 0, 0, 0, 5, 0, 0, 0, 0, 0, 4, 5, 0, 0, 0, 0, 3, 4, 5, 0, 0, 0, 2, 3, 4, 5, 0, 0, 1, 2, 3, 4, 5, 0, 0, 1, 2, 3, 4, 5, 0, 0, 1, 2, 3, 5, 0, 0, 0, 1, 2, 5, 0, 0, 0, 0, 1, 5} ; int patternSeq=-1; void setup() { } void loop() { int i; patternSeq++; if(patternSeq>=patternCount) { patternSeq=0; }

----------------------------


NOW WE SHOW YOU ANOTHER SIMPLEST WAY.

Changes you may want to apply	CSS codes to add are highlighted in orange. The px value, color, etc. that is bold-faced below can be changed as desired. For color, use either the name or hex value. (Know more about CSS color names/hex fromW3Schools)
Add a coloured border around the scroll box	border: 1px solid darkblue;
Add background colour	background-color: pink;
Text colour	color: maroon;
Font family	font-family: arial;
Font size	font-size: 12px;
Text align	text-align: center;
Add space around the text/content inside the border	padding: 4px;
To position the entire scroll box	position: relative; left: 50px; (Relative positioning moves it relative to its original left position. The higher the value, the further away from the left the box will move)

Here's an example to show how the HTML was configured to create a modified scroll box, using the codes in orange below : <div style="background-color: #efd9f8; border: 2px solid darkmagenta; color: mediumblue; font-family: 'lucida handwriting', cursive; font-size: 12px; text-align: center; height: 100px; overflow: auto; padding: 4px; width: 350px; position: relative; left: 60px;">TEXT HERE</div>

and ta da...the result!