9.18.2012

Guest Post from Lady Million on HTML!

While I am in the city where Patrick Verona and Kat Stratford met, I am leaving you in the amazing capable of HTML hands of Katie, from Lady Million

Welcome to lesson one of the easiest DIY blog design you'll find for free.  Excited much?  I am.  It's been requested of me (by many) to do these tutorials since I have left the novice stage of blog design behind and can say I SOMEWHAT know what I am doing.  So I'm going to do my best to teach you the basics based upon my experience of designing and installing my own blog design.  


Today's tutorial is going to be:  Creating a Blog Header.  But I am aware that some readers out there need me to take a step back and explain how to get started with a template, so I will give a brief rundown of that.

I started my blog using the Simple Template.  To do this, go to your blogger dashboard, click Template ----> Customize, then over to Simple.  The options on the left will allow you to make all necessary customizations to make it exactly what you want.  I chose the two column template, but it is completely up to you.  Adjust your widths, choose a background color, etc.  Click "Apply to Blog" to save.  Then "Back to Blogger."

The simple layout will give you a very simple ( Ha.  Get it?) visual of what your blog will look like.  There will be little squares all over your layout.  These are the different aspects that will make up your blog.  In your blogger dashboard, click on "Layout".  Today I will teach you how to install the header part located at the very top of your layout.  Here to be exact:



To create the header, I use the site www.picmonkey.com.  It's amazing and can pretty much do everything you will need to create your blog.  First, you will want to click "Edit a Photo" and upload ANY photo that you have.  Then on the left side, click on the fifth option down titled "overlays".  Click on the rectangle, and stretch it over your picture so it is completely covered.  Make the rectangle white.  At the top, click on the option labeled "Merge Together" (next to upload/save).  This will create one image and will look like this:


 This will be the background that you work on to create a header.  Once you have this, you can get as creative as your heart desires.  Use the text option to the left, and whatever else you would like.  Here is a very simple example of what can be done using text and geometric shapes.


 Next, you will crop your image into a rectangle.  After you crop, you will need to resize your image to about 800-900 megapixels wide, and about 200 tall.  To figure out the width of your blog, go back into the Template, hit Customize, and then Adjust widths.  This will show the width of your blog in terms of megapixels.   After sizing, SAVE the image (always as .png to avoid a grainy image) to your desktop.  The final image will look like this:

In your LAYOUT , click on the top box labeled "header".  A box will pop up and allow you to upload the image that you created and saved to your desktop.  Make sure you check the box that says "Instead of Title and Description".  SAVE.



That's it!  You can now hit "Preview" to view your new header.  You will then want to "Save Arrangement" to make sure it saves.  It's that easy.   
PLEASE LET ME KNOW IF YOU HAVE QUESTIONS! 


2 comments: