COMPUTERY blogging etc

MOVE YOUR SIDEBAR WIDGETS

2012-01-02T15:11:00.002Z

Easy peasy!

CENTER YOUR HEADER: BLOGGER DESIGNER TEMPLATES

2011-12-21T19:22:00.001Z

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

2011-10-13T17:33:00.000+01:00

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

2011-10-09T15:25:00.000+01:00

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

2011-10-09T14:27:00.001+01:00

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

2011-09-11T20:26:00.000+01:00

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.

THE NEW LIVE WRITER - UPDATE

2011-09-06T18:55:00.000+01:00

This is the picture I give details about in Pic 3, below (that screenshot shows me working on this one…

As you know, folks, I keep having another go with LiveWriter – the layout has changed again (or maybe it looks different because I’m now using Windows7).

Using the drop shadow

I have to say I like it more and more, and really must start using it as a regular thing (I’m just so used to going straight into Blogger). So this is a little bit of a tutorial as well – I’m using my screen capture programme to show you my progress as I write this post.

This one uses a thick black frame effect

As you can see, I applied a reflection effect, a watermark, enlarged the picture to the size I wanted, and positioned it exactly where I want it!
I’ve entered the captions below the pix by centring the text and reducing the size to 10pt.

For this one, I’ve chose rounded corners

And now I’m going to investigate that other tab…

A thin outline

I think you’ll agree it’s all pretty simple and straightforward.
In addition to images and videos, you can even add picture folders – little galleries – and tables.
Finally – don’t forget to add tags to your post (‘labels’ in Blogger):

No border

Yes, I think LiveWriter has really become a really helpful tool for making writing your blog a lot easier.

Technorati Tags: LiveWriter,blogging,computer,Blogger,WordPress

HOW TO CHANGE YOUR HEADER

2011-08-18T23:16:00.000+01:00

I've had an email asking for more in-depth help on changing headers, so thought it's time I did a better tutorial.

My original header

I want to change my original header - so first I need to remove it.

If you have a header already in the My Pictures folder on your computer, simply browse for it and upload it. If it's on an external site such as Photobucket, Flickr etc, then you need to enter the link for the image.

What buttons to press! Which does WHAT...

Here's how to find the Direct Link code in Photobucket

If you don't see your image straight away, here's what to do

Wait until the image has loaded before you try to save it. If the image doesn't load immediately, scroll back to the beginning of the Direct Link code (use the Home button on your keyboard, or the arrow key) and you'll see Blogger's 'wait symbol' whirring around, and then the header image will load.

Just check you've clicked the right buttons (you don't want Blogger's own header writing over the top of your image if you've already done some text etc in your graphics programme)

Once you are happy with the header you want to use, click 'Save'. Then go into your Dashboard to the Design section, then into Designer, Template Designer, Advanced - where you can adjust the fonts, colours and sizes as needed.

If the text is too high, or too far over to one side, you need to adjust the placement. Here's my tutorial on how to do this.

If you already placed the text on your header using your graphics programme, then you usually don't need to adjust the placement as it should already be centered. Occasionally though, you might want to give it a little tweak...

Here's my changed header, with the minor adjustments in positioning. Which make a ton of difference! If I was doing this for real, I would naturally choose my colours and styling to fit the background better (or change the background to fit the blog header better).

I hope this helps!

BLOGGER - the latest hiccup

2011-07-19T16:48:00.001+01:00

Just to let you know - the latest hiccup with Blogger isn't Blogger itself - it's the latest versions of Internet Explorer.

Pages link bar on Firefox - all the links are there

Internet Explorer - only the Home page shows

If you use IE, you may want to check whether your Pages widget is showing as it should. If you set it to be horizontal in a line under the header, you may well find it showing veritcally, with one link under the other, instead of side by side. Or - as with mine - you may find they don't show up AT ALL! It's enough to make you tear your hair out!

However, here's a way to sort it out once and for all - put in your own text links.

First thing to do click on each page, so you have them all up on show in separate tabs, so you can switch backwards and forwards to get the codes easily. If you are on IE, and it insists on bringing up a new blog every time, try this: press the CTRL key + the link, and your page should open up in a new tab.

Next thing to do is go to your Dashboard and then Design > Page Elements view, click on Add a Widget and add an html widget under your header.

ADDING AN EXTRA WIDGET UNDER YOUR HEADER

Some of you (with certain of the new Design Templates) may find that Blogger refuses to let you do it, so you'll have to click on Edit HTML in your blog and actually get in there and change a little coding, to add an extra widget. It's always best to download a copy of your blog to your desktop, just in case...

Now you need to type in CTRL + F on your keyboard while in Edit HTML view - and you'll see the 'Find' box in a toolbar right at the bottom of your screen, just above your Start button.

Type:

<b:section class='header'

into the box, and you'll be taken to the correct section of code in your blog, which will highlight for you in green.

This is what you will see:

<b:section class='header' id='header' maxwidgets='1 showaddelement='no'>

You need to change the number of widgets to 3 (on some blogs, 2 is enough - but 3 works on ALL blogs) and 'no' to 'yes' - your code will now look like this:

<b:section class='header' id='header' maxwidgets='3 showaddelement='yes'>

Save it. Now when you go to Page Elements view, you'll see some new widget bars (one above your header, and one or two below it - OR - you'll find when you drag&drop an html widget into the same space as your Pages widget, that the blog will accept it.).

SORTING OUT A TEXT LINK BAR

Into your new html widget, you'll need to enter each page as a separate link.

<center>
<h2>
<b>
<a href="URL OF YOUR PAGE" target="_blank">Name of Page</a>
nbsp;
nbsp;
<a href="URL OF YOUR PAGE" target="_blank">Name of Page</a>
nbsp;
nbsp;
<a href="URL OF YOUR PAGE" target="_blank">Name of Page</a>
</b>
</h2>
</center>

I've done two for you, separated by Non Breaking Spaces (so they will line up horizontally next to each other). Just copy&paste as many links as you need. I've entered the coding vertically to make it easier to work with, but I promise you the link will display horizinally when 'live'.

The important thing to remember is to leave no spaces between the " symbols when entering the URL of each page address.

You'll see I've added this piece of code:

target="_blank"

This will make each link open into a separate tab. If you don't want that, just delete it.

Once you've checked you have entered all the page links, test them out - and THEN delete your Pages widget.

SUGGESTION

If you have a big blog, with tons of links and content, why don't you copy the entire contents of your new widget and create another html widget in your Footer area. Then people won't have to scroll back up to the top of your blog to navigate.

I hope this helps!

TESTING LIVE WRITER AGAIN

2011-07-16T22:18:00.001+01:00

It’s been a while since I last used LiveWriter, so I wanted to see what changes they’ve made.

It’s now configured for Windows 7, which is good, as I hope for a new computer before this one dies again.

You can upload huge pictures (no thumbnails to click on – you see the large size immediately).

It’s easier to configure the size and style – and there’s much more variety! Plus you can click whether to allow the picture to open in a new window or not.

Judge for yourself – this picture is huge!

GUEST POST SPOT

2011-07-12T11:31:00.000+01:00

Thanks so much to Krista at While He Was Napping
- I was thrilled to be asked to write a guest post!

Success at last, lol lol lol

So if you always wanted your own email button, but didn't know how to do it, now you do! And here's the link to my earlier post.

Go for it, you know you can do it!

DESKTOP SCREEN SAVER & TUTORIAL

2011-07-08T23:06:00.000+01:00

The screensaver I've designed - icons wherever you want them to go
(copyright Susie Jefferson)

This week, I decided to get my desktop organised.

I've been reading a book from the library on how to care for your computer, cosset it, generally keep it happy - and discovered to my horror that my beloved Active Desktop Screensaver (which I've had for years) is Not A Good Idea!

My old desktop screensaver - Active Desktop Calendar to
the right, and all my icons on the left in orderly rows

These use up loads of memory, and if your computer is temperamental and on the old side (yes, to both) then you really shouldn't have anything active on your desktop. No fancy stuff apart from icons. Well, I don't know about you - but I find the screensavers that come with my computer programme (Windows XP) are beyond boring!

Screensaver at 1680 x 1050 resolution
Click here for the direct download

Screensaver at 1800 x 1050 resolution
Click here for the direct download

So I decided to make my own desktop calendar page for August, and here it is if you'd like to download it too. Left-click to open the folder at full size then right-click to save to your computer OR use the direct download links under the pictures.

TUTORIAL

Here's how to install your own screensaver - and also put your icons where you want them!

NOW ARRANGE YOUR DESKTOP ICONS WHERE YOU WANT THEM:

It's even easier than it looks! And if you want all your icons ordered into a grid or auto arranged - just tick the boxes again.Hope you like the screensaver and find it and the tutorial useful.

To enter your own notes and dates the easy way, either use your favourite graphics programme - or go to this link to see all the free programmes out there. Some you don't even need to download! And here's how to add a text layer:

UPDATE ON MAKING YOUR OWN EMAIL BUTTON

2011-06-22T21:10:00.008+01:00

In an earlier post, I showed you how to add your code to one of my email buttons. In this tutorial, I'll show you how to make your own!

FIRST STEP: YOU NEED AN IMAGE

Choose an image to use for your email button - maybe one of your own, or a copyright-free image (from my Freebies page or similar site).

