HOW TO SAVE YOUR BLOGGER TEMPLATE

Copyright-free image from Tack-o-Rama

This is something you should do every time you think about making any changes to your blog, and also something you should do anyway from time to time, as a safeguard against computer crashes etc (save to a disc or an external hard drive.

It's as easy as 1 ... 2 ... 3 ... just follow the pictures!

Hope this gives you peace of mind!

UPDATE - REGISTRY CLEANER

TELL ALL YOUR FRIENDS!

I posted some time ago about Digeus Registry Cleaner (no affil. etc, just a very happy customer) and have found they have just released a brand new version. Here's my old review.

Go here to try out the latest version: Digeus Registry Cleaner

What it actually does is speed up your computer by cleaning errors in your Windows. It removes the junk that accumulates in your Windows Registry, fixes Windows errors which results in speeding up your computer.

Which I am even happier with! Quicker, slicker - it took seconds to find a frightening amount of invalid bits and pieces (I now have a new computer and my old model of Registry Cleaner wasn't compatible with Windows 7) and eradicate them.

The computer is now skipping around like a newborn lamb - much faster and smoother!

Don't forget to regularly do your DiskClean and Defragmentation as well (weekly is best) and combine with the Registry Cleaner at least once a month for optimum performance.

Hope this helps!

SIMPLE TEMPLATE - GREYED SIGNATURE AREA

Linda at Favoritspot has just emailed me with a problem - Blogger has changed some code again - sometimes I wish they wouldn't be quite so 'helpful'!

What they have done now is tweak the code in the Simple template to make the post comments section grey, so it stands out. You'll see this at the bottom of each post, where it says 'Posted by', 'Comments', 'Links to this post' etc. Which is great if it's what you want... but not so good if you have your signature there, for example.

I've used a test signature - Home - to save me writing one specially, and you can see it's against a grey background. This is because it's a png file, so the background is transparent. If it was a jpg, it would have a white box around it, like Linda's.

Here's a very simple tweak to make things look right again.

Do a Preview first, then if you are happy click the orange button 'Save Template'.

Result!

HOW TO FIND THE BACKGROUND COLOUR OF YOUR POSTING AREA

Firefox and Google Chrome users simply need to install this add-on, Colorzilla. This has an eyedropper tool so you can find out what the colour code is called.

Alternatively, here's a link for a web-safe colour chart. Scroll down and you'll see all the colours listed.

Two things to be aware of when entering the code:

1. Make sure you put a hash mark before the colour code: #
2. Colours have six digits/letters

You'll see every colour listed has the colour names in the top of each box, including the # mark, so all you have to do is copy&paste the code where I showed you.

I hope this helps!

MOVE YOUR SIDEBAR WIDGETS

Easy peasy!

CENTER YOUR HEADER: BLOGGER DESIGNER TEMPLATES

If you find my earlier tutorial on how to center your header doesn't work for you, chances are you are using one of the new Designer templates. These need a different fix - and here's how!

1. Go to your Dashboard then click on 'Design'. You'll be in Page Elements view.

2. Click on 'Template Designer'.

You can see my header looks odd: this is because it's too far to the left. I need to center it.

3. Scroll down to 'Advanced'.

4. Scroll down and click on 'Add CSS'

 

5. Copy and paste the code below into the box, as shown above:

#header-inner img {
margin-left: auto;
margin-right: auto;
}

6. Hit 'Enter' on your keyboard, hit or your spacebar, to enter the code.

You'll see your header move immediately. If you're happy, click the orange 'Apply to Blog' button, and you're done!

HOW TO REMOVE THE ATTRIBUTION WIDGET

I don't know about you, but I find it really annoying to have that 'Powered by Blogger' attribution widget at the bottom of my blogs. As I use my own customised backgrounds, I feel it totally spoils the look - and is also totally unecessary, as anyone can see it's a Blogger blog - and therefore it's obvious it's powered by Blogger.

So here is how to remove the widget.

1. Go to Design > Page Elements view > Edit HTML. Before you do anything, download a copy of your blog (you should always do this before experimenting... just in case...)

2. Type CTRL + F on your keyboard to bring up the 'Find' box (command + F if using a Mac, I believe) and then type the word attribution into that box. The word will highlight in green in your coding, and the html will automatically have scrolled down to the right place.

3. As shown, you need to change the wording in two places. Where you see showaddelement='no', you need to change the 'no' to a 'yes'. And where you see locked='true', you need to change this statement to 'false'. Then click Save Template.

As you can see, I have changed these two statements (and highlighted them in pink to make them easier for you to see) and then I saved the template.

 

4. Go back to Page Elements view and you will now see a widget at the bottom of your blog, titled Attribution.

5. Click on Edit - this brings up the widget box. You can now click the blue Remove button to delete this widget from your blog.

Just to reassure you - you aren't contravening any copyrights by doing this, as all the information is repeated in the body of the html. So it's still there, but not in the middle of your footer!

A nice easy tweak, but it really improves the appearance - especially if you have a really spiffy background!

ADDING A BLOGGER BACKGROUND TO A WORDPRESS BLOG

My test blog - WordPress free template: CORALINE

You all know I have rather mixed feelings re WordPress (it's beaten me twice, and I totally gave up for a while - but I DID find how to add my own backgrounds and headers to some of their freebie templates). And since several WordPress users have asked me about this, it's only fair to tell you all!

COPYRIGHT ISSUES

There's a slight difference in uploading the background to a WordPress blog - as with TypePad, the image has to come from your own computer - which makes things difficult for the designers of freebie templates re credit, kudos and copyright issues. So I suggest you do the right thing and add their button to your site, in your sidebar, with a little header such as 'Template from...', which sorts the issue nicely (as far as I am concerned re my own designs, anyway).


TYPEPAD

If you have the right package(ie: Theme Builder) then you can also add any freebie templates. The maximum default for Theme Builder is 900 pixels wide, so most 3-col Blogger background designs will fit! Hurrah! Again, you need to download the image to your own computer and then upload to your TypePad account.

ADJUSTING & CENTERING HEADERS IN BLOGGER DESIGNER TEMPLATES

These tweaks are all easy - you don't even have to go into the html of your blog!

Just click on Design > Page Elements view, then click on Template Designer and scroll down to Advanced.

From there, scroll down to CSS Code and add the tweaks you want right into the white box on the right.

In each case, hit the Enter key or hit the spacebar, or the coding won't work (leave a line between each section of coding, and another after the final one). You'll see these activate immediately.

TO GET RID OF ANY COLOURED STRIP AT TOP (eg: Simple, Picture Book, Watermark):
Go to Template Designer > Advanced > CSS code and add this:

.body-fauxcolumn-outer .cap-top, .body-fauxcolumn-outer .cap-top .cap-left, .body-fauxcolumn-outer .fauxcolumn-inner, .body-fauxcolumn-outer div {
background: transparent;
}
.content-outer {
-moz-box-shadow: 0 0 ;
}

CENTER PAGES HEADER:

#header-inner img {
margin-left: auto;
margin-right: auto;
}

Now your custom header should be exactly where you want it!

ADDING A TABLE OR GALLERY USING LIVEWRITER

Copyright-free image Tack-o-Rama

Sometimes, you want to add a lot of images in a block – but you also want people to be able to click on each one independently, so that they can bring up a larger image. And not want to have to write a lot of code.

The answer is to put those images in a gallery or a table, and here I am using LiveWriter as the simplest method.

Adding a Gallery




Here’s the Gallery view I chose:

		Books VIEW SLIDE SHOW DOWNLOAD ALL

I’m not so sure about this ‘download all’ option – so make sure you have copyright signs on those you are worried about. Having said that, there are so great choices in gallery designs, to give your blog an uplift.

You can create a table instead…. 

Click on the Insert tab, then Table.



While in picture view you can still edit your image: change colour, size, add a frame etc, add a copyright… I always add the picture first, then change the size (top left on the toolbar – mine add as Small, so I change that to Medium) then set position (top right) if you want text to wrap, etc.



I originally chose 3 columns (3 pictures going across the table) and 4 rows, for a total of 12 pictures. I then changed my mind (pic below) and removed two rows, so I now have 3 columns x 2 rows = 6 pictures.



How many pictures you can include in a table depends on the width of your posting area, so you can check this by going into your blog:

Design > Template Designer > Adjust Widths

Nothing is permanent until you click ‘Apply to Blog’, so check via the Preview before you save anything, in case you knock out your blog design altogether. I keep saying it, but it really is a good idea to download a copy of your blog before you start messing around in Template Designer. It will keep your background design and header, but any customisations like a signature, numbered comments etc, entered into the html, will all be overwritten if you press the wrong button by accident.

In tables, you have a much narrow choice of appearance although you can still customise (add borders, change colours etc) so it’s up to you how fancy you want your table to look. Pictures or text will appear in regular intervals, unlike the Gallery views, where they are very varied (layered, fanned out etc).
I’ve chosen 650pixels wide, 3 columns and 2 rows, so I have space for 6 pictures. I’ve also added a 3pixel border. Notice how the columns have adjusted to accommodate the width of the images I chose.

Cherry Blossom – Pink	Cherry Blossom – Jade	Cherry Blossom – Black
Winter	So Pretty accordion tag book	So Pretty Accordion tag book

So what’s the verdict? MAGIC! This is so easy, it’s unbelievable…

Finally, if you are really unsure how it’s going to look – or you want to add a link later, you can post the draft to your blog, then go in and edit in Blogger as you normally would.

So now I have the option of lots of little pix, a scrollable gallery or putting in really big images – and choice on how they appear. Live Writer has come a long long way.

NOTE - Added while in Edit Post view in Blogger... 

Editing a LiveWriter post in Blogger you will find the paragraph spacing disappears - so you will need to reinsert breaks etc. If you post directly to your blog, the post will be EXACTLY as you've written it in LiveWriter.