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.
- Pimp My Profile: This glitter banner generator for tumblr is good since the background is plain white, good for minimalist tumblrs.
- 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.
- 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.
- Grab your tumblr banner code that you obtained from the sites above.
- 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.
- 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
- Now, copy the following code and paste right after the body tag:
- Change TUMBLRBANNER and replace it with your tumblr banner image url you have.
- 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)
- Now, start positioning your tumblr banner by modifying the top & left parameters until it fits right where you want it to be.
- Save and Close.
<a href="TUMBLRURL"><img src="TUMBLRBANNER" style="position:fixed; top:0px; left:0px; opacity:1; z-index:100;" /></a>