ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel
  • »
  • Technology»
  • Internet & the Web

How to Customize Your Tumblr Blog's Sidebar

Updated on July 16, 2013

Add social badges, images and other content to your blog's sidebar using custom HTML code. Tumblr enables you to customize your blog's theme using the "sidebar" div in your theme's HTML code.

Click "Edit HTML" to open the HTML code editor for your Tumblr blog.
Click "Edit HTML" to open the HTML code editor for your Tumblr blog.
Press "Ctrl-F" on your keyboard and type "sidebar".
Press "Ctrl-F" on your keyboard and type "sidebar".


  1. Open a Web browser on your computer and navigate to the Tumblr homepage (link in Resources). Enter the Tumblr information associated with your account into the "Email" and "Password" fields, then click "Log In."
  2. Click on the blog you want to edit from your Tumblr Dashboard's sidebar, then click the "Customize" button. Click the "Edit HTML" button in the Custom Theme sidebar.
  3. Press "CTRL-F" on your keyboard to open the Find feature. Type "sidebar", then press "Enter." Scroll through the matching keywords until you find a term that closely matches the search.
  4. Add custom HTML code or text into an area directly after the sidebar section. For example, . This div tag indicates the start of the sidebar section. Your new code or text will appear in your blog's sidebar once you have saved changes.
  5. Delete any sections of code that you do not wish to appear on your blog. For example, you can remove developer credits, logos or third-party advertisements from your Tumblr blog's sidebar.
  6. Click the "Update Preview" button. You can preview the edits to your blog's sidebar before saving changes.
  7. Click "Save" to save the changes you have made to the sidebar.

Sample Code

<h1>Welcome to my Tumblr blog</h1>
<p>Please enjoy my collection of images, videos and quotes from historical figures in the 1900s</p>


Recover your custom themes using Tumblr's Recover Custom Theme tool via your Tumblr account dashboard (see link in References). Previously used themes are available for you to restore.


Use caution when editing the HTML code for your Tumblr blog's theme. Changes you make could significantly affect the layout and functionality of your theme.

How To Add Link To Tumblr Sidebar

Tumblr Interface

What do you want to include in your Tumblr Sidebar?

See results


    0 of 8192 characters used
    Post Comment

    No comments yet.