Adding Another Tumblr Sidebar

By Chad Davis

Customize your blog's appearance settings using the Tumblr Customize page.
i James Woodson/Photodisc/Getty Images

Edit your Tumblr blog's theme to add an additional sidebar to your blog. While many themes provide you with two or more sidebars, you may want to add a sidebar to your existing theme. Using Tumblr's Customize page, you can edit the CSS code for your theme and make changes to its appearance. Copy your theme's original sidebar code, rename and then adjust its CSS characteristics to create a second sidebar.

Log in to the Tumblr website.

Click the "Customize" button in the right sidebar.

Click the "Edit HTML" link on the left sidebar to open Tumblr's HTML editor.

Scroll down and highlight your sidebar's CSS code which will vary depending on your blog's theme. For example, locate "#side{" and then highlight the code up to the closing bracket. Your blog's theme may name this something else, such as #sidebar, #lefts or #leftbar.

Press "Ctrl-C" to copy your sidebar's CSS code to your clipboard.

Move your cursor to the end of your sidebar code and then press "Ctrl-V" to paste a copy of it directly below.

Rename your pasted sidebar. For example, change "#side{" to "#side2{" (omitting quotes here and throughout).

Change the characteristics of your second sidebar's CSS code so that it does not overlap your first sidebar. For example, if your first sidebar's code includes "left: 1050px;" then you will want to decrease or increase that value so that the sidebars are positioned side by side. Entering "850px;" would place your second sidebar to the right of your first one. You can also change the width and height of your sidebar to avoid overlap.

Paste the following code into a new line of text before your closing </body> tag, replacing "Your 2nd Sidebar Name" with the name of your sidebar, such as "side2":

<div id="Your 2nd Sidebar Name"> </div>

Enter any text and HTML code you wish to add to your second sidebar before the </div> tag. For example, enter "<big>Here is my second sidebar</big>" to add a large title to your second sidebar.

Click the "Update Preview" button at the top of the left sidebar to preview your changes to your theme.

Click the "Save" button to save changes.

Tips

Preview your blog before saving your changes to make sure it displays correctly.

You can recover old themes using the Tumblr Recover Custom Theme page (link in Resources).

Warnings

Use caution when changing your theme's HTML code. Altered code may cause elements to display incorrectly.

×