Blog Designing: Creating A Header and How To Center Your Blog Header

Hey Everyone,

I asked on Twitter and here if anyone would be interested in a Blog Series of tutorials  on Blog Designing. Loads of you replied and said you would be interested and even told me what you would like to see. 

I have tried to make simple tutorials that anyone could follow, as there is nothing worse than trying to follow steps but not understanding. Before you start anything I would suggest saving everything including your html encase you make a mistake you can go back.

Create A Blog Header:

Step 1: Go To Picmonkey, and click the 'Design' button at the top.

Step 2: Then Select the 'Custom' button.

Step 3: Change the size to suit your blog! Take a look at your blog widths (to look at blog widths go to...Template>Customise>Adjust Widths) to get the right size then click the 'Do It' button.

Step 4: Select your Canvas colour, this should be the same colour as the main body of your blog if you want it to blend in.

Step 5: Create your design, Explore Picmonkey there are so many tools to help you create a unique header. 

The 'Butterfly' button will take you to lots of shapes and interesting images. You can change the size by dragging the image by one of the corners and change the colour by clicking the colour box that appears when you select and image. 

The button 'Tt' will bring you to a huge variety of text options to help spell out your blog name or description. Select the text you like then click the 'Add Text' button at the top to add in your text. You can change the text size and colour by using the box that appears when you add the text. 

To delete either text or shape select the item by clicking on it and then either press the delete button on your keyboard or the 'delete' button in the box that appears for each item.

Step 6: Once you have created your header you need to save it, click the 'Save' button at the top of the screen.

Step 7: Name your File and Select the quality Sean to give you the best quailty header.

 

Step 8: Click the 'Save To My Computer' button and put it in a folder where you will know where to find it.

Step 9: Go to Blogger and click the 'Layout' page button.

Step 10: Click the 'Edit Header' Gadget button.

Step 11: A new Tab will open on your screen Name your header, tick the circle that says 'Instead Of Title And Description', next Upload the header you created in Pic monkey. Then hit the 'Save' button.

Step 12: Your Header should now be uploaded. At this point click the 'View Blog' button at the top of the screen to see what it looks like. If its not the right size go back to Picmonkey but click the 'Edit A Photo' button instead of custom, there it can be resized and you can upload again.

Centering a Blog Header:

The most simple way to center a blog header is to add CSS. Again save everything before attempting anything encase your loose what you have done. This worked for me but blogs differ so if it doesn't work just delete it and if you google it there are lots of tutorials out there!

Step 1: Click 'Template' Button

Step 2: Click 'Customise' Button

Step 3: Click 'Advanced' Button

Step 4: Scroll to bottom and click the 'Add CSS' Button

Step 5: Type the Code below in and then drop a line underneath (the number maybe need to be changed depending on your blog widths but just change the numbers and it will give you a preview below so you can see when it is centered). 

.header-outer {

margin-left:110px;

}

Step 6: Click 'Apply To Blog'.

I hope this helps, if you have anymore questions please don't hesitate to ask! 

I will be uploading Blog design tutorials on Sundays for the next while, so don't forget to check back!

*I am not responisble for any changes you make, Please save your blog and blog html first somewhere. Any changes or mistakes you make are your own responsibility and I am not liable!

Blog design blogging Center Graphic design Header