Subscribe via RSS Feed

Header tutorial for blogspot

Header tutorial for blogspot.

How to create a custom yet beautiful header design for blogspot? Technically we need to know some HTML & CSS knowledge to create super unique and outstanding header in blogspot. But today I’m going to share an idea on where to get stunning headers, work best for those who can’t use Photoshop, illustrator & etc artistic software..


Header tutorial for blogspot

Exclusive Tips and tricks share :

Tips # 1 : I strongly suggest you go Dashboard > Design > Edit HTML to customize your blog header. Some blogspot users think that this section is crazy, because of the complex codes. Tell you what, only by going into the complex framework, then you can get the header’s max customization work done. So remember my point # 1 is, never go to ‘Design’ then the edit header widget area, but get yourself familiar with what actually make up your blog design (HTML & CSS, don’t worry I’m going to explain these soon)

Tips # 2 : I suggest Google Chrome. Google Chrome have a awesome built in feature the > Inspect Element thingy. Right click on the browser and click on ‘Inspect Element’. You can see the HTML & CSS mark-up on your blog. You can try to edit the CSS value (located at right hand side), no worry that’s only ‘virtually edit’, it won’t spoil the design. Try to find your ‘header’ HMTL mark up, then you will know how the header actually located, scaled & applied effects. The exact codes which found via the Inspect Element, can be found inside the ‘Edit HTML’ field in blogger thus try to play around with the virtual edit mode in Inspect Element 1st before trying to change the codes inside blogger can avoid you mess up the blog.

# Tips 3 : Get awesome free blog header banner via Wallbase is a site that collect thousand of high definition wallpaper. You can search your desire wallpaper and crop it into a banner, for your blogspot header design.

# Tips 4 : if you really are a dummy, don’t want to learn HTML & CSS (which I think every blogger must know a bit about that), you can use the replace and test technique. What I mean here is you don’t touch other codes, just replace the image URL that come along with the template in the CSS section (if you don’t know which part is the CSS part & where does the codes area represent HTML markup, you just use Ctrl + F then search for .jpeg / .png to look for the image URL location)

# Tips 5 : backup 1st. This is the first step before you start doing something on your blog design, whether it’s header or other else part. Backup is always a best practice because even you are good in coding you can still mess up stuff.


Recap : 1) Explore the HTML & CSS inside the ‘Edit HTML’ area in blogger

2) Use Inspect Element of Chrome to virtually understand how your blog is make up from codes

3) Find beautiful blog header from wallpaper, get it from wallbase

4) Backup always before you start coding

If you enjoy this entry, Header tutorial for blogspot pls LIKE to share with others thanks!

Incoming search terms:

  • tutorial header blog
  • blogger header design


Category: blogspot tutorials