Saturday Series: "Bling Your Blog" Lesson 4

{{This is supposed to be like on Wheel of Fortune, where every says “Wheel! Of! Fortune!!!!!”}}

Are you ready to Bling!  Your!  Blog!!!!!!
Today’s Topic:  Adding a Custom Header
This mean adding a custom header INSTEAD of the header that is standard to the Minima template.  So first you have to check how many pix wide your header is.  You can also change this.  You really should just play around with border size (always save your original template first).  It teaches you a lot about html and blog design.  There is SO much to know and honestly I am just myself learning the tip of the iceberg.  So I am not pretending to know everything here, just sharing what little things I have learned in my explorations.  
Anyway, back to the subject..
To find out how wide your header is, look for this bit of html in your Edit HTML Design page:
#header-wrapper {
  width:660px;
  margin:0 auto 10px;
  border:1px solid $bordercolor;
  }
You can change the width to be up to 1024 pix wide, unless you change the outer wrapper to be wider as well.  
Go into your photo editing program and design your new header.  You will want to make it around 200-300 pixels high.  Use a transparent background also.  And think outside the box…download free vector images, stock illustrations, or digital scrapbooking pngs.  You can make some super cute stuff.  
Once you have your header designed, save it as a jpeg and upload it to PhotoBucket like always.  Now here comes the different part.  
Go back to your Edit HTML screen and find this bit of html:
1 showaddelement=’no> true title=’Header (Header)’ type=’Header’/>
See the red?  
  • Change the ’1′ to ’2′
  • change the ‘no’ to ‘yes’
  • change the ‘true’ to ‘false’
Save your template and go to the Elements page (under design.)  You will now notice that you can add more than one element in the header section.  So you know what to do now…go grab that html from your header in Photobucket and add an HTML/Javascript gadget to the header section.  Put in your new header html and delete the old header.  Done! 

blog sig

Comments

  1. thank-you. These tutorials are so helpful!

  2. Jacqueline says:

    Thanks for sharing. Now actually doing it….

Speak Your Mind

*