Sunday, September 27, 2009

Tutorial: How to Capture Screen Shots

You may notice in all my posts that I have screen shots of the steps I take. Many may wonder how I do that! I can see myself a few years ago with my camera actually taking "screen shots" and loading them on from my camera. Lol. Times have changed thank goodness, and I discovered Gadwin PrintScreen.

Gadwin PrintScreen is a FREE download that allows you take any screen shot you want. Just download the program, and when you execute it, a little note will pop up in the lower right that just need to hit the "prt Srn" button when you want to capture an image. Then you will select the section you want with the mouse and then double click the selected area.

Next a little box will show up with the image you captured and just click continue.

Where did it go?

You just "copied" it and it is on your "Clip Board". Open up a photo manipulation program or even Paint. And paste it and save it. Easy as pie!

Note: Just make sure you are careful not to capture copyrighted material... you know the rules :)

Saturday, September 26, 2009

Tutorial: Label Cloud

Blogger recently announced their new Label Cloud Feature! Woo Hoo! You used to have to do the programing yourself in HTML -- a really long tutorial. But now Blogger is giving you the option!

Here's how you do it:

First you need to make sure you have the label feature on your side, you can add it through the "add a gadget" feature.

Now it will give you options. If you already have one on your side, click the little edit button on the lower right and this will come up:You can select cloud, and any other options you want. Here is what I got my first try:I didn't like the numbers on the side of the labels, so I went back in and turned them off. Woo Hoo... looking good! Have fun!


Thursday, September 24, 2009

Tutorial: How to Create FUN Navigational Buttons

I have read many sites on how to do these, and just couldn't get it to work! They were either crooked or there were gaps or it just looked stupid! So I made my own way to do it that is less complicated and WAY easier for design-challenged people like me.

Like always you are going to need a photo manipulation program like Photoshop Elements or one of the freebies you can download (If you need a list see my sidebar).

What I did on my blog, 4 Nuts in a Nutshell, is that I made every one of my buttons on it's own. I tried to combine them, cut and paste and be all fancy, but it looked like trash! No joke. So I made each button separately.

*note: you are going to want to be careful about the sizes, because you want them to fit across your page, but not stack. You can check the length of your header in your HTML editor look for this:

#header-wrapper {
width:1000px;
margin:0 auto 10px;
border:0px solid $bordercolor;

That is the magic number.

I am doing this tutorial for some buttons for this site. They are supposed to be Jelly Beans... but I made them in a hurry and they look a little shifty. LOL. I will fix them later -- but for now, this is how you do them.I chose to do Jelly Beans to go with the whole Bean theme... ha ha... Anyway...

Now you can do your buttons in two ways when designing. You can create a file with the length you need and make all your buttons in a row and cut and paste them separate when you are done. This is for a more experienced photoshop user.
Easier way: Make each button separate. Just make sure that all of their lengths added together isn't longer than your header.

Either way, they need to look like this:Because each button needs to be saved individually. Now, if you have the checkered transparent background, remember they need to be saved as PNG files. If they have white or another color background you can save them as JPG files.

Next, they need to be uploaded to an online image host like photobucket or ImageShack, so they will each have their own HTML code.

Decide what order you want the buttons in and copy and paste each HTML code into ONE HTML/ JavaScript gadget. Paste them right after each other, no spaces or hard enters. Like this:You can then click on the "Rich Text" link and it will show you your buttons:
Now you need to link the buttons to the pages you want. To do this, highlight one of the buttons like I have above, and click the "Link" button (little globe with the eternity sign on it) next you will type or paste the address you want the button linked to. Example: My "Home" button is linked to http://catspillsthebeans.blogspot.com. My other buttons are linked to certain posts.

When you are finished, click save. Now, if you added the link to the side bar, the buttons need to be moved so that they are under and line up with your header. You can do this in the "Element" tab of "Layout" -- just drag and place.

However, you can get an "Add a Gadget" option by your header to begin with if you follow this tutorial here!

Now just save and look! You might have to go back and make a few changes... my first attempt left my buttons spaced funny, so I went back and cropped them. Now it looks pretty good considering I didn't take too much time on them!

If I missed anything, or you have any questions, feel free to email me or leave me a comment! Thanks!

Wednesday, September 23, 2009

Tutorial: How to get an Add Gadget Bar by your Header

This is AWESOME!!! I have been trying to figure this out FOREVER!! AND it is soooo easy!

Go into your HTML editor, and look for this line:


Now see where it says 'maxwidgets="1"' change that to "3" and where it says 'showaddelement="no"' change it to "yes". So it will look like this:



That's it!!! Save it and then return to your Element Layout page and check it out! You will be so happy!

Blog Widget by LinkWithin