WORDPRESS BLOG

Just to let you all know, I have deleted my WordPress blog. Too hard to deal with! And I have enough to do, keeping up with this lot.

WordPress is one of those love/hate things: loved by the IT & mathematical types, loathed by the arty types.

I found it very frustrating to load pictures (over and over and over, to get them to go where I wanted, add a caption etc) and the code is a pain in the neck.

Buttons that work beautifully on Blogger will not work on WordPress and unless I want to BUY a template ($170.00) it seems I can't alter it and change columns, add columns, design backgrounds etc, like I can with Blogger. The templates they provide are virtually set in stone. Which is great if they are just what you want.

Personally speaking, the plus ( lots of pages) is more than outweighed by the negatives, so it had to go!

And now it's gone. RIP WordPress!

SCROLLING MARQUEES

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

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

Copyright-free image from Art Freebies

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

Copyright-free image from Tack-O-Rama

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:

1. Resize the picture (as above) but don't save just yet....
2. Then rotate the picture if it's crooked: straighten it using the Rotate facility. 
3. 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.)
4. Adjust the colours: brightness, contrast etc. Very helpful to enhance a over-dark photo, shooting into sunlight etc.
5. 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.
6. 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.