Saturday, 29 January 2011

Useful knowledge for blogging

I love learning new things and when I started this blog a long while ago (I would have to check the first post) I was immensely proud and happy about managing to set up a blog at all. You might say "it isn't that difficult anyway" but I didn't KNOW that before I tried to do it.

The wonderful thing about the internet is that there are lots and lots of helpful people out there who will give you advice. So in the next few weeks I want to contribute something as well and share some of the things that I've learned about blogging (or the links to some pages that explain everything much better than I ever could).

I want to start with


Please note: This is not a tutorial for setting up a blog. You can find a very detailled tutorial for this on: How to set up a blog for beginners.

There are lots and lots of great templates for blogs out there. is a cool page for downloading templates. If you just want some inspiration go to: 100 nice and beautiful blog designs.

If you get really inspired you can take the whole thing one step further and simply do your own blog design.

All those scrapbooking supplies you have on your harddisc are perfect for customizing your blog. If you look at the "Beyond Words" template (found on blogskins) you might notice that it uses supplies from a the Express yourself freebie kit by Ronna Penner.

The tutorial that helps me customizing my blog was by Nicole Young from DSP. I can't find it on her blog anymore but here are the instructions (parts of it is the original text by Nicole):


For making a background create a 1450 pixel by 1100 pixel background image and save it for the web at 72 ppi (ideally in Photoshop).

Please note: Depending on the resolution that your screen is set on and the size of your screen more or less of this BG will be visible. Keep in mind that although YOUR screen might only show a bit of the background, other people might see much more than you.

Make sure the middle part of your background is in a light color and not heavily patterned. This is were the text will be and you want to make sure, it will pop off the page.

Make a separate header for the page: A good size is 700 pixels by 142 pixels (save for web at 72 ppi) again.


If you're using scrapbooking backgrounds or elements to make a background and header, keep in mind that the industry standard for scrapbooking elements and bgs is 300 dpi. So if you want to use them for your blog the easiest thing to do is: Save the element you want to use under a different name (save as) and then change the resolution (in Photoshop under Image - Image size) to 72 pixels/inch, which will also make the file size much smaller.

I made a Christmas background for this blog the other day using Meagan's kit "Retro Holidays". This is what the background looked like (without header). 

Basically it's like making any scrapbooking page. You use a background, add some elements - and make sure you leave space in the middle for yor blog text and on top for the header.


When you're done decorating background and header, upload the images to a photosharing platform on the web (eg. photobucket or Picasa webalbum). When you upload the files make sure you upload them in full size.

With Picasa chose the "original size" option, in Photobucket make sure you go to "Customize your upload options" - in small print below the update button - and chose "Best possible quality while staying 1 mb or less".


I assume you did set up an account and chose some standard template.

Changing the background

Go to Layout. In the Layout Tab, go to Edit HTML. You are going to edit the html code now, but don't worry, it's far easier than it sounds.

Scroll down on the template until you see an area called body.

Right now one line of the body part says: Background-$bgcolor; (or someting along that line).

Change this to:
Background-image: url(your Picasa webalbum/photobucket jpeg link here!) ;background-position: center; background-attachment: fixed; background-repeat: no repeat;

This is where you are going to enter in your background jpeg from wherever you uploaded to. Simply paste your image link (should end in .jpeg) inbetween the parenthesis.

Where do you get the image from?

In you Picasa Webalbum/Photobucket open the background picture you uploaded in full size/100 %, then right click on it and copy the address/URL shown in the window that pops up, make sure to copy the whole address.

Inserting the header

Next scroll down until you find the portion of the HTML that says header-wrapper. There is a line of code that says border. Delete the entire line of code. The line of code starts with the word border and ends with a semi-colon.

Scroll down a little further and you will come to header. Again delete the entire line that says border.

These two steps delete the 2 small gray lines that are at the top of your blog that surround your header area.

The last part of the HTML that youn need to edit is the width of the outer-wrapper and header-wrapper. You need to change both of these widths to 700px. Once you have changed those two lines. Your blog template is done. Save the changes and view your blog.

How to you get your header to show?

Go to Layout> Page Elements and edit the Header.

Upload your header from your computer. And choose: Instead of Title And Description.


For more instructions and lots of more link to resources have a look at: Tips & tricks for blog templates & blog design.

No comments:

Post a Comment