How to Create a Fixed Sidebar on Tumblr

by Kevin Lee

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.

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.

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

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.

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.

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.

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.

Tip

  • Be careful when you're working in the HTML editor, as accidentally changing existing code can have dramatic effects on the layout of your page. If you alter the code and you can't figure out how to undo your changes, you can always delete everything in the HTML editor and paste the backup code you copied into the editor to restore it to its original condition.

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.

More Articles

Photo Credits