You need an image which will fit in your sidebar - so ideally it needs to be anywhere between 180pixels - 220pixels wide (height isn't so important) and 96dpi.

You can create this on your computer using your favourite graphics programme. Add text if you want. You then need to upload this image to an external site, eg: Flickr, Picasa, photobucket.com (free). Here I'm showing you examples on Photobucket (all other programmes will be very similar).

First, sort out the upload settings then click UPLOAD to browse your My Pictures folder for an image to use. You need to set a smaller size for two reasons: the image may look too large on your blog, and also you don't want to use up unnecessary bandwith on your account..

When the image is uploaded, you need to insert the url of the image into the coding for the email. This is where you'll find it.

Follow the directions below to create your email button and insert the code into an html box on your blog, per the instructions. Go and take a look - if you aren't happy with the image, you may want to edit the size, the appearance, add some special effects... Pass your cursor over the image to bring up the Share/Edit/Delete/Move bar (in blue, below) and click on Edit.

Once you are happy, either replace the original image, or save a copy (to be on the safe side). If you replace the image, you should see the change immediately on your blog (although if you've edited the size, it doesn't always show up straight away for some reason). If you have saved a copy, you'll need to use that code to replace the image coding in your email button code.

SECOND STEP: WRITE YOUR EMAIL BUTTON CODE

Go to Layout > Page Elements >Add A Gadget and click on the HTML/JavaScript box.
Copy & paste the code exactly as shown, and substitute your own email address where I've typed YOUR EMAIL ADDRESS, in between the " " marks.
DO NOT DELETE the mailto: code, or it won't work.
Don't leave any spaces between the mailto: and your email address, or the end of your email address and the " symbol, or it won't work either.
Don't leave any spaces between the " symbols and the url of your image code - or, again, it won't work.
Click Save and then go and test it!

<a href="mailto:YOUR EMAIL ADDRESS"><img border="0" src="YOUR IMAGE CODE"/></a>

Your email coding should look something like this:

<a href="mailto:susie@anemailaddress.com"><img border="0" src="http://myimagealbum@somesite.com"/></a>

Now all you need to do is copy and paste this into an HTML widget box, right into your sidebar!

THE ACME LABEL MAKER - FREEBIE WEB TOY

2011-06-21T14:57:00.000+01:00

The Acme Label Maker is freeware (in other words, totally free to use) and great for that 'Dymo label' effect.

It's a great web toy for creating labels - right on screen, nothing to download. Perfect for journalling, scrapbooking, cards, blog headers and backgrounds... virtually anything you can think of! And, being rectangular, actually easy to cut out with scissors, lol (although I think I'd be using a paper cutter or guillotine... I can't cut a straight line to save my life!)

Once you've created your text, left-click on it to bring it up full size and then right-click to Save Image As to your computer.

Here's my finished result. Rather smart, huh?

Good fun, give the Acme Label Maker a try!

GOOGLE MUST BE READING MY BLOG!

2011-05-07T21:54:00.000+01:00

I'm so happy, I have to tell the world!

Google MUST be reading my blog - because everything is back again! Yes, the Follow button, the Quick Edit icon, the New Post button - and my comments are working again (although I'm still having to double-click to get my pix to load up - but I guess nobody is perfect....)

As Victor Meldrew said: 'I don't believe it!'

Victor Meldrew - copyright BBC

They must have read yesterday's post and put all their little geeky people to work under threat of extreme pain and withdrawal of pizza and chocolate priviledges, and Got My Blog Working again!

O happy day, hoorah, hurray.... I've definitely got to design a new blog background to celebrate!

WHY SO QUIET?

2011-05-06T20:19:00.000+01:00

Clara Bow

I had an email asking why I've been so quiet on this blog. Basically, it's so I didn't throw a tantrum: Blogger is making more changes, and these are filtering through very slowly to the UK. Meantime, blogs are not behaving normally and are causing much frustration and pulling of hair (and chewing of carpet too, in my case - having run out of fingernails).

On the very top toolbar, my Followers tab has disappeared, and also the Dashboard tab. I have to sign in every single time - although clicking the orange 'B' logo does at least bring me straight to my dashboard, so that's not so bad...

Bette Davis

My Quick Edit pencil icon has vanished on all my blogs - so editing a post is a pain and a torment of going in via the dashboard or extensive use of my Back arrow.

The Older Posts/Newer Posts/Home links at the very bottom of each blog page weren't working - although that's fixed now, so I'm hoping everything else will also go back to normal.

By the way, have you noticed the Labels and Post Options under the section where you write your posts has moved from the right to the left? Evidence of MORE changes! I do wish they'd tell us... if it aint' broke, etc...

UPLOADING IMAGES

You might notice changes when loading images - when clicking the Add Selected button and the image box goes blank... then nothing happens, the pic hasn't gone on to the blog, but it's still there in the image box thingie (thank goodness it hasn't disappeared altogether). So you try again... and again... If your picture won't go, try double-clicking the image itself - it works!

NO COMMENT

My main beef is that I can't leave comments!

Here, you can see my Google ID automatically shows in the comment box, so I can go ahead and leave comments for people.

This is my own blog, asking me for ID!

Here, you can see there's no profile showing automatically. So click on the arrow to choose one.

This is my own blog, refusing to recognise me. I feel unloved...

Here, you can see I chose to use my Google ID. Guess what? NOTHING happens. I have tried up to 6 times on the same blog, and nothing happens - the comment just disappears into the ether. I have also tried using my name and email address, my WordPress ID .... NOTHING. Totally nothing.

Ada Nazimovy

And the worst of it is... it's my OWN BLOG and I can't even leave a comment on it, to reply to a comment someone has left for me! I have tried signing out of Google altogether. Makes no difference. So now I have to reply to people via their email if they have one in their contact details. Frustrating? You cannot imagine...

So watch this space - I'll update when I have more news.

Meantime, on a more cheerful note - I intend to post a new tutorial next week on customising the new designer templates, which I think you will love, love, love.

HEADER OR FRAME & VIDEO TUTORIAL

2011-02-15T23:12:00.000Z

Adorable child pic is Daizy by M on DeviantArt

I've done a frame image for you this week - this could be used as a picture or even a blog header (just add your own text and click to resize).
It would also work as a Valentine image, which was my original idea, but I couldn't find an image I liked.

Left click to bring up to full size, and right-click to save to your computer. Add your photograph in a layer below this then merge. This is a png, so the central white portion is actually transparent. If this doesn't download correctly, use this image code instead:

http://i659.photobucket.com/albums/uu313/1stFloorFlatComputery/67d25be6.png

Here's an excellent video tutorial by Shabby Blogs showing how to layer and add text:

People often ask me if I use a lot of layers in my work. The answer is 'yes' and here is this piece, if you are interested:

MY VIDEO ON DIGITAL SCRAPBOOKING

2011-01-26T15:02:00.000Z

Here's a video I've done on digital scrapbooking - lots of suggestions for online and downloadable editors (free) and a brief overview of what each does.

How to begin digital scrapbooking

Here's the link on VideoJug (who did the filming) where they supply a printable version with links to all the sites I mention in the video.

Hope this helps!

ONLINE PHOTO EDITOR

2011-01-22T23:25:00.000Z

I've found a great new online photo editor: PIXLR - which is very similar to Photoshop Elements!

As Gimp is to Photoshop, Pixlr is to Photoshop Elements! Yes, there is a learning curve (as with all graphics programmes - each one is a little different and you just need to get used to it) but it's well worth it. This programme is compatible with Firefox browsers, has lots of useful features like Pixlr Grabber (which grabs all or part of a web image for editing).

Pixlr has some good tutorials (above) and even its own blog - so if you find Photoshop Elements a little too expensive (or don't want to commit just yet) you might like to try this one. I had a quick tour around, and it looks like you don't even have to download the programme if you don't want to. It also has an upload picture facility and you can send pix straight to Picasa etc.

HOW TO TURN A POWERPOINT PRESENTATION INTO JGP IMAGES

2010-12-07T23:13:00.000Z

I wanted to show pictures of an ice storm in Versoix, Switzerland - but these were a PowerPoint presentation, which isn't compatible on a blog! So I needed to turn these into jpg images which I could post about. Here's how I did it:

First, I opened the PowerPoint presentation.

Then I clicked on each picture in turn and clicked 'Save As Picture'. Select the format you want to save your image as, or it will save as an Enhanced Windows Metafile (the default).

It's very important you save as a jpg, gif or png as the Metafile format is not recognised by Blogger. It will reject it, and you'll have to save your images again.

You'll see the results in my post on 1stFloorFlat!

NEW DIGITAL TOY!

2010-11-10T12:42:00.002Z

I love gadgetry - especially when it's free! Take a look at Shape Collage....

This web toy lets you do fantastic collages with a load of images automatically (you can also use text, dingbats etc plus the usual rectangle, oval etc) and looks to be a load of fun. Take a look at the final cat cutout - with around 120 images of cats within the shape.

Enjoy!

2010-10-24T15:19:00.000+01:00

Optical lens - copyright Susie Jefferson

I'm feeling a lot more cheerful this morning, now The Dirty Deed is done (ie: admitting defeat, throwing in the towel, wimping out, Admitting I Was Wrong, falling on my sword etc etc) and have transferred back to Blogger!

The deciding factor was finding these two great widgets, which won't add onto WordPress.com (although they will on WordPress.org if you are happy to pay for your template, pay to host it externally, have a Master's Degree in computer stuff plus the patience of a Buddhist priest...).

The first one is the great toolbar right at the bottom of this blog, by Wibiya, where you can add all the links you could possibly want (and choose the toolbar colour from around 30 options). I think it's a great idea.

The second is the gorgeous little Etsy thingie in my sidebar! Designed by Craft Cult, it's small, cute, beautifully designed.

Click on Widgets on the top toolbar, and choose from 8 really attractive (and totally different) layouts - there's sure to be one to suit you! A total MUST HAVE for any Etsy seller.

Great, huh? I'm a happy bunny again (LOVE new toys!)

WORDPRESS - MOVING BACK TO BLOGGER!

2010-10-23T20:24:00.000+01:00

It's nearly driven me to drink!

It's with an aching head and a lot of soul-searching that I've decided to admit defeat and move my blog back to Blogger.

WHY?

WordPress.com doesn't support a lot of widgets, in particular the Followers widget (can you believe it?) so I have no idea whether anyone is actually following the blog, never mind who they are! So I felt very isolated.

WordPress is very picky over code. An awful lot of the widgets and customisations I love (scrolling marquees, Amazon lists, Ebay marquees, my Etsy scrolling link) won't work - WP doesn't allow java code etc.

Videos (YouTube, Vimeo et al) are really difficult to install. More often than not, the link didn't work, so I had to give up on them.

Customisation: unless I PURCHASE my blog, I can't alter the colour or size of the text. Although WP does allow some customisation, you have to be an expert able to write CSS style sheets to be able to achieve this - and again, I don't think it works unless you buy your blog. I'm self-taught, not an expert, and it really is too complicated for me!

Full customisation - yes, if you buy one particular template (around £150) and also only if you host your blog yourself, ie: site it on a hosting service, paying an annual fee. Then WP will allow you to put in widgets etc, as we know them... to a point... You'd need to read all the whys and wherefores on WordPress.org (not WordPress.com - they are two separate entities!)

Images: yes, they do have a limit. Then you have to pay. Ditto for videos etc. Plus they are difficult to install! Worse than Blogger - you have to set whether you want the pic linked (meaning someone can hot-link your image - so, how secure is that???) plus size, plus position, name etc. And sometimes it opens in another window, sometimes it doesn't (this is sounding awfully familiar...) and sometimes it wants to default into a gallery. Plus it's difficult to get in to edit - I found it easier to delete and start over.

So I'm very disappointed to have to admit defeat.

I can write a bit of code, I can design and install Blogger backgrounds and coding for numbered comments, signatures et al - but I have to say I've had enough. I've given it a good two week's trial, and it's beyond me!

I've sorted my security issues with Picasa by setting my albums (which I didn't know I had) to Private, and will be using LiveWriter more often (see the Links list below this post to read more).

So I've reimported the posts from Techniques (sent to WP) onto 1stFloorFlat and will be deleting the WP very shortly... after yet another redirect message. I'm so sorry for messing everyone about.

MOVING FROM WORDPRESS TO BLOGGER

Guess what? WP will happily import from Blogger - but isn't so happy about you leaving them. However, I found this really helpful app which does it for you!

Download your WP code to your desktop, then browse for it using the button on the app exactly as shown. Once you've got the code in the window, click Convert and download that to your desktop. Go to Blogger > Settings and click Import Blog, browse for the converted code, hit Enter, and that's it! Simples!

Here is the link: Wordpress2Blogger.

MORE ON ONLINE PRIVACY & PICASA

2010-10-05T09:59:00.001+01:00

I've done a full tutorial on how to reset your Picasa settings to prevent your artwork and images from being pirated (see the post below). In addition to that post, here are a couple of important points:

The old editor is being phased out altogether

Many of you are using the old editor, being very happy with Minima - meaning you can swap around your backgrounds for all those freebies out there (including mine on my Blogology page). And you are either nervous of, or plain just don't like the new editor.

Go to your Dashboard, then click on the Settings tab

Right at the bottom, you'll see this new notice

Guess what? They are now phasing this out altogether!

Does this mean an end to all those blog designers out there?

I'd say NO, because I've already worked out how to work with the new editor, and also how to embed the code into the html directly. But it will upset things for anyone using a background and unsure of which templates to use.

Retro images copyright-free from Tack-o-Rama

Well, I'll just delete all my private images off the Picasa album!

Sorry, it isn't that simple! Read on...

Deleting images from Picasa which are also on your blog

A word of warning... if you posted images on your blog: even if you didn't know you had a Picasa album, you do NOW. So go in and change those settings!

Also, every image you post on your blog (even from old posts) now automically goes into your Picasa album - therefore, if you decide to delete an image, it also gets deleted off your blog! So think carefully before you hit that 'delete' button.

I don't have a Picasa album (I don't think...) so how do I find it?

If you have a Blogger blog, you'll probably have been asked to open a GoogleMail or Gmail account, and this address will most probably be the one you use to access your blog.

Go into your mail account, and you'll see a toolbar right at the very top - click on more to access the drop-down menu.

The first item you'll see is Photos - click on this and you'll be able to access your Picasa album(s) showing every pic you have on your blog, and probably a lot more!

Check my earlier post (below) to see how to adjust your privacy settings.

Even if you don't have a GoogleMail or Gmail account, they are still out to get you! After using the new photo uploader in a couple of new posts, go in and see whether clicking on the Picasa option will bring you to a page showing all the images on your blog. I think you'll find it will!

After your nervous breakdown, go in and reset your privacy settings as mentioned in my earlier post.

I'm repeating this post on Computery, as this needs to get to the widest audience possible.

ONLINE PRIVACY & PARANOIA

2010-10-04T15:43:00.002+01:00

This week, my post is a tutorial - very important as it's all about our privacy online.

I'm furious! With the new picture uploader (see my post below) Blogger has now linked Picasa and PicNik - and made all our blog images public by default! This means that ANYONE can access YOUR private pictures.

Thanks to Stephanie at Queen of Dreamz, who followed up on my post below and did a little research then emailed me (I'm eternally grateful for this) here's how to change your settings to protect your privacy - which should be the default setting.

Go to your Settings, either via Google or via Picasa. I've gone there by googling for my Picasa album.

Click on Photo Settings and take a look at those defaults!

Tick or untick as you like - read the options CAREFULLY.

Save, and now you have some peace of mind. Now spamming is even more rife than ever, Google should never ever have linked these albums. In my opinion, this is a dreadful invasion of privacy.

YET ANOTHER BLOGGER CHANGE ...

2010-09-29T23:10:00.001+01:00

When Blogger first came up with the new template designer in Beta testing, they called it Blogger In Draft... and it had a horrible and difficult to use photo uploader. Then this disappeared, and I thought that was the end of it. Now it's BACK... and it looks like it's set to stay. Boo hoo!

HOW DOES IT WORK?

Annoyingly! You CAN load an image from your computer - but some pictures take FOREVER! I wrote a post on my weight loss blog, so you can see how things work.

So my conclusion is: you need to resize your images to avoid a slow upload time. Which means more work for us, of course. The tutorial pix uploaded quickly and without any problems - the image I used on my post took FOREVER to upload, as it was a high resolution.

I also noticed that some images I posted DO NOT open into a larger size. So, although I've said don't mess around with the sizes, for some pix you may need to. I do hope this doesn't mean that Blogger won't keep the thumbnail option - it'll be a royal pain if they do! This will mean checking every photo loads at optimum size - and in the case of tutorials, as large as I can possibly make them.

I'd recommend you look at these tutorials I wrote previously re resizing images for the web, and also take a look at LiveWriter - you'll be able to bypass writing your posts in Blogger, and your pix will be exactly as you load them (one size, but at least you'll be able to add drop shadows and frame effects).

NEW TEMPLATES - INSTALLING & CHANGING

2010-08-30T20:33:00.000+01:00

By now, you'll have seen the new Template Designer facility on Blogger and may have experimented. You may also have a custom background and wonder whether it will work templates other than Minima.

The answer is YES - with the proviso you read this tutorial very carefully first, so you don't lose anything you want to keep on your blog.

Make sure you save your blog template

First thing to do before you do ANYTHING is to save a copy of your blog. This takes seconds - and you may be very glad you did, if you like experimenting with layouts and then save by mistake and lose all your widgets!

CHANGING TO ONE OF THE OLDER TEMPLATES

If using one of the old templates, make sure you Preview (link under the template) FIRST before you apply it, in case you don't like it. Also, you'll be given the option to Save Your Widgets, so make sure you click to save your widgets or you will lose them permanently.

Be aware that any template changes you made to your html (numbered comments, signatures, post dividers etc) will be lost and will have to be reinstalled

INSTALLING USING ONE OF THE NEW TEMPLATE DESIGNER TEMPLATES

The new Template Designer templates show in a split screen as you are working, so whatever changes you make will show immediately. When saving the template you'll be given the option to save your widgets, so make sure you click to Save Your Widgets or you will lose them permanently.

Be aware that any template changes you made to your html (numbered comments, signatures, post dividers etc) will be lost and will have to be reinstalled.

I'VE GOT A CUSTOM TEMPLATE

Q: Can I use one of the new Designer Templates with my custom (or freebie) template?

A: Some work better than others - some want to default the design shown, and some will add a thick horizontal strip behind the header and across the top of your blog background. Preview it first - you may like the result, or you may not. If you don't save it, it won't install. If you did save it, hopefully you saved a copy of your blog to your hard drive before you started playing (whch you can simply reload, no damage done).

THESE TEMPLATES WILL WORK BEAUTIFULLY:

Choose from any of the Picture Window choices.
Choose from Awesome 1, 2, 3, 4 or 6
Choose from Watermark 1 and 2

AVOID:

Awesome 5 (this will give you a white horizontal box right across, behind your header)
Watermark 4 and 5
Simple (all of these will give you a broad horizontal box right across, behind your header)

HERE'S HOW IT WORKS

Stretch Minima

This is one of my backgrounds using the Stretch Minima template - which also works well with other templates, especially the new Template Designer ones.

Now let's change the actual template:

Click on Design - Template Designer - Templates

LAYOUTS: I've chosen AWESOME template No 3

This is the default design for this particular template - you can change this (see tutorial link below)

BACKGROUND: This is the default background. Let's change it.

You can see this is the default background - I've selected NO IMAGE

By selecting No Image some templates will default to the main colours of your blog background, and others will give you a choice of ticking a colour - or Transparent (ie: no colour). So your custom background will show exactly as it should.

LAYOUT: Here is where you can adjust the actual layout (number of columns etc) plus the width of your blog and your footer options (columns, no columns etc)

Advanced options: fonts - sizes, colours etc

ADVANCED: You can adjust the font, the colour, the size etc. Also the default title if you don't want to use an image for your banner or header. In Designer, the area where you make your changes is easy to see: it's outlined very clearly.

More adjustments

Here you can see what adjustments I have chosen.

Final tweaks

If you don't like the colour options shown, click the arrow to the side of a box to bring up a larger box showing colour wheel and transparency options.

HOW TO CHANGE TO ONE OF THE OLD-STYLE TEMPLATES

Older template option

Click on Design - Edit HTML, which will bring you to a new page showing the older Blogger templates.

Thisaway template

I've chosen THISAWAY in the green option. I'm still using my original Stretch background and header, and have only uploaded this template. You'll notice all the fonts etc have changed to the Blogger default for this template.

Template added to same Stretch background

You can see the header size is all wrong! This is a 2-column background with a set width (unlike the Designer ones, where you can set the width yourself).

Adjusting header width to fit your template

I've deleted my header, then reloaded it - this time I've clicked the Shrink To Fit option, so the header fits the background correctly.

The result

That's much better! Now I'm changing the template again - this time to STRETCH LEFTY.

Another template: STRETCH LEFTY

The Stretch Lefty template defaults the fonts etc again, so I'll need to adjust these. I also need to remove the two thin borders around the header area as they don't look right with my banner.

I also have the option of NOT using my banner, and use Blogger's default text for the header. In this case, I might prefer to keep the borders - but make them thicker and more punchy.

Removing Blogger's default borders from around the header

To remove the borders, go to Design - Page Elements - Edit HTML and scroll down until you find the Header section (see pic above).

This is how it will look

Change the numbers - to remove the borders change the numbers to 0. To make them more punchy, make the numbers larger (3px or 5px are a nice size). The two borders don't have to be the same thickness, either.

The result!

I've changed the font size and colour, removed the borders and this is the final result. Minima Lefty has a transparent template, so you see the whole pattern of the design.

Again, I just want to remind you that saving any of these templates will result in your losing any customisation (like removing the borders round the header, for example). You will be prompted to save your widgets - but nothing is foolproof, so if you have loads of widgets, make sure you save your template FIRST.

FURTHER TUTORIALS

The new Blogger Templates
Adjusting headers
Remove header borders

Interviewed!

2010-08-06T20:19:00.004+01:00

Lookie here!

Now featuring..... ME!

I was interviewed by Kathie of Just a Happy Housewife - you can just imagine how happy I was to be asked! Beyond excited!

Here's the interview if you'd like to read it - and thank you so much to Kathie for making my day. I even get a button, which is now proudly displayed in my sidebar (and on Computery as well - I've repeated this post over there as well).

Nothing like overkill, lol.

THE NEW DESIGN TEMPLATE - WIDGET TROUBLE?

2010-06-22T12:46:00.000+01:00

Are you having trouble with your customised widgets?

Anne at El Milagro Studio emailed me, and sent me this link from Rita at Coffee Cup, highlighting a new problem with Blogger's messing around with all the templates since forcibly introducing the new Design Template.

Here's how to solve your problem:

Auto widget
(where the header is put in automatically by Blogger, eg: Labels, Followers, Blog Archive)

I went to my Blade Rubber blog and deleted the Labels widget. I then reinstalled it as a new widget, and moved it under my fancy Labels header (entered as a Picture). Of course it showed another Labels header in the title section - I don't want two, so I deleted it then tried to Save.

I didn't get the following error message: Required field must not be blank - so just went ahead and Saved it. It's fine!

However: you may get the error message (I did for my Visitors widget - at the bottom of my 1stFloorFlat blog). In that case, just type in the code (shown below) and it works perfectly!

Personalised widget
(html widget where you can add your own title - or not - like grab buttons, scrolling marquees, where you may have a fancy header entered as a Picture, etc)

I removed the header from my own grab button - and immediately Blogger will not allow it - Blogger says you have to have a title, and showed this error message: Required field must not be blank
Here's how to make an invisible one!

Copy and paste this code:

<h2></h2>

Put it in the header section of your widgets (worked out by Rita at CoffeeCup) - and it worked like a charm!

Problem solved. Thanks Rita!

GREAT FIX FOR BLURRY/SHAKY PHOTOS

2010-05-28T11:40:00.000+01:00

I get a free newsletter from one of the It sites, and found this great (free) link for you - UNSHAKE. It un-shakes and de-blurs your blurry, shaky photos and pretty much makes them decent pix again.

You'll have to experiment (just a little bit) to get the right settings, but UNshake is 100% better than deleting or throwing those photos away!

Hope this helps!

HOW TO MOVE YOUR LINKS TO A NEW PAGE

2010-05-04T18:41:00.000+01:00

Now we have this wonderful Extra Page facility, you may decide you want to tidy up your sidebar and move some of the links - especially if you have a lot of them in a particular category.

You may have seen articles about how to save your widgets (which works perfectly when you are moving to a different template or blog) but this method does NOT work when you want to take a Link widget from your sidebar to enter into a post or onto your new page.

Here's a very safe, foolproof method. It's slow and very tedious, but you don't have to do it all in one go (do just a few each session). What you do is to create your own text links.

First, create a new page and type in the title of the page, and possibly a little text. You can add pictures too, if you choose to. Treat it exactly like a new post (click Edit to update at any time). New pages act exactly like single posts - except they are static.

THE SIMPLE WAY TO ADD LINKS TO YOUR NEW PAGE

Click on the Edit icon at the bottom right-hand corner of the Links list if in blog view, or click on Edit in Layout view. This opens up the Links list so that you can work with it.

Alternatively, click on every link in your list and open them into a new page (CTRL+click) so you can copy the URL.

Keep your new page open, and also the Links list, so you can transfer them. As you switch from one pane to the other, the list will drop down to your bottom toolbar. Just click on it to bring it up again.

Click on the Edit icon next to the name of the link you want to transfer. This will open it out so that you can see the URL, which you want to copy and paste to your new page.

In the posting box of your new page, click on the LINK symbol on the toolbar- then insert the URL into the URL BOX and type the name you want to show in the box above. Click OK to save the link.

You'll now see the link on your new page.Click Save under the link on the Links list to close the URL you just transferred. If you delete it now, the box will close altogether, and you'll have to go back to your main blog to click on Edit to open it again. Just clicking on Save means you don't lose your list until you are finished.

Keep transferring the links one by one until you are finished (this may take more than one session: click Edit on the new page to open it, then add more links as and when).

Happy? Here's how you link will look:

Transferred all your links to the new page? Now you can click REMOVE on the Links list and it will disappear from your sidebar.

LINKS - TO OPEN IN A NEW TAB/SEPARATE PAGE

You'll have noticed that clicking on any link in the normal way usually means your blog page changes to that link. You may want all of yours to open in a new tab/separate page.

This means that you need to add your own text links, rather than use Blogger's Link facility in the toolbar.

Here's how:

Copy and paste the link below into your new page, as many times as you need (you can add more later) and substitute the coding with your own:

<a href="http://url of link/" target="_blank">Name of link</a>

Get your link codes from the Link list (as above) and subsitute your own URL by pasting it where shown (the first half of the code), then copy and paste - or type - the name of the link in the second half of the code.

Publish when you're done!

PROBLEMS WITH BLOGGER? COMMENTS? SPAM?

2010-04-28T19:51:00.000+01:00

Black&white copyright free images from Tack-o-Rama

Has anyone been having problems with Blogger - trying to leave comments etc? Also, lots of trouble with spam? I'm hoping my post will help you.

Anne of El Milagro Studio just left a comment on my post (2nd below this one re Beansie's new blog)

She says:
Have you been having issues with Blogger or know of anything going on that might be causing it? One of my friends lost her background (I'm thinking it was a freebie) and the rest of us have gone thru blogging HELL trying to comment, load pix etc.....
Since you are the girl in the know....thought I would ask if you had encountered any anomolies.

Funny you should ask me that - I had a panic email from Joey at Antiquemajik, who has had REAL problems - lost all her comments, emails etc - since Thursday!

Now it just happens that I went into Joey's blog to take a look around - and saw over 20 comments (which are lost at her end) awaiting moderation. I just clicked to Moderate, and they loaded with no problem at all. From MY end...

So why are some people having trouble, and I didn't?

My only conclusion is that it's because I am using Firefox as my web browser. I have tried Opera, Safari and Internet Explorer, and in my opinion Firefox is the best there is. The latest version has increased browser security - twice, it's flagged a blog as unsafe and has a Get Me Out Of Here panic button. It also stops pop-ups.

It also has widgets - I adore Colorful Tabs. Which means each web page I open will open up in the same window on a different tab, coloured, so I can see at a glance which is which. MUCH easier to navigate than IE with all the tabs in the bottom toolbar!

Firefox will also remember your passwords for you, which is handy. Plus there's a little star in the url section - just click on that if you want to bookmark something. Talking of bookmarks, you can also install De-lic-ious, which is a (free) external bookmarking site. Public links if you want to share: set to private if you don't. As my computer has crashed a couple of times, and I had to install a new hard drive, I now use this (and Yahoo's Bookmarks) so I don't lose them ever again.

I also advise that you install Yahoo's toolbar for Firefox - it has AntiSpy which is really helpful. Sign up for a Yahoo email address, and use that for your blog - so if you have trouble with Blogger (and Google) you'll still get your comments as they are on a different service.

Spam

It seems to be the season for spammers again. Can I plead with you to go to your Dashboard > Settings > Comments and set your Who Can Comment section to Registered Users. This means their ID is traceable, which helps to act as a deterrent. No more anonymous users, thanks very much!

Next, deal with the actual comments settings.

Set Comment Moderation to Always
Enter your Yahoo email address (don't use your private one - keep that for friends and family)
Word verification: you don't need this if you have set Comment Moderation to Always, as nothing can get past you! You'll get an email with a comment, which you can publish or reject before it even gets to your blog! Or go to your Moderation page and deal with it from there. But if you are having a ton of spam at the moment, put the Word Verification on (you can remove it later when the spam dies down).
Repeat your email address in the bottom box if you want the comment sent to your email account.

Contrary to popular belief, having the Word Verification alone does NOT stop spam.

Spammers simply type in the word and the spam goes straight to your blog! Please PLEASE PLEASE put Moderate Comments: Always on immediately!

Another favourite trick of spammers is to post to older posts - did you notice the Moderate Comments has a default of moderating only if over 14 days - which has to be ticked? These get past a lot of unwary people. So tick the Moderate Comments: Always box. Doesn't matter how old the post is that they comment on - it won't get through.

Backgrounds etc

Now, to deal with the other part of Anne's query re backgrounds & images disappearing - it's either a Blogger problem which should sort itself out - OR it could be the person offering the free background has run out of bandwidth on her account. Her background will be hosted on her own bandwith, so if it's a popular one there could be a few hundred using it. I notice Google now only gives 1gb free image storage capacity - and you now have to pay for every 1mg extra storage. So that could be why.

Change to Photobucket! You get 8gb for free.

I hope this helps!

HOW TO ADJUST SCREEN RESOLUTION ON YOUR COMPUTER

2010-04-27T16:38:00.002+01:00

Black & white copyright-free images from Tack-o-Rama

I had a really good question sent in by Lindart, and also by Tina at Beansie Babbles and Beansie's Blessings who can't see the sides of their blog backgrounds.

It's all to do with your screen resolution - so here is why you can't see the sides of your blog, and what to do about it.

Unfortunately, it's the size of your monitor that determines how much of your background you can see. With my current background, all I could see were the black borders (like a black chain, at either side) as I only had a 17in monitor. Believe, me it was hard designing backgrounds and trying to imagine how they would look on different monitors.

Have a look here: Itkupilli shows exactly the whys and wherefores, and so does JannyPie.

About the MINIMA Template

Just about everyone recommends you change your Blogger template to Minima before adding fancy blog skins. But did you know you CAN use other templates than Minima? I make the column section of my backgrounds wider, so more templates will fit.

JannyPie also uses other templates: Black&White has settings for Minima, Denim and TicTac, and Blue Burst has settings for Minima, Rounders and Dots .

Try them out - but be sure to save a copy of your blog first by going to Layout > Choose New Template. You'll see a link marked Download Full Template, just click this and it takes a couple of seconds for your saved template to load as a desktop icon. If all goes wrong, just reload it! Or Preview before saving any alterations, and Clear Edits.

Adjusting resolution on your monitor

I can't help Mac users here - but I would imagine they have very similar control/adjustment settings.

For PC users, what I would suggest is that you adjust the resolution on your monitor - this will make everything seem a little smaller, but at least your blog background will "fit" better. There should be a way to adjust the controls directly on your monitor.

If that doesn't work (some of the older models you can't adjust) then you can adjust the settings in your computer: click the Start button > Control Panel > Display > Settings.

This is where you can adjust the size and appearance of your display . On my old monitor (17in square) the resolution was set at 1440 x 900 pixels. On my new 22in landscape monitor, I have my settings at 1680 x 1050 pixels resolution.

In Settings, move the slider, and click Preview to see whether the setting suits you, and if you like it you keep it. If not, it defaults back to what you already have.

If the resolution works for your blog background, but your type is a little small, you can adjust the blog in Layouts > Fonts & Colours and click the Larger/Smaller buttons by Text Font etc etc.

For your normal computer stuff: if your desktop icons appear too small now, you can make them larger as well. Click Start button > Control Panel > Display > Appearance, and choose Larger (the arrow at the bottom of the box will probably be showing Normal at the moment). You can also choose another style - eg: I prefer Windows Classic... but you can choose others from the drop-down menu, including some that are automatically larger fonts anyway.

Adjusting the size of your email text

And don't forget you can reset your email in Outlook Express or Office Outlook (go to Properties) and enlarge incoming mail to whatever you are comfortable with, eg: Arial 12pt.

Or just hold down your CTRL key and move the scroll button on top of your mouse - that will also automatically enlarge the appearance of text on your page. So will left-clicking on your mouse (hold the button down) and move the scroll button on top at the same time. Let go, and the type will stay at that size.

Otherwise, you are just going to have to grit your teeth and persevere with only seeing little bits of your blog background. You could always buy a bigger monitor, but I'd try the above solutions first!

Adjust the template background colour

I also advise you adjust your template background colour to reflect the colour of the background you are installing, then if your monitor is adjusted so that you show BEYOND the edges of the blog skin (some blog skins will stop short and show a blank section on either side in landscape monitors as they have been designed for a square monitor) you'll see compatible colour - not plain white. So it will just look part of the blog, as if it were meant to look like that.

To do this, go to Layout > Fonts&Colours, and it will be the very first option you see. Pick a colour that goes with your blog.

DIGEUS REGISTRY CLEANER - REVIEW

2010-04-12T18:12:00.000+01:00

I've been having yet more problems with my poor computer (just over 5 years old) and several unexplained crashes. All who know me are aware I'm more than paranoid re viruses etc, and am very good about using my DiskClean and Defragmenting programmes regularly.

So having had another crash on Friday - for no reason that I could see - right in the middle of my writing my Pink Saturday post (which really made me scream) there's been nothing for it but to get a registery cleaner. What this does is clear out all the unused stuff that accumulates, plus old and out of date stuff, all of which stops a computer running properly.

I dowloaded a Registry Cleaner and found I had more than 1600 errors: odd bits of programme that hadn't deleted etc. To say I'm shocked is an understatement. However, I am very happy to report the Digeus programme I finally decided on has cleaned all this mess up for me. This is one area I am no expert on, and don't even want to know about, thanks. Like driving a car, I really don't want to know what goes on under the hood.

By the way, this works for all computers from Windows 95 (has anyone got one still working?) through Windows XP (mine) to Windows 7 (I'm hoping I may be able to afford this sooner or later... ) . I'll also be posting this onto my Computery site, for future reference.

So I'm a happy bunny again!

UPDATE - FREE PHOTO/IMAGE EDITORS & GRAPHICS PROGRAMMES

2010-04-08T14:26:00.002+01:00

Digital photo rendered sepia in Live Photo Gallery – copyright Susie Jefferson

For anyone in love with blogging, scrapbooking, photography etc, there is always that point where you realise you need or want to alter your images (whether your own artwork or photos, or copyright-free images from the web).

Which means you need an image editor or graphics programme. There are a lot out there (some I covered in previous posts, see below) but things move on fast in web-land, so here’s the latest roundup for you to choose from.

FULL PROGRAMMES TO BUY

These all have a learning curve, and are for the more dedicated digital artist.

Apart from Photoshop, Photoshop Elements, Paint Shop Pro and Serif – all great full size packages at varying prices (all of which have free trial periods if you want to try them), there are also some freebies out there which will also do the job.

FREEBIES

The Gimp – is a totally free open source programme which is as complex as Photoshop (you’ll find free online brushes etc, which will work with Gimp) and has online tutorials. It’s not pretty, but is very powerful – and there are versions for PCs, Macs and Windows 7.

Paint is also free, and is for computers that run Windows. Again, there are tutorials – and plugins.

FREE PHOTO EDITING SOFTWARE TO DOWNLOAD

Photoscape – has great tutorials right on the opening page. It’s a very neat-looking programme that downloads then sits on your desktop, and has lots of built-in special effects. Also a text facility. It’ll do greyscale, sepia, grunge effects, automatic thumbnails. Very nice indeed.

Windows Live Writer is a blogging programme, and when you download you also have an option to download the Windows Live Photo Gallery. This organises the photos on your computer, and edits photos with some basic effects such as sepia, auto black&white, adjust colour, tint, saturation, sharpen and also gives you the option to download more photo tools. There is also an online storage facility (up to 25gb – mentioned further below).

FREE PHOTO EDITING SOFTWARE - ONLINE

No need to download any of these programmes – which saves a ton of space on your hard drive.

Splashup – more complex and sophisticated compared to some. You can do some nice special effects including photo montages, plus add text . No need to download either.

PicNik – aimed more towards scrapbookers, don’t let this put you off as there are some very sophisticated auto layouts, text effects with some very unusual fonts, montage effects, sharpens, brightens and more. Well worth investigating.

Sumo Paint – which also has a strong following, and a dedicated YouTube channel for tutorials etc. Sumo also does a kaleidoscope effect (listed under Distort) which is pretty nifty.

ONLINE EDITING & IMAGE STORAGE

Photobucket is free (up to 8mg I think), then $20 per annum if you go pro (which means unlimited storage). Photobucket also does all the usual photo editing stuff, you can add text, plus special effects like Colour Splash, add picture frames etc.

Photoshop also has an online picture storage facility (free up to 2mg) which is new – and you can add text, special effects etc, share photo galleries etc.

Flickr is Yahoo’s image storage and editor, with a free storage capacity of a gigantic 100mg! Flickr is storage only – but is partnered with PicNik (see comments above) for online editing, so you get the best of both worlds! All for free!

Picasa is Google’s image editing and online storage programme. The image editing isn’t as sophisticated as some but will sort out red eye etc. Free storage up to 1mg.

Windows Sky Drive is Windows Live Writer’s online storage facility – free file & photo storage up to 25gb. Use in conjunction with Live Writer and Windows Live Photo Gallery (tick the options to include them when you install Windows Live Writer).

Creative commons, copyright free photo Flickr groups

OLDER POSTS

I hope this helps you to make your mind up – and if anyone knows of any others they would like to recommend, I’d be very pleased to add them to the list.

BORDERS ROUND PHOTOS IN BLOGGER

2010-04-07T17:09:00.002+01:00

Suzie Button emailed me about the borders round photos in Blogger. I can't believe I hadn't already done a tutorial about this... so here you are.

1) I WANT TO REMOVE THE BORDERS COMPLETELY

You hate the default borders round the photos in Blogger. You don't want any at all! So how to remove them altogether? You'll be glad to know this is a very easy tweak and will only take a few minutes.

In Layout > HTML view, begin by downloading a copy of your blog to your desktop: just in case. No need to click on Expand Widget Template.

Type CTRL + F on your keyboard to bring up the 'Find' box

Copy and paste this into the 'Find' box, and it will highlight in green bringing you down to the correct section of code:

.post img {

Now to get rid of the border:

Get rid of the border by changing this code from:

border:1px solid $bordercolor;

to:

border:0px solid $bordercolor;

Then Preview to see the effect. Happy? Then Save.

2) I WANT TO ALTER THE BORDERS

OK - you don't hate the idea of a border, but it needs to have more punch - and you'd like to change the colour too!

In Layout > HTML view, begin by downloading a copy of your blog to your desktop: just in case. No need to click on Expand Widget Template.

Type CTRL + F on your keyboard to bring up the 'Find' box:

Copy and paste this into the 'Find' box, and it will highlight in green bringing you down to the correct section of code:

.post img {

Change the numbers here:

Increase the size of the border by changing this code from:

border:1px solid $bordercolor;

to:

border:8px solid $bordercolor;

giving you this result:

You can also change the colour from $bordercolor to any colour of your choice. Just remember to add a hash mark: # and follow this with 6 letter/numbers, which are the code for the colour (eg: white is #ffffff and black is #000000).

which gives you this result:

Here is the link for web-safe colour codes you can try. Firefox users can also download Colorzilla.

RELATED POSTS

THE NEW BLOGGER TEMPLATES

2010-04-02T21:45:00.006+01:00

Blogger has been doing a lot of work behind the scenes and has just come out with a completely new editor, with a bigger choice of backgrounds.

As with everything, there are pros and cons, so I'll try to cover everything for you in this post.

THE DOWNSIDE - READ THIS FIRST

Before you start, you must realise that if you have a special background or header image (which you may have commissioned, or it may be a freebie) YOU WILL LOSE IT. It can't be helped: the code will override any previous background and header images.

If you have a special header, I'd advise you to copy it to Picasa, Flickr, Photobucket etc, so you will be able to reload it from there. Unfortunately, this won't help re backgrounds. They will be GONE. Then again, if you are reading this, you are obviously thinking about a new look anyway!

WIDGETS

You will be asked if you want to save your widgets, which means you can - but I would still advise that you check previous articles on how to back them up ... just in case.

HTML TWEAKS

If you have played around in the html of your blog, adding a signature or numbered comments, removing the border round pictures etc - YOU WILL LOSE ALL THESE as the new template will overwrite all of this.

IMAGES

The main difference with the new Template Editor is in uploading your pictures: older blogs won't have their actual layouts or headers affected unless you change them yourself, but the Picture Uploader will default to the new one. Also, please be aware that if you have more than one blog, this will affect ALL of them.

I found I couldn't upload pictures direct from the My Pictures folder in the hard drive on my computer - this format seems to be happy only to upload via Picasa or another online site, eg: Flickr, Photobucket. Trying to upload from my computer on 6 separate occasions caused it to fail.

Note added 8th April 2010

Google seem to have fixed this now, you'll be glad to know. (New programmes always have a few glitches in the beginning).

Of course, if you install Picasa on your computer, this means you can upload any image... but it also means they may become public if you are not very careful with the settings - which you might not want. (Also, it appears that Picasa has a finite size for free storage - around 1mg - more than that, and you have to pay!)

NOTE: Installing Picasa will automatically organise all your pictures into Picasa's image gallery - on your computer - where you can arrange and store all your photos in different folders (Family, Blog etc). You'll be able to upload automatically, straight from your computer, using the default setting on your blog's Image Uploader (the little picture icon) on your post toolbar with no problems whatsoever.

I am pretty sure this is a bandwidth issue: the new templates are so customisable and therefore so complex, that they must use more bandwith. Therefore, hosting your images on an external site won't use any of Blogger's bandwidth (unless it's Picasa) and your images upload like a charm. Personally speaking, I have hundreds if not thousands of images, and to have to upload a photo to an external site every time I want it to go on my blog would be a real pain - but for those of you who use external storage anyway, this won't present any problem. In fact, it would be business as normal! Just upload the image code as you normally would. It may also be worth installing Picasa, and limiting the pictures you leave in there, or upload to your blog, and keeping the rest of your images, copyright-free pix, digital scrapbooking etc, totally separate. That way you'd get the best of both worlds.

Free image storage sites, apart from Google's Picasa, are:

Flickr (owned by Yahoo)
Photobucket
PicNik
PictureTrail

and other similar sites. Just google for them.

THE UPSIDE - HUNDRED OF POSSIBILITIES!

Install Blogger in Draft and your blog can be customised in so many ways. The possibilites are stunning!

Go to Blogger in Draft to activate.

I've found this can be a little buggy: if you go to your Page Elements > Layout view and find you don't see the icon, click back to your Dashboard then back to Layout again, and you'll see it just fine.

There are four main design layouts, and under the thumbnails you'll see several variations for each design layout - so you've already got around another 20 layouts in all. I have chosen the Awesome Inc template, and the third option shown underneath.

The second step is to start customising! Click on Background in the menu on the left. The first thing you will see are suggested colourways for the template - so you could change to blues, greens etc. This varies for every single template! As you are beginning to see, there are hundreds of permutations...

Click the arrow beside the thumbnail next to the menu bar - this brings up a fly-out menu with a scrollable list on the left, showing all the categories you can choose from, with thumbnail images on the right.

I simply click on the thumbnail of the background image I like, and hey presto... OK, I'm not keen, so I'll scroll down to a different category and see if there is something else I like better.

Yes, this is much better. I'll stick with this one. Now to start customising the layout.

Click on Layout in the menu on the left, and then select the layout for the blog - how many columns, whether on the left or the right, etc. Your choice highlights in the box above, and you immediately see the result in the split screen below. Preview to see this in Real Life (I'd suggest you save the layout now, if you are happy with it).

Now to go on to customise colours and size of text etc...

Click on Advanced in the menu on the left, which brings up all the categories in the main menubar. On the left are all the text/widget/header choices with a scroll bar, and next to this is are the fonts you can choose for each section. Just below, you can choose the size you want, plus Bold and Italic.

To the right are the suggested colours that match your blog, and in the little text boxes at the top you'll notice colour codes: these start with # and are a combination of 6 number/letters. Next to these are little arrows - click on these if you want to pick a particular colour you don't see in the main section.

You can see some of my changes here. Every category you choose in the menu (eg: Post Title shows in the pic above) is outlined/highlighted with red dotted lines, so you can see where you are. Notice I've also chosen my font (Verdana) and the size.

I've also customised my post background colour, as I wasn't keen on the white. I'm happy - so I just need to click Apply to Blog, and I'm finished!

My finished customisation: I changed the background three times before I settled for this one, then I changed the layout. I changed the Blog Title colour to white, 70pt size and the Post Title to gold, 42pt size. The background for the posts has changed from white to ochre, and the Page font to 16pt (all Verdana).

FINALLY

There is still a way to add a customised background image, but these will need to be applied to a particular layout individually - no more swapping backgrounds daily or weekly with these new templates, I'm afraid! But if you are happy with what you see, then go for it.

If you want something totally individual to yourself - especially if you have paid for the design - then don't change to this editor - even a wide 3-col background doesn't fit comfortably although Stretch templates will work. The biggest issue for the blog designer will be applying their copyrights for any free images, as these don't position happily either. As I see it, the only way it will work properly is to download the entire package, background included, and the background will only fit that particular template.

Therefore, if you love variety in your backgrounds, EITHER go for the new template editor OR stick with the old editor and choose Minima - the most adaptable template out there. And the one which all those wonderful freebie backgrounds will fit.

TRANSPARENT BACKGROUNDS FOR IMAGES & TEXT

2010-03-19T16:57:00.003Z

An online friend asked for some help re getting transparent images to show up properly on her blog. In particular, she wanted to make some blog buttons and text buttons, and these kept loading up with a white background. So I thought it well worth doing a little tutorial.

Original image

Transparent image (png) uploaded directly from my computer

Transparent image (the same png file) uploaded from Photobucket

Several people who have emailed me have been puzzled that their text images, carefully saved as gifs, don't seem to work any better than pngs or jpgs- if they upload at all. Yet their computer books and lots of online tutorials tell you that you should save text as a gif because it gives the sharpest image.

OK... this is where we lose our tempers with Blogger, just a little. I've found that Blogger doesn't like gifs. I don't know why, but I THINK it's because the file sizes are huge: denser somehow, even when the image size is reduced.

So here's a simple down-and-dirty way to get images with a transparent background with the least amount of hassle. It may not be pretty, it may not be what all the books tell you - but it WORKS.

1. Open a new document, and set the background colour:

I have the (very old) Photoshop 7 programme, and it gives me 3 choices:

Background colour (which would be whatever the last colour was in any older document)
White
Transparent

Choose Transparent.

Layer any artwork you want onto this, then MERGE the layers. Don't choose Flatten as this will turn the background white. (If you need to get rid of the backgrounds, see the section below).

Then do any adjustments, like size, brightening the colour or sharpening the image (reducing the size can alter how the colours look) and if you've done a few adjustments, you need to MERGE again.

Save as a png.

Upload to Photobucket, which is a free image hosting site. Why? Because for some reason, transparent files uploaded directly from your computer to Blogger end up with white backgrounds. Why? I honestly don't know. But I do know it happens a lot (found this out when uploading my own headers to my own blog via my own computer). If you upload an image file from Photobucket, the image stays transparent.

2. With an existing image:

Looking at this little rose, it's on a coloured background. If I layer this onto my transparent background, I will still have all this coloured background showing. So how do I get rid of it?

There are several ways: using the Extract or Pen tools, which need a bit of practice. However, here's my get-the-job-done solution:

Click on Layers in the toolbar section to the right (this will be very similar in most graphics programmes) and you'll see the background layer named in the Layers pane.

Double-click on the title, which brings up a box (or may open the box in the Layers pane, depending on your graphics programme) and you can then change the name, eg: rose. This means you can now do stuff to that background layer (which you can't when it's the very bottom layer as it's locked. This is how you UNlock it.)

Now click on the Magic Wand tool. Click on the background surrounding the rose image, and you'll get those 'marching ants'.

Click Delete, and the background will go transparent.

Do any cropping, rotating, resizing, colour enhancement etc and MERGE all layers then Save As as a png.

If creating a scrapbook background, multi-image collage etc, create a new transparent document and open any other images you want to use. Work with each image in the same way then drag&drop to this new document. Each will add as a separate layer (you'll see them in the Layers pane).

Once postioned and sized as you want them, MERGE all layers then Save As as a png (it's always a good idea choose a different name and save as a different document, thus preserving your original images).

TEXT

For text, do exactly the same thing: create a document, type a text layer, crop it to size and save it as a png.

For text on top of an image, create a text layer - and don't forget to MERGE when you are finished. Save as a png.

RE Blogger, Photobucket etc, yes - gifs do seem to cause problems.
So save all your images with transparent backgrounds as pngs.

TROUBLESHOOTING:

You ARE resizing these images to 96-100dpi as well as the actual pixel size, aren't you? (see my picture at the top of this article). If you aren't, that could also cause a problem and also make your blog load more slowly.

RELATED TUTORIALS:

SPELL CHECK?

2010-02-26T10:43:00.000Z

Terri left a comment on my last post about Blogger's new editor and the disappearing spell check facility. I know a lot of people are missing it!

I decided to investigate a little, and took a look on the Blogger help groups etc, and the concesus seems to be that you either download IE or Firefox's own spell checkers, or revert to the old Blogger editor. NOT satisfactory!

Personally, I'd hang fire for the moment as Blogger seems to be adding new widgets all the time - the New Page facility appeared out of nowhere just over 2 weeks ago. And there are thousands of complaints about the spell check disappearing.

Meantime - the solution!

If you download LiveWriter: for PC or for Mac - it has a spell check facility built into the programme (click Tools on the top toolbar when in LiveWriter) which saves a load of headache.

Hope this helps!

FOOLPROOF PHOTO POSITIONING IN BLOGGER

2010-02-22T13:39:00.002Z

This picture entered using LiveWriter, medium size, drop shadow

Does this happen to you: You’ve written an item, put a picture in the post, put a caption underneath – and then publish, to find everything has moved around?

Great blank sections - or even worse, all your carefully placed text all over the place, wrapped around an image with some underneath, and it all looks a total mess?

I've finally worked out how to solve the "photos where you want them" problem.

Update Blogger to the new editor if you haven't already (Settings > Basic - go right to the bottom).
Write your post, and click the position where you want the photo to go (they always used to load at the top, but now will go where your cursor is).
Click on the photo logo on the post toolbar and browse to find the picture, then click Enter - the picture will go in the centre of your post - you are then given the option of deciding where you want to place it (left, centre, right) and the size.

Don’t alter placement or size – yet

DON'T alter either placement or size. Do a carriage return (enter key) to go down a space and then type any caption you want.

Go down another space and continue writing your blog.

If you want to reposition, go back and do it. Don't alter the size unless you have to (you'll get the optimum size for the thumbnail anyway) and the image and caption should stay where you want them.

If you alter the position of the image as soon as you enter it onto your blog (say, to the left) the text will immediately wordwrap to the right of the image - then if you want to add a caption it entails the endless publish/edit/tweak/publish cycle, over and over. (Does this show up as entry after entry on our Reading lists? Can anyone tell me?)

Using LiveWriter – and why

If you want to add a ton of photos, alter size and placement to suit, this is foolproof but takes longer: download Microsoft LiveWriter: http://home.live.com/

Like everything, there are advantages and disadvantages: LiveWriter's downside (to me) is that you don't get thumbnail pix which you can then click on to enlarge. And if you try to edit in Blogger after publishing, the post defaults back to the Blogger problem of text/photo/publish/edit again.

Picture entered in the post in Blogger (thumbnail) & the whole post copied to LiveWriter

But if you want big pix, or a dropped shadow, or want to add copyright info - you'll love it! You can just get on and write.

My sneaky solution for perfect picture placement

HOWEVER - I have gotten around this by combing the two programmes in a sneaky way...

What I do now for complex posts with lots of pictures is to write the post in Blogger and position the pix more or less where I want them, then right-click to Select All > Copy whilst still in the post and BEFORE publishing, so it's still in the draft stage. I paste it all into LiveWriter (in normal view, not html view) then do any adjusting there, then publish.

This gives me all the advantages of LiveWriter (position, more freedom re size of text etc) and yet somehow LiveWriter keeps Blogger's thumbnail capability. So I get the best of both worlds.

So when I publish, I have posts and pix that display how I WANT them to!

I’d be very interested to hear if anyone else has tried this, and what you think of the idea – whether it’s the perfect solution or if you’ve come up with a better one.

WRITE YOUR OWN GRAB BUTTON

2010-02-17T13:29:00.001Z

This tutorial comes by special request from Stephanie at QueenofDeamzwho asked me how to write her own grab buttons.

You have a choice of two styles - just the picture, with code underneath, nice and simple - or grab code in a scrolling box, where you can control the text area by increasing or decreasing the number of lines and the pixel width of the box itself (I’d recommend a maximum of 200px, to fit most sidebars).

WRITING CODE

How I actually learnt was to copy other people's code and keep overwriting it, posting it to my blog and see if it worked. I then downloaded a free html editor from CoffeeCup.com and practiced in that. This tutorial is written using the CoffeeCup editor, so you can see exactly how it all works.

Your main problem is getting the code to show up. You can't just write the instructions as you see them, as any web site or blog will read them as commands.

One way is to create a text box in Photoshop and then save as a gif, treat it as a picture.

The other way is to substitute text for symbol, ie: every time you see this < you have to write it as < and every time you see > you have to write it as > …. you see? Writing this, Blogger has immediately changed it so all you see are two lots of < and < etc.

This is what I actually wrote:

And how it works in Real Life. The code with a green outline is for the first option, a picture with grab code underneath.

The code with a blue outline shows a picture, then grab code in a scrolling box with number of lines and width of box already specified.

The code in red is the image itself.

This is how it looks in the Preview pane, so exactly how it will show up in your blog or website.

The top picture is Option 1, the picture with just the code underneath (the box outlined in green). The second picture is Option 2, the picture with the grab code in a scrolling box.

You need both sets of code – the first half of the code is the picture, which repeats with the code written again where you have substituted the < symbols with the & codes.

THE SIMPLEST WAY

The easiest way of all is just to copy the scrolling widget code from one of my images on the right sidebar, and substitute your own code!

In other words, the first bit where it says href=' is where you'd put in the site you want to link to (your blog address) and the second part where it says src=' is the source of the image: in this case, where my picture is on Photobucket. Open a free account at photobucket.com if you don't already have one.

Leave everything else as it is, and the scroll bar and picture will show up - but with your image instead.

Troubleshooting:

If your image doesn't show, have you left any gaps between the " and " symbols?
Have you forgotten to delete the [IMG] and [/IMG] code?

I hope this helps – email if you have any queries. I look forward to seeing amazing grab buttons all over your blogs!

CUSTOMISING A READY-MADE HEADER

2010-02-16T18:07:00.004Z

To CUSTOMISE a ready-made header:

Left-click to bring the header up to the full size
Right-click to save the header to your own computer

RECTANGULAR HEADER - SQUARE OR OBLONG

Open in a graphics programme.

Add a text layer on top - any fancy lettering you want (there's loads of free font sites listed on Computery, or else google for free fonts) and then flatten the layers. Crop if you need to.

Save as a jpg, then go into Header in Layout, and browse for your header.

Tick the Instead of Title & Description box, and upload.

IRREGULARLY-SHAPED HEADER

This could be an oval, or have a scallop or lace edge edge etc, and will have been created on a transparent background.

Create a text layer, type in whatever you want, then MERGE the background layer. Don’t flatten it, or the background will go solid white just like a jpg. Don't know why, but it does.

Loading a png image directly to your blog from your computer often seems to do this – again, I don’t know why (and it doesn’t happen every time) but it does happen. If you have a white background anyway, it doesn’t matter – but it can look really awful if you have a dark or patterned background.

Hence you need to host your header on Photobucket to keep the transparency around the image:

To do this, open a free account with www.photobucket.com and adjust the upload sizing of the files. You need to copy&paste the [IMG] code (remove both [IMG] and [/IMG] codes) into the header box.

Tick the Instead of Title & Description box and upload.
That's it!

You might want to remove the borders around the header - or make them thicker... If so, read this tutorial.

You also might need to move the header over a little - it can sometimes throw to the right (a Blogger thing, to do with their default header margins) or even move the entire header down a little - another easy fix! Just read my tutorial which will tell you how to position your header exactly where you want it.

ADJUSTING & CENTERING HEADERS IN BLOGGER

2010-02-16T17:26:00.007Z

I've had a few queries about headers - so much so, that I think it's worth a full tutorial!

CENTERING TEXT

When using a ready-made header, you may want to use Blogger's own header text and bye-line. Or you may have downloaded a header, then added your own title in a fancy font.

Unfortunately, the placement defaults to Blogger's own measurements and borders, so may look too high, too far to one side etc. Here's how to adjust it (don't forget to save a copy of your template to your desktop first.)

ADJUSTING VERTICAL PLACEMENT

If the text/image is too high up, you'll need to bring it down.

I’ve highlighted the padding (default setting is 15px) so try adjusting to 100px and click Preview to see how it looks. If you are happy, press Save.

Then go on to make any horizontal adjustments necessary.

ADJUSTING HORIZONTAL PLACEMENT

If the text/image isn't centred properly, do this:

Copy and paste the text below into the 'Find' box (type CTRL+F on your keyboard and it will appear just above your lower toolbar). Paste the text into the box and it will highlight in green for you:

#header img {

Then copy and paste this piece of text into the code...

position: relative;
left: -20px;

... just above the { symbol.

Or copy and paste all of this if it’s easier for you:

#header img {
margin-$startSide: auto;
margin-$endSide: auto;
position: relative;
left: -20px;
}

It should look like the pic below (make sure you don’t have two { symbols). Preview again, and if you are happy, Save.

Preview to see how it looks, and keep adjusting the numbers until it looks right.

-25px will bring it over even more to the left, -15px will move it a little to the right again, etc.

FOR THE NEW BLOGGER TEMPLATES

The code is slightly different. Look for this:

.Header {
margin-$startSide: auto;
margin-$endSide: auto;
}

and add this:

position: relative;
left: -14px;

to get this:

.Header {
margin-$startSide: auto;
margin-$endSide: auto;
position: relative;
left: -14px; }

Again, adjust those figures to suit your blog: - moves the header to the left, + moves it to the right, and the numbers are the amount you need to shift it.

HOW TO SAVE EVERY SIDEBAR ELEMENT

2010-02-14T12:45:00.002Z

Copright-free image from Tack-o-Rama

Here's the most brilliant tutorial from Smitten Blog Designs, showing how to save EVERY SINGLE sidebar element, if you are doing major changes to your blog.

I highly recomment you click Actions at the bottom toolbar of the article, and save to your computer as a pdf so that you can refer to this for ever.

Best item I've ever seen on the subject!

CHANGE YOUR TEMPLATE, KEEP YOUR WIDGETS!

2010-02-13T15:18:00.002Z

I just found a wonderful tutorial for you - how to change your Blogger template without losing all those 3rd party widgets (links, clocks etc) we've so painfully collected over time.

I couldn't improve on perfection, so here you are, courtesy of Yummy Lolly.

REMOVE/ALTER HEADER BORDERS

2010-02-12T13:37:00.002Z

This is a simple, quick fix - how to remove those lines around your header. Especially useful if you have a fancy header with pictures and custom fonts.

Go to Layout > Edit Html and save a copy of your blog before you start (download it to your desktop). It only takes a second.

Click CTRL+F on your keyboard to bring up the Find box and copy&paste this code: #header-wrapper
into the box, which will bring up the section you want, highlighted in green.

Change the border: 1px to border: 0px in both sections shown, and that's it - job done!

Of course, if you want a thick border you just do the same - but in reverse. Change the border: 1px to border: 6px, or whatever thickness you want. Preview first, then save.

PAGES - A NEW BLOGGER WIDGET

2010-02-11T14:11:00.006Z

I'm really excited! Blogger has just published a new widget - Pages - so finally, FINALLY those who love Blogger (I do) can have all the extra pages we want, like WordPress has. So our blogs will act just like a website.

I know you're all looking at my links and thinking, well, Susie's doing this already - but I wasn't. I was creating each page as a separate blog and then linking these to my main blog, to act like separate pages. Which means they all show on my Dashboard - and it can get quite confusing!

So - what's all the fuss about re the new widget?

You can add up to 10 NEW PAGES which will all link under your header.
You can have the links horizontally under the header, or vertically and in your sidebar.
It's Blogger, it's easy to work with, nothing new to have to learn.
It's foolproof - and if you don't like it, just delete the page.
No coding involved! Hurrah! We can ALL do this!
Each page will be an exact copy of your blog, with the same background, sidebar widgets etc.

Here's how:

OR - DO IT THIS WAY

Click New Post or go to the Posting page. You'll see a new header: Edit Pages.
Click either New Page or Create A Page.

Then name your page, write a post, set your Comment Moderation preferences and Publish your new page!

This is perfect for a fuller About Me page, or a gallery of art swaps, all on one page etc. I'll probably do a page of links, with pictures or something.

Lilly at I Love The Way She Blogs also has a tutorial about the new widget which you might also want to read. She has a slightly different slant on it - remember: this is brand new and takes a little getting used to, to appreciate everything you can do with your new page facility. If I see any other tutorials on this, I'll add them as well. It's always nice to get everyone's opinions on anything new.

SAFETY FIRST

I highly recommend you Moderate Comments but do NOT tick the Show Word Verification box as well. You don't need it if you Moderate Comments, as nothing can get past you without your seeing it (you'll get an email - which you can accept or reject on the spot, without having to go via your Dashboard).

Continually typing in those codes is a royal pain. Plus - spammers are not deterred by typing in a code. And I can't think of anything worse than typing in a code and the comment is then published immediately - without the blog owner even seeing it. This is how all this spam and other nasties can get through, unfortunately.

Have fun with your new super-dooper new pages!

BLOG TROUBLE: SPAM, POP-UPS AND BLOCKED COMMENTS

2010-02-11T00:10:00.002Z

I got an email from Julie, asking me if I'm able to help her. Her blog has been compromised:

"I seem to have a virus on my main blog page. Advertisers are trying to get in. The page comes up, but immediately starts downloading all these advertisers and the page goes blank, I can go to my dashboard, new posts, etc. But I cannot get on my main page. Please email me as I can not read my comments."

I emailed Julie back, then thought others might be experiencing the same problem. This is what I have suggested - and if anyone out there has any ideas, I'd be very grateful if you'd leave a comment!

My solution:

1. Update your antivirus and then run a complete check.

2. Install Firefox.
3. Install Yahoo toolbar
4. Clear your cookies
5. Install MalwareBytes

Are you using Firefox as a browser? If not, I'd download that immediately, and also install the yahoo toolbar. Which has an AntiSpy thing you can run (takes around 4 seconds usually, but may take longer in your case. See if anything comes up and if so, click Remove All. (I aways run this when I've had a session of site hopping, to delete any cookies and spyware sites might try to put on).

Firefox also has widgets - it'll come up automatically on the intro page, or you can go via Tools > Add-ons > Browse Add-ons > Browse All Add-ons to get to the main page, where you can see all widgets listed. This is on your top toolbar. Try downloading AdBlock Plus (free of course). Firefox also has a pop-up blocker which comes with the package. It's a lot safer than Internet Explorer.

Also on the top toolbar, in Tools, using Firefox as the browser, you also have these options: Start Private Browsing (so you can blog-hop etc without all these advertisers putting cookies on your site) and the most important one, which is to clear your cookies.

I think the cookies are your problem - clear by going to Tools > Clear Recent History and use the drop-down menu to clear Everything. This unfortunately means you'll have to put all your passwords in again, but Firefox will offer to remember them for you, so at least you'll only have to do it once.

I'd also recommend downloading Malwarebytes in addition to your normal virus checker, as it looks for different things that the other virus checkers don't always catch (especially those masked antivirus ones where they say your firewall etc doesn't work, and tries to sell you an antivirus - and which pops up quite aggressively onto your computer screen even when you are not online). Maybe this is your problem? It's actually a keylogger, so it's even more important you change all your passwords. And once you are clear, and all is OK, go in and change all your passwords again. Write them down by hand, don't keep a copy on your computer.

I use the free version (always update for the newest stuff before you run it) and it's excellent. It's caught stuff Kaspersky and Norton haven't - the "antivirus" one in particular. And it will delete trojans.

Why don't you try this as well:

Save a copy of the blog to your hard drive: Layout > Edit html > Download Full Template, and then run MalwareBytes AND your normal antivirus software, which will also check the actual blog template for any viruses. So you'll be able to reload the blog (Layout > Edit html > Browse - the button is just under the Download Template) knowing it's safe to do so.

But you will still need to delete those cookies!

If none of this works, but I am very sure it will, then you'll have to go to the Blogger help site and see if there's anything else you can do. I am not 100% sure about this - but deleting your blog and then reactivating it might also work (only as a last resort once you've tried everything else I've recommended).

Once you are clear, you need to take a look at your settings to stop this happening again. Go to Settings > Comments and tick the Moderate Comments Always box. It is NOT sufficient to put on a word verification as the spammers will enter the captcha letters and then the comment will go straight onto your blog anyway - including all the pop-up stuff!

You absolutely must have the Moderate Comments put on, and you might also want to create a Yahoo email address so anything from the blog will go there, rather than your home email address.

In fact, you don't need Word Verification at all if you have the Moderate Comments box ticked, as nothing can get past you!

You'll see a comment come in as an email (this is what I have set up) so you can reject the comment straight away without needing to go to your blog - which stops all this crap immediately. Clicking on the comment in your Dashboard to accept/reject can actually activate some of this stuff!

You might have noticed a previous post where a spammer had hijacked one of my yahoo addresses - I simply deleted this off my system, and used a different email address, and all is well again. And of course I changed all my passwords... just in case...

I hope this helps - and if anyone else has come across this problem, and found a better solution than the ones I have suggested, please let me know so I can post it here. Thanks everyone.

SCROLLING MARQUEES

2010-01-03T21:20:00.016Z

This is a fun one to do - instead of having every blog button in a separate box, straggling down your sidebars, you can neaten them up into one scrolling marquee.

You can adjust this so the box scrolls upwards or down, and also adjust the speed and the width of the pictures. This is great for grab buttons, blog awards, favourite sites - and the buttons are clickable too!

First, go to Layouts and add an html/javascript box - this is where you will put your button codes.

Next, construct your scrolling marquee.

Most blogs will have a sidebar between 180px and 220px wide, so you don't want the marquee to be wider than that or it will stick out into the blog background.

You also don't want the marquee to be too long - as it will take forever for the pix to roll round, and you'll have a lot of blank space. So, if you have a lot of buttons to add, you might want to make it 400px in height. If you only have a few, maybe 250px high will be enough. You can always adjust this later.

With the html/javascript box open, put your title in the top section.

Copy&paste this code into the top of actual box.

<center><div class="textwidget"><marquee direction="down" width="200" onmouseover="this.stop()" scrollamount="5" onmouseout="this.start()" height="300" align="center">

(This is the start of the script.)

Give yourself a few spaces, then copy and paste this code at the bottom of the box. (This is the end of the script.)

<marquee></div></center>

Button codes will go in between these two codes, like this typical grab button code:

<a href="http://1stfloorflatblogology.blogspot.com/"><img border="0" src="http://i385.photobucket.com/albums/oo299/susiejefferson/b2d7dab3.jpg"/></a>

Just keep adding as many buttons as you like. However, each button code you add MUST start with <a href= and end with </a> or it won't work.

If the buttons are too close together when scrolling, separate each block of code with either of the codes shown in the pix.

TROUBLESHOOTING

Making a scrolling marquee is easy if your links are grab buttons, because they will have all the coding for the button done already.

But what happens if the buttons are only pictures - without any code? Where you inserted a picture widget and put the url in the little box above, and entered the picture from your computer?

Don't panic - there IS a way...

Construct your marquee in the usual way, inserting an html/javascript box into your sidebar. Put the code in at the top and the bottom, leaving a big space in between where you'll put the button codes.

Click to edit the picture link, which will open the link box for you as you see here.

Copy the url and put this in the first part of the coding (the address of the link) starting with:
<a href="http and finishing with ">

Right-click on the picture and click Copy Link Location, then paste into the second part of the code, beginning src="http and ending with /a> (the source of the picture or object). That's it!

SPACING PROBLEMS

Normally, putting a space between each picture is easy (see the codes in the illustrations).

This works beautifully with blog buttons, as they all tend to be made pretty much the same size (a little smaller than the average sidebar, ie: 180px - 220px, depending on the template). But what if you are putting odd sizes in your marquee? Some very narrow... and you want to put some text or a caption underneath (say, blog awards or cards and tags)...

Then your spacing is all over the place, as you can see. Making a space doesn't always make the caption go underneath, if there is room for it to go to the side.

This is when you need to put in a line break.

For a very narrow piece followed by a wide one, you might want to put in a break after the picture, then two (or more) breaks before the next section of coding.

THERE'S NO URL!

Another problem you might find, when transferring your picture into a marquee from a picture widget - is that you loaded it from your computer at home, and therefore do not have a url.

Again, there is a way around this. This time, when entering the first part of the code - just leave the address bit blank: the bit that fits between the two " marks. Just don't leave a space in between them.

Enter the picture by right-clicking the Copy Link Location into the second section, as before. The code will look like this:

<a href=""><img border="0" src="http://i385.photobucket.com/albums/oo299/susiejefferson/b2d7dab3.jpg"/></a>

I'VE GOT TONS OF BUTTONS TO ADD

You have a lot of buttons to add - it's going to take forever! Well, it is tedious and you do have to pay attention, as a space between a section of code, like this: " http will break the code and stop it working.

But you can speed things up by writing one entry in full, with spaces or breaks where you want them, then copy&paste this several times. Then go back in and amend the urls to the addresses you need.

Have fun!

HOW TO PUT A YOUTUBE VIDEO INTO A BLOG POST

2009-12-05T23:36:00.002Z

This one's specially for Spencer at Bellamere Cottage - who is still having trouble inserting YouTube videos.

So I bet if Spencer is having trouble, a lot of you are as well! Therefore it's time for another little tutorial...

If you see a video on another blog that you like, click the icon at the bottom right corner so it takes you to the YouTube page (where you have the choice of size and background you might like to import to your blog). I prefer to do this rather than copy the code off another blog, as it seems to be clearer somehow.

Click on Embed Code to bring up the selection box.

Copy the YouTube Embed Code. Return to your blog post

Click on Edit Html in your post layout, as show in the picture. The tab is right next to the Compose tab. This brings up the post in html view.

Paste the code into the blog where you want it to be seen.

Publish Post when you are finished.

And here you are!

FONTS FONTS FONTS

2009-12-03T23:07:00.008Z

I've had an email asking me how to change the colour of your fonts - and also how I get the fonts I use in my headers.

ADDING TEXT IN A GRAPHICS PROGRAMME

The answer to the second part is the easiest: if you download free headers and save to your My Pictures folder, or if you create your own headers, then all you need to do is add a font layer (also known as a vector layer) in your graphics programme, and save it as a jpg. This will flatten the layers, and the titling and the header will become one unit - which you can then upload into your header box.

If you download a header which is a png file instead of a jpg, this is because the outer edges of the document are transparent , and your background colour shows through (eg: an oval header). If it was a jpg, it would show on a white background just like a transparent image - but if you have a coloured background, it would show as a white rectangle with an oval image.

SO: if it's a png and you add text using your graphics programme, you have to flatten the layers.

But in this case MERGE the layers (don't flatten them) and when you save as a png, your header will still have a transparent background. If you flatten the layers, the background will go white. If you save as a jpg, the background will go white. So merge your layers and save as a png.

FREE GRAPHICS PROGRAMMES

I recommend you read my previous article
Splashup
The Gimp
Photoscape

CHOOSING FONTS

If you create a header or save a pre-made one and add the text yourself, you can choose any font you like. Have a look through the links in the sidebar and see if you can find one you like, and download it. There might already be one in your fonts folder, so always check that first. I'm a sucker for free fonts - can't help myself - so there are lots of links for you to chose from.

COLOURED FONTS

If you want to change the colour of your posts as they appear in Blogger, it's easy. You might want to read this older post of mine re background colours and fonts, for an overview. I always match my colours when I change my blog backgrounds and headers.

Go Layouts > Fonts and Colours and the page will open out for you, showing a split screen. If you want to see this better, press the F11 key (very top of your keyboard) and the page will open out the full height of your monitor (press F11 again to exit). I like to see my colours up close and personal, lol.

Scroll up and down the box: you'll see all the colour changes are listed at the top, with the font variations further down. So at the top, you can set your post title colour, for example - then scroll down to set the font style (Arial, Verdana, Times etc) and whether bold or italic. And the size.

If you want to customise your fonts even more, I recommend this excellent tutorial by Kevin&Amanda. This is for experienced bloggers only, as there is a lot of work to do in the html - and you need to follow every single step very carefully.

HOW TO RESIZE IMAGES FOR THE WEB

2009-12-03T22:43:00.003Z

I've had a couple of queries on how to resize photographs and scans for the web.

Blogger does give you the option of small, medium or large thumbnails, but if you don't resize your pix, anyone clicking on them may suddenly be presented with an image so large that they have to scroll up and down and side to side to see it. Plus it really slows your blog or web page down.

WHAT TO DO?

You need to reduce the resolution of your picture to no more than 96dpi (72dpi is fine, actually, which is the resolution of most of my pix.) Although you'll find 300dpi pix on my Freebies site as these need to be large so people can edit these themselves. If you click on a few of those, you'll see what I'm talking about.

DPI is dots per inch, and why a low resolution makes for a badly printed picture (all those dots - pixellation - you see in bad newspaper photos).

For printing you need a high resolution: 300dpi for magazine quality (pix you'd want to put in your scrapbooks and memory albums). But what happens if your downloaded pictures are already 72dpi? My old camera setting automatically sized to 72dpi - but the actual picture size is something like 27 inches high etc!

SO WE NEED TO FIX THAT AS WELL:

To begin, open your image (photo or scan) in your graphics programme, and go into Image > Image Size.

Do all your adjustments first (as explained below) then save as a jpg. JPGs are lossy formula - keep editing and saving, and you'll get a photocopy of a photocopy of a photocopy...

So do ALL the adjustments in once sessoin, and Save As when you are totally finished with any adjustments and tweaks.

Save one version at 300dpi if you think you'll need to print it out.

Hit the Undo button to get back to your original picture (you want to undo any adjustments - but don't exit as you'll lose the picture altogether) and then go into Image > Image Size and resize to 72dpi (or 96dpi if you want a slightly higher resolution). Do all your editing for this size (colours and brightness may look very different at this resolution), then Save As a different name from your 300dpi version.

HOW TO EDIT YOUR PICTURE

This is the order in which I always work:

Resize the picture (as above) but don't save just yet....
Then rotate the picture if it's crooked: straighten it using the Rotate facility.
Crop your picture. If there's one detail you like, but don't want the rest of the image, crop it out! (If you do Save As when you are finished, you won't overwrite the original image - which you just might need later on.)
Adjust the colours: brightness, contrast etc. Very helpful to enhance a over-dark photo, shooting into sunlight etc.
Sharpen your photo. If it's blurry you need to sharpen it (or if that doesn't work, try the Unsharp facility - which is in the same section). This can make a big difference.
Save As, so you don't overwrite your original image (unless you want to, of course).

That's pretty much it: get in, crop it down and straighten it, sharpen it up a little if the picture needs it - then resize it and save as a JPG.

HERE'S A QUICK RUNDOWN:

Photoshop:

Go to the Image button on your top toolbar to adjust Image Size and Rotate. Adjust brightness and contrast, hue and saturation in Image >Adjustments. The Crop icon will be in the toolbar on the left. You'll find Sharpen under the Filter button (top toolbar).

Serif:

Go to the Image button on your top toolbar to adjust Image Size, Rotate, and into Adjust for the contrast, hue and saturation settings. The Crop icon will be the left toolbar, and Sharpen is located under the Effects button.

PaintShopPro:

Go to the Image button on your top toolbar to find Resize and Rotate. Go to Effects for Sharpen and Enhance Photo, where you'll need just the Automatic Contrast and Automatic Saturation buttons.

This isn't sophisticated editing, just the basics - but this will get you nicely sized photos to put on your blog and web page without too much hassle, or having to completely learn a complicated programme.

Your other option is to go for a freebie editor, which you can find online (PhotoScape, The Gimp etc - see my post re free graphics programmes).

However, these won't reduce the size of your files per se, ie: 300dpi shots will still be at 300dpi, even if you make the size smaller. But they will do a lot of special effects, and are very straightforward to use.

MOVE YOUR MOUSE AND GET TWINKLY STARS

2009-12-03T19:02:00.003Z

Here's a fun effect which works when you move your mouse (and it doesn't interfere with the falling snow effect, so you can have both!)

Go here to get the code - look for Mouse Effects in the left sidebar, near the bottom (it's called the Tinkerbell Mouse Effect).

Click the tab at the bottom to copy it to your clipboard. Go to Layouts > Edit HTML and paste the code just after the 'head' tag, right at the very beginning of the blog.

Isn't it fun? It's really beginning to feel like Christmas now!

FALLING SNOW EFFECT TO ADD TO YOUR BLOG

2009-12-01T08:31:00.002Z

Copyright Penniwig's

This is a lovely script - safe, instant, and doesn't cause any problems to the running of your blog (there's one out there that tries to add adverts...)

Just go to this link and hit the button that says Add Snow Effect - it'll do all the work for you and put itself right into your sidebar (and you know you can trust Blogger Buster).

FREE PHOTO EDITING PROGRAMME

2009-12-01T08:28:00.002Z

I'm putting this on Freebies as well so EVERYONE can find this link!

Splashup is a free photo editing programme that works right on your website!

No need to download, and having had a little playaround, it seems a lot easier than Gimp (also free, which is more equivalent to Photoshop - and very hard to use if you are a newbie).

It will do everything the simpler graphics programmes can do, including resizing, adding layers, effects etc. Well worth a look, and just the job for anyone teetering on the bring of needing a graphics programme but dithering as to which one to buy.

You don't even need to register if you are working with images from your computer - although, if you do, you can save work in progress, files etc - and works with any browser. If you are registered, you can also get straight into your Flickr, Photobucket, Picasa, Smug Mug and Facebook account.

How fabulous!

WATERMARKING & PROTECTING YOUR IMAGES

2009-11-27T21:49:00.000Z

I had an email asking me how to put a watermark on artwork to protect the copyright, and stop people copying.

So here you are: you need a graphics programme preferably (although I have done it in Word, but it's very long-winded).

This is showing my logo plus the image, and also shows the logo in postion, where I dragged and dropped it. You'll see in the bottom box on the right that it shows as a separate layer.

Create a new document with a logo or piece of text (your name, blog name etc) and save this as a small file, 96dpi and a maximum height of 60 - 100 pixels (or you won't be able to see the artwork). Save this as a png file, which means it will have a transparent background. You'll use this as your watermark.

Open the image in your graphics programme, and create a duplicate or do Save As and give it another name. (This way you are not saving the watermark on your original image, which you may need at some point.)

Reduce the Image Size of the copy to between 72dpi and 96dpi and around 420 pixels (say, 7 inches in height). You'll probably find this in your Edit section.

Create a text layer or drag&drop or copy&paste your logo onto your image (depends on your programme) OR create a text layer and type in your name, blog name etc if you don't want to create a logo.

Save as a jpg - this automatically flattens the layers (although you can flatten the layers first if you'd rather).

That's it! You can now happily load up your image knowing that the watermark is cleary displayed for anyone to see.

MY FREE COPYRIGHT

If you are really worried about someone copying your artwork, you can also do this: click on the MyFreeCopright logo you'll see in my sidebars and open an account with them. It's free. It's also admissable in courts of law should you ever need to sue anyone for breach of your copyright. Every time you write a post, they email you with a copy which has been saved in their records - so all you need to do is archive that email, and you're covered.

DISABLE RIGHT-CLICK COPYING

The other thing you can do is disable right-click copying altogether, which means a little meddling in the html of your blog. You can't change your mind though, should you decide to offer freebie pix for example. You can re-enable the right-click copying, but you can have it turned on or off - you can't choose to do it just for certain posts and not others.

Here is an excellent tutorial on the subject from Easy Custom Blogs which explains exactly what to do.

I hope this helps!

HOW TO NUMBER YOUR COMMENTS

2009-11-18T19:24:00.030Z

Note added 20 January 2012

Heart-breaking news - this numbered comments tutorial I sweated blood and tears over NO LONGER WORKS. Blogger has now introduced nested comments (in other words, you can click Reply to reply to any particular comment) so the numbering system is logically unable to work as the numbering cannot be applied. The coding is unalbe to allow for a comment - then the reply to a comment - and possibly some more replies to that... so alhtough the coding may still be there in your blog html, but it won't work any more.

I don't see any point in going to the aggravation of trying to remove it as it doesn't DO anything and certainly isn't hurting anything (if it ain't broke... etc...) so my best advice is just to ignore it. Sob.

If I or anyone else can figure out how to get around this with a new tweak, you can be sure I'll post it!

Copyright-free image from Art-e-zine

Sometimes you wish those comments left under your blog posts were automatically numbered - especially if you are hosting a giveaway, and use the Random Number Generator to pick a winner. I know I've gone dizzy counting (and checking, and double-checking).

So I was determined to add a counter to my comments, and Googled several tutorials. Needless to say, no one tutorial worked for me, but after having spent a happy (!) 4 or so hours trying to get it to work, I have finally managed it.

I used three different tutorials to get the result I wanted, ie: I didn't want to delete the avatars altogether as suggested on one tutorial, and I didn't want to have the avatar pix changed to that boring "B" either. Plus - I wanted the numbers on the right, and not next to the pictures. And I found some of my blog code was different - which cause me a big panic! However, there were instructions on another blog which did work.... (I also found that you need to have the comments listed under the blog, and not on a separate page or drop-down menu).

Before you start, you need to have your Comments showing on the same page and under your post. So you need to go into Settings > Comments and adjust this as your first step, then save Settings:

Here's how I did it.

Go to Layout > Edit HTML and DOWNLOAD A COPY OF YOUR BLOG to your desktop. It only takes a second, and you can happily mess around with your html in the secure knowledge that if it all goes wrong, or you hate it, you can reload your blog without any dire consequences. (I reloaded mine around 5 times in this session as I couldn't get the numbered comments to show).

Click on Expand Widget Templates, then click CTRL + F on your keyboard to bring up the FIND box.

Type this into the box:

<dl id='comments-block'>

Click on the Next arrow (next to the Find box) and the code will highlight in green.

Add this code immediately BELOW it:

<script type='text/javascript'>var CommentsCounter=0;</script>

If the box goes pink, it's because the code can't be found. This happened with my blog. Don't panic.

Try this code instead:

<b:loop values='data:post.comments' var='comment'>

Add the following code just ABOVE this line:

<script type='text/javascript'>var CommentsCounter=0;</script>

The postition so far: I have found the code I needed, and inserted the necessary line of code above it.

Next step: delete the code in the Find box, and replace it with this code

<data:commentpostedbymsg/>

This will highlight the next section you need.

Now copy and paste this bit of code

<span class='numberingcomments' style='float:right;font-size:20px;'><a expr:href='data:comment.url' title='Comment Link'><script type='text/javascript'>CommentsCounter=CommentsCounter+1;document.write(CommentsCounter)</script></a></span>

And Save it. Normally I'd say Preview - but you can't preview the comments until you click on them!

ADDED 8 MARCH 2010
A couple of people have said their comments aren't working, so try putting the code here instead (ie: above the
</dt&gt;

TROUBLESHOOTING

Coments will show under the relevant post.

If you can't see your numbered comments, try clicking on the TITLE OF THE POST. You should then see all your comments numbered in order, below your post. Once you have your comments all set up and working, THEN you can alter your comments to appear as a full page or pop-up window.

Did you remember to adjust your Settings, so the comments will appear below the post? It won't work if the comments are a separate page.

If they still don't show, check your coding again. Upload your blog (you saved the full template to your desktop, didn't you?) and have another try.

These are the three sites that I cobbled my instructions together from (thanks so much, guys):
Tech TNT
Katy Did & Kid
The Mom Nerd

ADDITION: 10 Feb 2010

Crystal sent in a comment, and said neither code mentioned worked for her (Crystal is using the Rounders template, so this may be why) - but that searching for "comments-block" did! And that it was the 2nd comments-block section that gave her the numbered comments (see Comment No 37, attached to this post).

So if you are still having trouble, I suggest you give Crystal's suggestion a try. Anything that does the job has got my vote!

Thanks Crystal!

ADDITION: 16 Feb 2010

I forgot to mention - the counter counts up in blocks of 200. In other words, it will count from 1-200 and then resets to start again, with the next block of 200 also counting from 1-200. And the next, and so on.

I think Blogger didn't anticipate that anyone COULD get more than 200 comments to any one post! (if you check out any other tutorials, you'll find they say the same).

Still, it's a whole heap better than counting by hand. And if anyone knows how to reset it to an unlimited number, I hope you'll let me know.

LATEST UPDATE: 24 Feb 2010

I have received TWO great comments - thanks so much, ladies.

HoboMama (Comment #46) has suggested how to solve getting all #1s. I know Miss Priss was having this problem.

"For some reason the code got out of order (I swear I didn't enter it wrong, so maybe it rearranged itself — stupid code). Make sure the first code snippet is directly under the dl thing; mine had moved below the next line. I also got it to work with Pop-Up comments selected. They still show under each post, just not in the pop-up box."

Note from me: Code DOES rearrange itself - why, I don't know. So if something doesn't work it's worth rechecking, right from the beginning. I have to redo mine - you may have noticed my comments are numbering on the left (by the name) and also on the right of each comment. This has happened since Blogger altered the main code by adding the Extra Page facility. Another on my Things To Do list!

Cheryl F (Comment #47) has solved the "200 comments, then start numbering again for the next block of 200" problem by sending this great link from danguyf:

Update 9th March 2010

K (Comment #53) says that she had to tweak a little herself as she didn't have one of the code links I mentioned, so here's another helpful solution if you are having problems:

"I put it [the code] within the div class comment-timestamp instead and tweaked the style a bit to fit into my comment box."

Update 16th March 2010

Tiaras (Comment #59) says:

I have been trying to get this to work for months - to no avail. I do not have the code: data:commentpostedbymsg and could never get this to work. By reading through the comments here - I took a few suggestions and yipee!! it works now!!

I emailed her for more info and she said:

I couldn't locate the second line of code in my blogger html code.

So I took the clue and searched for this line in my html. There were three and I simply added the code after the third which was a couple of lines down from the first code input.

What I say is: if one suggestion doesn't work for you, read through all the comments etc, and try something else. It took me 4 days and many tutorials to settle on a combination of the three that worked for me. So don't despair!

NEW NOTE 28 September 2011

Just a reminder... if you change your template (ie: if you try one of the new Designer Templates) this coding will still work - but you'll have to put the code in again. So if you are experimenting with your look and change the template again - just be aware you'll have to enter this code again every time. Also any other html coding like your signature, and any other tweaks.

Any more ideas, don't hesitate to send!

POST DIVIDERS - HOW TO INSTALL ONE or MAKE YOUR OWN

2009-11-05T20:43:00.015Z

Are you bored with those little dotted lines separating your posts? Then you need a nice post divider! You do need to do a little bit of work to install these, but it isn't hard.

First, go to Layout > Edit HTML and then press CTRL + F on your keyboard. This will bring up a toolbar, just above your bottom toolbar, with a box showing x Find: at the bottom left-hand side.

Next, copy this code and paste it into the Find box:

.post {

This will immediately highlight the section you need.

Look for this code:

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}

You need to replace ALL of this code with this other code:

.post {
background: url(http://YourImageCode);
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 1.5em;
border-bottom:0px dotted $bordercolor;
padding-bottom:5.5em;
}

The bit inbetween the brackets is the url for the image code of the post divider. So your code should look something like the example (no spaces between the brackets).

Before you Save Template, just Preview first, then if you don't like it, just Clear Edits.

ADJUSTING READYMADE POST DIVIDERS & MAKING YOUR OWN POST DIVIDERS

If you want to make your own divider, just load the image up to Photobucket, Picasa, Flickr etc, as you will need the image code. Substitute it for mine, and away you go!

You'll need to create your divider in a graphics programme and save it with a transparent background. Merge layers if you have lots of layers (don't flatten) and save as a .png to preserve the transparency. Flattening the layers or saving as a jpg means a white background - which may not be the look you are after. If the transparency isn't a factor, go ahead and save as a jpg.

Save at a low resolution: 72dpi - 96dpi is fine for the web. Any higher, and your blog will be slower to load.

Sizes: I advise you work in pixels, even if you aren't used to it, as Blogger html works in pixels. The width depends on the width of your blog. Make your divider the same size or a tiny bit narrower. Height? Not too big... maybe 30px - 50px maximum height unless you want a real biggie!

In both 2-column and 3-column Minima templates the main section is 410 pixels wide, funnily enough, so anything from 400px - 410px is nicely in proportion, centred, with a height of 30px - 50px.

Different templates have different widths, so it's always worth checking the width that yours is, and adjust accordingly.

To adjust my post dividers, download the divider to your own computer and check the image size. Reduce or enlarge as needed, then reload to your own Photobucket, Picasa, Picnik, Flickr etc account (or you may be able to resize in the external account itself). The image HAS to be on an external source.

Copy the image code and paste it where shown in the first part of this tutorial.

If you get into difficulties, email me!

ADDENDUM:
If adding your images from Photobucket etc, make sure you remove any coding that looks like this: [IMG] and [/IMG] or your code will be there... but you won't see anything. You must have your code starting with (http and finishing with png) with no spaces in between the brackets.

HOW TO REMOVE YOUR BANNER OR HEADER

2009-10-25T19:25:00.003Z

I've had an email asking me for help - how to remove a header you've installed.

First step, go to Dashboard > Layout and click on the Headers link.

Second step, click Remove (just under the header picture) and then Save.

That's it!

Now you can change headers to your heart's content.

HOW TO ADD A BLOGGER BACKGROUND

2009-10-14T17:37:00.002+01:00

Here's the easy way to change your Blogger background.

This works best on a Minima background - so the first thing you need to do is save your template before you do anything (then if it all goes wrong, you won't lose anything).

If you want a 3-column background, then Minima is the best one to choose (it's the easiest to adapt).

Back up your blog before you do anything if you are new at this, and of a nervous disposition!

Go Layouts > Add a Gadget at the bottom of your blog - this actually helps the blog to load faster (and you aren't likely to delete the box by mistake when adding buttons etc).

Click HTML/JavaCode box - this is where you are going to add the code for the background template.

Copy&paste the code into this box, Save - and that's it! Go and admire.

If you don't like it, just click to open the box again, and press Remove.

ADDING A SIGNATURE TO YOUR BLOG - TWO METHODS

2009-10-09T00:20:00.008+01:00

Copyright-free image from Tack-o-Rama

I had an email asking for some help in adding a signature to your blog.

There are two methods:

The quick and easy way, ideal if you have a new blog, or aren't worried about the signature being on ALL of your old posts. This is also the one to choose if more than one person is writing the blog.
You want the signature to show on all your posts, right back to the very first one.

FIRST DESIGN YOUR SIGNATURE

Before you do anything, you need to create your signature: do this in any graphics programme by creating a transparent background, eg: 150pixels x 80pixels maximum measurement (although the size depends on your personal taste). Mine (below) is 180px x 74px.

Choose an attractive font, maybe add a little something extra (a flower for example) and merge the image if you do. Don't flatten it or the background will go white. Save as a PNG, so that the file remains transparent and your signature will "float" on any background colour.

You need to save at the highest resolution possible: PNG-24 bit if you can.

If your programme only supports PNG-8 (or doesn't even tell you what resolution it is) you need to consider this: a dark/bright text on a dark background will show a weird little whitish halo around the letters. My first try was dark red on a dark grey background and I had a nasty little dotted white outline showing.

How I solved the problem was to choose a light colour for the signature; the halo effect is no longer noticeable. Keep your dramatic text colours for a white or light-coloured background as the strobing outline won't show.

Now load your signature up to an external site, eg: PhotoBucket, Picasa, Flickr. You need the image code. If you get this: [IMG] and [/IMG] when copying the code, just delete these. It's the bit in the middle that you need.

THE QUICK & EASY WAY TO ADD A SIGNATURE

This involves very little time and effort.

Go to Settings

Go to Formatting

Scroll down to Post Template, then type in this code exactly as you see it (copy&paste is the easiest way):

<p><image class="centered"alt="post signature"
src="YOUR SIGNATURE URL HERE" /></p>

Make sure there are no gaps between " and " as you will be replacing my text with your Photobucket url (or Picasa, Flickr etc). It will start off http:// and should finish with .png.

Click Save Settings, and you'll see your signature inside the text box when you go to write your next post.

This method is especially ideal if there is more than one author for your blog (eg: if it's a group blog) as you can insert all your codes in the Post Template box, and whoever is writing the blog entry at the time can simply delete the other signatures showing in the text box. They'll all be there next time!

REMOVING BORDERS

If you have a border around your pictures, you will also have a border showing around your signature. This is how you remove it (but it will also remove the border around your pictures as well).

Go to Layout then click on Edit HTML.

Click CTRL+F on your keyboard, which will bring up a handy little Find box just above your bottom toolbar. Type .post img into this box, and the code will highlight in green, making it easy to find.

Simply change the number to 0px, and then Save Template, and you're done!

PUTTING A SIGNATURE ON ALL YOUR POSTS (INCLUDING ALL THE OLDER ONES)

This involves a little more HTML work, but still isn't too difficult. First, create your signature as above and put it on an external site as previously mentioned.

Then go to Layouts > Edit HTML and click Expand Widget Templates. Type in CTRL+F to bring up the Find box (just above your bottom toolbar) and type this in:

<div class='post-footer-line post-footer-line-1'>

You'll see it highlighted in green.

Immediately BELOW this line, type in this code:

<br/><img src='YOUR SIGNATURE URL HERE' style='border: none; background: transparent;' /><br/>

Replace my text with your own image url. Click Preview and see if you are happy with everything. Clear Edits if you aren't - and have another go. Save Template when you are finished.

THE JUMP LINK FOR VERY LONG POSTS

2009-09-10T08:17:00.008+01:00

Has anyone seen this little symbol on the toolbar above the box where you write your blog posts? And wondered what it's FOR?

Copyright-free image

Here's the link that tells you: JUMP LINK

However, what they don't tell you.... don't use it if you like your Link Within gadget!

Why not? Here's why!

Yet one more thing to think about! But if you don't have Link Within, it's really helpful. I'd suggest highlighting the link in some way as well: change the font (F) or text size (TT) or Highlighter, so people can see it.

I took my jump link back out again, and now I'm wondering whether to get rid of the Link Within instead. If anyone would like to comment on that, I'd be very interested!

ADDENDUM:
By the way, did you notice this little symbol has sneaked onto the toolbar since I wrote the article last week(below)? I wish Blogger would announce these things! I know that symbol wasn't there a couple of days ago. I'll be very interested to see the Next New Thing.