How to Add a Scrollbar Section to My WordPress Blog
In HTML, different sections of a website are contained in dividers, identified by <div> tags. By default, a set of dividers will resize to fit whatever content is inside it. It is possible to give a divider a fixed size. In this case, the content within the divider will be too big to fit inside of it. This gives you two options for a WordPress blog; you can either opt to hide the content outside of the dividers' area, or you can give the divider a scroll bar, which your visitors can use to view the additional content.
Other People Are Reading
Instructions
-
-
1
Log in to your WordPress administrator's control panel. From the large menu on the left side of the screen, click "Appearance," then click "Editor." This area allows you to view and edit the HTML files that make up your WordPress blog's theme.
-
2
Click the link for the Stylesheet. This is near the bottom of the list of files on the right, under the "Stylesheets" heading. WordPress keeps the style of all your site's elements in this file. When you click the file, it will appear in the middle of the screen.
-
-
3
Start a new line in the file, then paste in the following code:
#scrollbarsection {
width: 400px;
height: 400px;
overflow:scroll;
}
This code tells WordPress that there is a new divider called "scrollbarsection," which has a height and width of 400 pixels. If any content inside the divider overflows from this 400 x 400 area, a scroll bar should be added to allow the visitor to access that content. Change the height and width to whatever size suits your needs.
-
4
Click "Posts," and either click the title of the post to add a scroll bar to it, or click "Add New" to create a new post. Click the "HTML" tab at the top of the editing area. This allows you to type code into the editor.
-
5
Place the cursor at the point in the post that you want the scroll bar to appear, then paste the following code:
<div id="scrollbarsection">
</div>
-
6
Insert the content inside the two <div> tags. You can either type text as normal, or click the "Add Media" button at the top of the editing pane to add images. When you have entered your content, click "Publish" in the top-right of the screen.
-
1
References
- Photo Credit Comstock/Comstock/Getty Images
