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 Add Linked Images To your Tumblr. Method 1

  1. Go To Customize Appereance >> Description Box
  2. Paste the code shown below. Replace PAGEURL with the url you want the image to point to. Replace IMAGEURL with the image direct url path that you want to be linked.

  3. <div>
    <a href="PAGEURL"><img src="IMAGEURL"/></a>
    </div>


  4. Update Preview >> Save >> Close

How To Place Image Links on your Tumblr Sidebar. Method 2 (If you want to add it somewhere else)

  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

6 Responses to "Place Image Links on Tumblr Sidebar"

Add Comment
  1. Ashley

    June 12, 2012 at 6:37 am

    Hello. I like this post because it seems like it’s answering the question, but I personally do not understand. Can you please send me an e-mail and I can send you my Tumblr code there so that you can help me.

    Thanks!

    [Reply]

  2. Ori

    June 23, 2012 at 8:17 am

    Does this work in new pages as well?

    [Reply]

  3. Karen

    July 20, 2012 at 5:49 am

    how do you make it link to a page outside of your tumblr?
    thanks

    [Reply]

  4. logine

    November 6, 2012 at 12:55 am

    what does pageurl and imageurl mean for the first method?
    i just want to put my picture

    [Reply]

  5. Ed Dulwich

    December 13, 2012 at 7:18 pm

    How would I link images to other sites? If that’s possible…

    [Reply]

  6. ???

    May 24, 2013 at 8:45 am

    where in the html should I paste it?? wherever I paste it, it only puts it in the middle of the page, not the side

    [Reply]

Submit a comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>