Learn how to modify your Tumblr Header

Tumblr Headers – Free ways to customize your tumblr header

Have you customized your Tumbler header today?

The microblogging site Tumblr has been growing rapidly amongst social media promoters and bloggers alike. However, to help make your blog stand out you might try customizing your Tumblr header. One of the easiest ways to customize your Tumblr site is to change the look of the banner – also known as the header. Changing Tumblr headers is pretty easy and free – read the tutorial below and give it a whirl:
Learn how to modify your Tumblr Header

You can always read about the best Tumblr themes in our review section.

CHANGING TEXT HEADERS FOR IMAGE HEADERS
Tumblring, is a great Tumblr resource, and discusses different ways of modifying the Tumblr header, which is technically the first thing anyone really sees. One of the first customizations a Tumblr blogger may do is remove the text header and insert an image header. You can’t just delete the text header and pop in an image header. Here is the basic process to modify your image header.

1. Find an image:

You need an image that fits the text header’s current size. If the new size doesn’t work effectively with your theme, which you will see right away, choose a smaller image until the new size works. Generally speaking, an image size of approximately 500 px wide by 282 px high is recommended, according to www.tumblr.com.

2. Go to “Customize” >>> “Theme” >>> “Use Custom HTML”

3. Using control+F in your browser find the following code for your text header title:

<div id=”title”><a href=”/”>{Title}</a></div>

4. You need to upload the image you want to use as the header, via the Tumblr Static File Upload.

5. Replace {Title} with the following code:

<a href=””><img src=”your_image_url” />

Now paste and replace the image path url that you got from the Static File Uploader in “your_image_url”.

6. Preview your theme clicking on “Preview” in the edition window. If the image is a good fit, click on “Save”.

MANUALLY CODE YOUR TUMBLR HEADER MODIFICATIONS:

Tumblr itself has a unique method of customizing your site; hand coding the HTML instead of sticking with one of Tumblr’s pre-established free themes. To manually change the HTML coding, follow these steps:

1. Click the name of your blog at the top of the Dashboard or under the list icon at the top.

2. Click “Customize appearance” on the right column.

3. Click “Edit HTML” below the theme thumbnail on the left.

Tumblr has two types of special operators used to render content in your HTML. Variables are used to insert dynamic data like your blog’s title or description. Blocks, on the other hand, deal with a block of HTML for a data set or conditionally renders it by linking back to a page’s history. Knowing how to work with variables and blocks gives you a way to work with the HTML coding in order to change your Tumblr header.

CUSTOMIZE YOUR PROFILE TO CHANGE YOUR TUMBLR HEADER:

You can also directly customize your Tumblr profile in order to change your header:

1. Go to your Tumblr profile and click “Customize” on the top right.

2. The customization toolbar will appear across the top of your page. Click “Advanced”.

3. Under “Add custom CSS” is where you will input any CSS to be changed. Use the proper format and refer to current selectors and classes. No changes will take effect if you try to set a rule for something that doesn’t exist in the theme’s style, so work with the elements that are available for that theme’s style.

4. Once the custom CSS is inputed, click “Save”. You should see a distinct change in your profile page once you’ve done that.

You can also change the conditional variable that exists in a lot of the well-coded themes. Changing the conditional variable allows you to leave the image url path in the CSS code. To modify this, look for the following code in your html:

Now place the image url path within the content tag, between the quotation marks. For example:

> content= “http://static.tumblr.com/image_header.png”

To make your coding even easier to take care of, there may also be an option to upload the image header via a form.

To find the form, go to: “Customize” >>> “Appearance” >>> “Logo Image”.

In short, there are a variety of methods you can use in order to modify your Tumblr banner. You can go through Tumblr itself in order to customize your banner, switch your text header up for an image header, or modify your CSS file in a variety of ways in order to make your header the appealing draw to your Tumblr site that it can be. It can be a huge benefit to your site to modify your Tumblr banner; once you’ve switched things up and made it more appealing, you may find that the numbers of those visiting your site increase. If nothing else, though, you have created a Tumblr header banner which enhances your site.

Remember, you can always just get a premium Tumblr theme if you don’t like messing with coding your own Tumblr banner or header.

Resources:

http://www.tumblr.com/docs/en/custom_themes

http://tumblring.net/replacing-the-text-header-for-an-image-header-on-tumblr/

One thought on “Tumblr Headers – Free ways to customize your tumblr header”

Comments are closed.