Tag Archives: links

Place Image Links on Tumblr Sidebar


This tumblr tip will show you how to place an Image Link on your Tumblr Sidebar.  To do this we need to edit your theme html, just addind some code.

How To Place Image Links on your Tumblr Sidebar.

  1. First, make sure to have the images that you want to use as links are uploaded here and grab the url they give your for each picture, this way you make sure they won’t get deleted as they are part of your layout, these must be the right size to fit your tumblr sidebar, otherwise they will “break” the layout.  Also try to create the page you want to link to first.
  2. Go to Customize >>> Theme >>> Custom HTML
  3. Now, we must find the exact place where you want your image link to be placed.  Use control+F in your tumblr theme html to find something you can see on your sidebar and that you want the link to be placed below or above.  Usually there’s a search for, so look for “search”.  The whole sidebar section is usually called that same way or maybe something shorter, like “side”. In our example, we are going to place the image link right below our Tumblr Tumbleroll.
  4. Tumblr Image Link

  5. Let’s prepare the code you’ll insert in your layout html; Insert your page URL where it says PAGEURL.  Insert your image url where it says IMAGEURL. Do not delete the quotation marks, if you do your image links won’t show up.  For each image link you want to add, repeat the line of code starting with <a href…… , always within the <div></div> tags


  6. <div>
    <a href=”PAGEURL”><img src=”IMAGEURL”/></a>
    </div>

  7. Copy and paste your code into the sidebar section you initially chose.  Again, you must not insert the code within specific <section></section> or <div></div> tags.
  8. If you want to improve the looks of the way the image links are spaced you will have to edit the .css file

How To Insert Links in your Tumblr sidebar


I know, you installed the theme thinking that inserting a link in your Tumblr sidebar was just yet another option in the customize panel. Though I do believe that they are going to introduce that feature really soon, it’s not available yet. Don’t mistake a random link insertion with the creation of a page, and that page showing up in your sidebar, other blogging platforms like blogspot and wordpress, both non hosted have that option.

How to insert links in your Tumblr sidebar (something like creating your own Blogroll).


  1. Copy paste your theme html in a notepad just in case you make a big mistake and want to get things undone.
  2. First of all, let’s prepare the line of code for your links; Replace xxx with your link url, and repeat this line of code for every link you want to insert/add to your own blogroll.  Also, write the link name where it says so.
  3. <a href=”xxx“>Write a Name For The Link</a>

  4. Themes are not totally identical in their html structure, but since you need to add a link to the sidebar, that’s what we are going to do next, search for the sidebar.  With control+F  in your Theme Custom HTML screen look for the following word; sidebar.  You will see that the word is always surrounded by a <div> tag or a <section>tag, and could be named sidebar1, sidebarleft, etc. In this example the sidebar is located in <div id=”sidebar1″>. We want to add the links before this sidebar is closed, meaning before the </div> (be careful, they might be more divs within the very sidebar).


  5. Tumblr links sidebar

  6. In this case, paste the line of code we prepared right after:.


  7. <a href=”{RSS}”><div id=”rss”></div></a>

  8. Save your theme and preview.

NOTE: You can go even further and make these links in particular to look different, even giving them icons to the left of each one, Make them show up in a different position, but all that requires more html and css knowledge, we need some extra tutorials for that