If you’ve ever scrolled down a Web page and an item on it did not move, you've witnessed the CSS position tag in action. Tumblr bloggers who add this tag to their templates can create the same effect in their blogs. A good place to try this out is on your sidebar. After you add a position tag to your blog's HTML code, your sidebar remains fixed when people scroll up and down your blog pages.

Step 1

Visit your Tumblr dashboard, then click the settings icon and the name of the blog you'd like to update. If you only have one blog, click its name.

Step 2

Click "Customize" followed by "Added HTML." Tumblr opens your theme and displays its HTML code.

Step 3

Click anywhere inside the code and press "Ctrl-A" followed by "Ctrl-C" to copy the code to the Windows clipboard. Open a new Notepad document and paste the code into the document. These steps ensure that you have a backup copy of your original template.

Step 4

Return to the Tumblr HTML code and press "Ctrl-F" to open a search box. Type "sidebar" in that search box, then press “Enter.” Tumblr finds the first occurrence of "sidebar" and displays the section of code that contains that word. The code it finds should look similar to the following:

#wrapper #sidebar { color: {color:Background}; }

The first line of code contains the words #wrapper #sidebar. A left bracket follows those words.

Step 5

Paste the following code immediately below the first line of code:

position: fixed; right: 100px;

The position attribute instructs browsers to fix the sidebar so that it does not move when you scroll. The right attribute tells browsers how many pixels you’d like the sidebar's right edge to sit from the Web page's right margin. In this example, the right attribute has a value of 100px.

Step 6

Click "Update Preview" to view a preview of your changes. Drag the window's scrollbar up and down and you’ll see that your sidebar does not move. Click "Save" to save your changes.