Sunday, June 19, 2011

How to Add a Custom Header in Blogger.

Ok, when you want to add a header, that goes across the entire blog (as you see above) you need to first widen your blog. You can see that tutorial here: How to Widen Your Blog. When and if you are done with that we can continue over here!


+You can either make a header in photoshop, gimp or even paint! I added a screen shot below of the size I like to make mine, and how you would make it in paint (the sizes and located on the bottom middle, you just need to stretch the sides to make it fit.



Then, when you have your header made, you will need to go into your dashboard-->design-->page elements.
Click EDIT in your header tab. 



Upload the image you want for your header THEN, make sure you click the link that says INSTEAD of title and description!


Now, if you were to hit publish right now you will probably see borders around your header, that will be no good for you. SO, you need to save these settings and head to your HTML section. (I know... we all love this part haha). 
Find this code:



#header-wrapper {
  width:660px;
  margin:0 auto 10px;
  border:1px solid $bordercolor;
  }


#header-inner {
  background-position: center;
  margin-left: auto;
  margin-right: auto;
}


#header { 
  margin: 5px;
  border: 1px solid $bordercolor;
  text-align: center;
  color:$pagetitlecolor;
}


You can now save these settings! And, everything will look better than ever :)

5 comments: