Blogging 101: Background, Banner and Pages

Hello Princesses!

Today I'm going to be showing you how I create my Background, Banner and Pages! It's actually deceivingly easy, but it does take some patience and trial and error to get your blog looking pretty and even.

Background

First off -  head over to your template tab in your options, and click the orange customise button and then click onto your "Background" tab. From there, you can chose from the built in blogger backgrounds, or to upload your own. If you want to upload your own, you will need to make your own customised background image. 

Depending on what you want your background to look like will depend on how hard it is to fit your background image. Simply googling "Blogger Background" will show you some super cute images, most of which have a simple colour in the middle, and a design on the outer border. This is my personal favorite design, and the design of what I'll be showing you how to make today!

I found this pre-made background design on google. It's super cute, and will be really easy to customise to my blog dimensions because it has a plain white background. Since we will be expanding or shrinking the amount of white background in the center, it's best to chose a background that has a white background rather than a coloured or textured background.

You can try and insert this as your blog background as is, but it probably won't fit. If you've already adjusted the width of your blog in the template settings when you created your blog, have a look at how wide it is. Mine is 1200px. Add about 100px (50 for each side), and there is the length that you should have in between the side image/length of the white. (You can check the distance in Paint). If you want your side images to be further away, add more white. I also changed the pink to a pale lavender using the "fill with colour" option on paint. I'm not fancy with my image editors.

And that's it for my background image! It's even easier to fit the backgrounds if they have a clean straight line down the middle. If you guys want to know how I made my main blog image (from a tiny square to the scalloped edge background it is now) leave a comment down below and I'll make a little/long tutorial because it's pretty complicated.

Once you have your background image, insert it using the "Upload" button in the "Template" tab. Use the center alignment and fiddle around with the tiling and scrolling options to create your perfect background placement.

Banner

Making your banner can also be really easy, or really simple. My first banner was a simple curly font written on paint without any fancy colours or images. The same rules as the background applies for spacing your banner. If your blog length is 1200px long, your banner template should be 1100px long (just a little shorter) otherwise your banner will hang over the edge and onto your background image. If you don't want your banner to be absolutely massive, don't make the text or picture fill the whole template. 

To make the shaped cut outs that I have on my main blog, you will need an account with Picmonkey. Trust me - it's well worth the yearly $33 payment to purchase the upgrade, but you can try it for free before buying.

Create a coloured background in paint with the right dimensions for your blog, or find a patterned background (my main blog pictures are random floral photos) and open it up in Picmonkey. Click onto the Frames tab and chose a shape cut out. Click the transparent check box, chose a size (50%) and there you have your first cut out! 

Save this image, and make as many as these as you want. Then you can use the overlay function to collage them into one image.

Add some text if you want and there you have your simplistic banner!

Save your image and go into your template tab. Click edit to upload your banner.

Make sure to click the "Image instead of text" option unless you want a text header alongside your banner image.

... And there is your simple banner uploaded beautifully!

 Pages

The last thing I'm going to show you is how to insert "pages" onto your blog. Pages are the little links that appear at the top, bottom, or sides of your blog that take you to pages or links.

Go into your Layout tab and click on your first "Add Gaget" button. I chose the Gadget space underneath my banner.

After you click on the "Add Gadget" button, scroll down and chose the "Pages" option. Click the plus sign and then click save. You can change all of these options later to show the pages you've created. 

Now you have your pages installed, you want to make some pages and links for your pages. Go into the pages tab on the left side and click the "Create a new page button" or the New Page button which will take you to a page identical to the normal blog post page. It's a good idea to create an "About Me" page to tell your viewers a little about who you are and what you're doing on your blog!

To create pages that show tagged posts (Nails, Beauty, Reviews etc) you will need to first view your blog, and click the options/tools button beside your pages. This shows you some different options including a button that says, "Add an External Link". To find the hyperlink for your tagged posts, simply click one of the tags at the bottom of one of your posts. Copy the hyperlink at the top of the page and insert it into this little box. It'll automatically update with the posts that you tag under that tag.

Now you probably want to make your pages section look a little prettier, so go back into your "Template" tab and click onto "Advanced" and then into "Add CSS". Add this code into the box and click save. 

.tabs {text-align:center !important;}
.tabs li {display:inline !important; float:none !important;}

(I got this tip from Yomi at Yomistyle (formerly Gwiomistyle) but since she has recently moved domain names I can't find the blogpost link. I do recommend checking out her blog as her blog design tips have helped me out a lot!)

You'll probably want to make the text a little bigger as well, so scroll up through your advanced tabs and click onto tabs text. Mine are 24px.

So thats the basics on how to create your Background, Banner and Pages! ^.^ Next week I'll show you how to do some basic HTML coding for links, pictures and click-through pictures. 

Let me know in the comments below if there is anything you would like to see a tutorial on!