How To Make a Banner for Tumblr


Making a banner for Tumblr is actually easy. However, people usually have a hard time trying to add the banner on Tumblr, since they just don’t know where to put the code.

This guide is divided into two parts, the first one tells you the best sites to create the banner. The second part is the actual tutorial that tells you how to put that banner on your site.



How To Make a Banner for Tumblr. Tumblr Banner Generator Codes.

Here is a list with the best websites to create banner for your tumblr. Animated Tumblr Banners, Glitter Tumblr banners and flashing tumblr banners. All these sites allow you create a tumblr banner for free.


Glitter and Flashing Banner Makers.

  1. Pimp My Profile: This glitter banner generator for tumblr is good since the background is plain white, good for minimalist tumblrs.
  2. My Banner Maker: A good banner creator for those looking for regular banners, not glittery at all. it lets you choose not only font size, but also the background, and banner size.
  3. Flash Vortex: This is definitely the best flash banner generator for tumblr. All options are included for free: Text, Fonts, Effect, background and animation properties.


Animated GIF Banner Makers.

Creating a GIF, as most tumblr users conceive it, it’s not that easy. We are talking about micro clips of series, movies, etc that usually get subtitled. If you are actually trying to do this, we suggest you read the following article from Wired, all tools and different types of animations are explained so you can come up with custom animated gifs. Once you finally get the image uploaded to a hosting site, you just have to grab the url to add it as a banner on tumblr.


How To Put a Banner on Tumblr. Quick Tutorial.

  1. Grab your tumblr banner code that you obtained from the sites above.
  2. Now, this is very important, you must get rid of all the extra code that surrounds the banner image, since you just need the image url, which usually ends in a .jpg, .gif or png extension.
  3. Go to Customized >> Edit HTML and with ctlr+f, look for the opening body tag, which usually looks like this <body>. Sometimes these tags have ids and classes added, but most of the time you can find them by looking for <body alone
  4. Now, copy the following code and paste right after the body tag:

  5. <a href="TUMBLRURL"><img src="TUMBLRBANNER" style="position:fixed; top:0px; left:0px; opacity:1; z-index:100;" /></a>


  6. Change TUMBLRBANNER and replace it with your tumblr banner image url you have.
  7. Change TUMBLRURL with the url of your tumblr blog (you can of course get rid of the url by deleting the opening and ending a tags)
  8. Now, start positioning your tumblr banner by modifying the top & left parameters until it fits right where you want it to be.
  9. Save and Close.

If you are having trouble trying to put a banner on tumblr, just leave a comment we’ll try to reply with a solution.

4 Responses to "How To Make a Banner for Tumblr"

Add Comment
  1. Nikele

    November 29, 2012 at 3:30 pm

    Hello! How are you today? I hope you are happy and well. Thank you for all of your work helping people make tumblr more beautiful and customizable, which in turn adds so much happiness to their lives. I have a gif that I would like to enlarge horizontally, and use for a banner. It’s the top photo on my site, with Gaga laughing with a kiss mark on her chest. You can see it on my site. I wish so much I could at least center it, if I can’t make it larger. Thank you so very much. I didn’t know about your site, and am very glad I found it. I would love to find a widget that shows the people online on my site, on a globe, so I can see who and where people are at the time they are on my site. xoxoxo Happy Holidays!

    [Reply]

  2. aaron

    January 24, 2013 at 12:06 am

    I cannot seem to find the area to put this in? You say the opening body tag? I have no clue where that is when looking at all this code.
    can you help?

    [Reply]

  3. Maya

    January 31, 2013 at 11:10 pm

    I got the banner and I have it in the middle where I want it but when I scroll down my blog, the banner goes down with it. How do I keep it in place?

    [Reply]

    Mr. Tumblr Reply:

    I suggest you post your problem, along with a .txt file containing the code in the following forums, they have lots of mods that can quickly help you out with element positioning
    htmlforums.com

    [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>