Scrollable Blogger Box

Create Button Scroll Box 4 Blogger

Build a scrollable Blogger box that doesn’t need a mouse to scroll.
Related Articles

How to Open a Rental Storage Unit Business
How to Number Inventory
How to Identify the Model of a Toshiba Laptop
How to Create a Simple Email Newsletter in InDesign
How to Bring an Offline Printer Online
How to Sue a Business in Small Claims Court

Competition is intense at Google’s free Blogger service where bloggers strive to publish the most creative blogs. With generic or custom gadgets, it’s possible to add a variety of colorful, informative and intriguing add-ons to a blog. If your business has a Blogger blog, you can add a new gadget to the side panel that displays a scroll box with buttons. Scroll boxes allow you display a large amount of information in a small amount of space. Once you build the box, people can click its buttons to scroll through the content.
Create Scroll Box
Step 1

Visit your Blogger blog and log in if prompted. Click the “More Options” drop-down box next to the blog you wish to update, and then click “Layout.” The Layout page opens.
Step 2

Click the “Add a Gadget” link in the page’s right corner to display the Add a Gadget window. Click “HTML/JavaScript.” Blogger opens the Configure HTML/JavaScript window.

Related Reading: How to Add Social Networking Buttons on Blogspot
Step 3

Type a name such as “Box Scroll” in the “Title” text box and paste the following code into the “Content” text box: #myBox1 { width: 150px; height: 70px; color: black; background-color: yellow; border-color: green; border-style: solid; margin-bottom: 4px; overflow: hidden; } This code controls the appearance of your scrolling box. The width and height values, which you can change, are in pixels. In this example, the box width is 150 pixels and the height is 70 pixels.
Step 4

Paste the code shown below after the code listed in the previous step: script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js”&gt; var position = 0; var increment = 20; function scrollBox(obj, direction) { if (direction == “up”) position -= increment; else position += increment; if (position < 0) position = 0; $('#myBox1').scrollTop(position); } This JavaScript code executes whenever you click one of the box’s up or down buttons. The second line of code defines an increment variable whose value is “20.” This value tells browsers to scroll your box 20 pixels up or 20 pixels down, depending on the button clicked.
Step 5

Add the final bit of code shown below after the code in the preceding step:

scroll line 1 scroll line 2 scroll line 3 scroll line 4 scroll line 5 scroll line 6

This code creates your scroll box and adds two buttons below it. The last two lines of code create the buttons. The value attributes determine the text displayed on the buttons. Those values are “Scroll /\” and “Scroll \/” in this example. You can change the names to “Up,” “Down” or anything you like. Note the first statement in the code example – it contains the word “div.” The third statement from the bottom contains the word “\div.” These two words define an HTML div box. Everything between those two tags will appear in the box. This box contains lines of text whose values range from “scroll line 1” to “scroll line 6.” The character after each text value serves as a line break character. If you want to create separate lines of text in your box, leave the characters in the box. If you take them out, no line breaks will exist.
Save and View
Step 1

Click the “Save” button to close the window and return to the Layout page. Your new gadget will appear on the right side of the page below the Add a Gadget link.
Step 2

Click “Save Arrangement” and then click “View Blog.” The scroll box will appear on the right side of your blog page; click the two buttons to scroll up and down through the contents.
Step 3

Click your browser’s “Back” button to return to the Layout page.” Click the “Edit” button next to the gadget you added. The Configure HTML/JavaScript pop-up window opens again and displays your code.
Step 4

Scroll to the bottom of the window and find the div box you added. Replace the contents with anything you like. For instance, you might add a short story to the box or even use it to display hyperlinks. You can learn how to create hyperlinks by studying an online HTML tutorial.
Step 5

Click “Save” when you are finished and then click “View Blog” to view the updated version of your scroll box.
Tips

You’ll probably need to experiment with different width and height values to get the look you desire on your Blogger page. If it’s too wide, decrease the width value, or make it taller by increasing its height.
You may also want to change the increment value to a number other than 20. The value you enter determines how far the box scrolls when you click a button. If you want the box to scroll smaller increments when a button is clicked, decrease the increment variable’s value.
Customize the box’s background color, foreground color and border color by changing those colors in the code’s style section. The color attribute determines the foreground color. That color is black in this example.
Update your box by returning to the Configure HTML/JavaScript pop-up window as described in this tutorial.

References (2)
Resources (1)
About the Author

After majoring in physics, Kevin Lee began writing professionally in 1989 when, as a software developer, he also created technical articles for the Johnson Space Center. Today this urban Texas cowboy continues to crank out high-quality software as well as non-technical articles covering a multitude of diverse topics ranging from gaming to current affairs.

by Kevin Lee, Demand Media
Build a scrollable Blogger box that doesn’t need a mouse to scroll.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s