Thursday, August 27, 2009

Tutorial: How to Add a Signature to your Blog Posts

Have you ever been looking at a blog and see a fun signature at the bottom of each of the author's posts? And you wonder how they did it? Well, I am going to tell you!

First off, you need a photo editing program. I use Photoshop Elements as always (my favorite), but there are a few free ones you can download that are very similar for free. There is and Gimp that are great.

Okay here are the steps: (I am going to make one with you for this blog).

1. You need to create a new blank file:2. Now you need to select your settings. If you want your signature to have a clear background instead of a white box, don't forget to check the transparent option. These are the settings I use:
3. Now you will open your text tool (it usually looks like a "T") and your options will appear on the top of what font you would like. Choose the font you want. You can also choose the size, and make it bold or italic. It's up to you, play around with it -- and don't be afraid, you aren't going to mess anything up that you can't fix with "undo".4. So far so good! Now you can add whatever you want! A picture, a flourish, or just keep it plain-jane! It's up to you, be yourself, make it personal!

5. Now, if you want it to remain transparent in the background, you need to save it as a PNG file. However, if you are sticking to the white background or another color, you can just save it as a JPG.

Now it's time to add it to your blog!

Note: You are going to need an online host. I just photobucket. Your signature needs to be uploaded onto it so you can get an html code for it. For those of you who are new, photobucket is a free service and you can sign up here. If photobucket doesn't work for you, I found another one I like called Imageshack, that you can check out here.

Here are the steps to add it to your posts!

1. Go into blog settings page.

2. Next go to "Settings" and then "Formatting".

3. Scroll down to the bottom of the page and you will see a "Post Template Blox". Now you will need to copy the HTML code from photobucket of your signature and paste the code in this box.

4. Click on "Save".

Ok, it will look like this:

Now there might be two things that bother you that drive my nuts. 1. the fact the signature isn't centered. and 2. what the heck is up with that funky border!!

To fix the centering thing is easy. Just go back to your "settings" and "Formatting" page and add to the BEGINNING of the code you pasted and to the END of the code. There you go! However, if you like it to the left, just keep it, both ways look great!

Now here are the steps to get rid of the border (unless you like it):

1. Go to your "Layout" page and click on "Edit HTML"

2. Next you are going to need to find this section:

.post img {
border:1px solid $bordercolor;

(you can find it faster by hitting "Ctrl F" and typing in ".post")

Now you need to change the border 1px to 0px.

3. Just save it and ta-da! It will look like this!! Enjoy!

Taking Button/ Blinkie Requests

Looking for that perfect button or blinkie for your sight but can't seem to find it? I did. Not only could I not find the one I wanted, but even the ones I liked I had seen on lots of other blogs. I wanted to be different and original. So I figured out how to make my own. I will have to write a tutorial about that, huh? Some other day...

Anyway, I would like to make some for all of you, but I have no idea what you guys want to see. So please, if there is a certain one you want, email me or leave me a comment and let me know. It's totally free, I am just doing this for you. And the bonus is, this site isn't super popular, I don't even advertise it outside my inner circle of blogging buddies, so most likely you will be one of the only ones using it. Cool huh?

Anxious to hear your ideas!

Sunday, August 23, 2009

Tutorial: Text Decoration

Have you ever wanted to jazz up your words? Either, cross them out or make them flash? Well, this is how you do it!

Text Blinking:

Stop right there!!!

Looks like this:

Strike out:

I didn't really want to say this

Looks like this:

or this:


This is REALLY important!

Looks like this:

You just put the text between the codes. Here are a few more:

Bold =
Italics =
Superscript (ex. E=MC2) =
Subscript (ex. H2O)=

I hope this give you a few more fun ideas to spice up your blog!

Saturday, August 22, 2009

Tutorial: How to Add Borders Around your Words

These are pretty easy once you know the trick to the codes. Check it out!

How would you like to put a border around your words like this?

Add some code like this:


Or maybe you are more of a dot person?

Here's the code for that:


Have you thought about dashes?

Here you go:

Now let's get a little fancy!

Got to like this outset border!

The Code:


This is an inset border!

The code:


Or maybe you like your borders groovy!

The code:

Now, these codes aren't set in stone. You can change the color of the borders, you can change the size and even the thickness if you like. Go ahead and play around with the numbers and see what you come up with!

Here is a color chart from that you can use to replace the color names for the ones you want:I found out how to do all this on For more types of borders not mentioned here, you can check out the site here! I didn't teach myself how to do this you know, and I wouldn't feel right taking all the credit. The point of this blog is to share whatever I find with you, and compile all the tutorials I love in one place. I hope this helps! Have fun!

Friday, August 21, 2009

Tutorial: How to Change your Font Size

Every once in a while I get a question about how to do little codes here and there to make your blogs or posts have a little originality. Here are a few simple codes I like to use:

How to change your font size:

Using these codes will look like this:








Cool, Huh?!

There are other ways change your font size as well. There is a really good tutorial here, you can check out if this doesn't work for you.

Thursday, August 20, 2009

FYI: Using the "Link Within"

Do you have some great old posts that no one knows exist? Well, the Link Within widget is a handy little item that shows off your old posts, and ups your traffic and keeps people on your site. Seriously, it works! And it is easy! If you don't know what it is, check out the bottom of this post -- see those three boxes? That's the Link Within!

Here's what you do:

1. Go to this site: Click Here!

2. Fill out the little form on the right side.

3. Next they will give you directions on how to install it. Now, being a blond, it took me a few minutes to figure out that I actually had to click on the "Get Widget" box on the instruction page, not try to find it on my blog.
4. Then a new screen will come up. Just click to add it.

5. Now you will be on your layout page. Like the directions in Link Within, for best results, move your new Link Within gadget to under your posts. Just click and drag around until it makes a space for it. Then click save!

Wednesday, August 19, 2009

Tutorial: How to Make Your Own Blog Background and Other Stuff

This is a popular tutorial people are trying to figure out these days. Now, first off, I want to mention that if you want a fancy one, there is a GREAT tutorial over at The Cutest Blog on the Block that I really like. Click here to see it!

Now if you are like me, and like to keep the background simple, yet eye catching, this is my tutorial on how to do that.

First off, you need a few things. Don't worry it can all be free. You need a simple background pattern that you like. Me, I like stripes and dots. But you can use plain colors or flowers. Try to find something with a pattern that repeats -- it just makes life easier for those of us who are blog-design-retarded. You can find free backgrounds at Scrapbook Flair -- my favorite. Or other sites that have backgrounds or digital scrapbooking pages you can use as a background.

Next you need to be a member of an online image host like photobucket. Membership is free.

Okay here we go!

1. Make sure that your template in is in the minima format -- if you did the 3 column tutorial you are ok. Minima is the most basic and easiest to work with. This tutorial assumes that is what you have. And as always make sure you backup your blog template in the HTML editor.

2. When working with backgrounds you will almost always be working in this section of the HTML editor. (Go to "Layout" then "Edit HTML):

body {
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;

See where it says "background:#ffffff" ? That is where it tells you what color the background is; #ffffff is white.

3. Upload your choice of background to photobucket or wherever your photo host is. I like to load it as the biggest file posible.

4. Copy the direct link it gives you.

5. Next you will need to do this in the editor:

body {
background:#ffffff url(;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;

Add that line and it will put on your background! However, there may be a few things you will want to change and add now.

How to Fix Your Background

For instance. You will notice that your background scrolls with your words. If you want it to be fixed you need to add this line:

body {
background:#ffffff url(;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
background-attachment: fixed

Now, you will notice that your background will repeat itself. To stop this, add this line:

body {
background:#ffffff url( no-repeat;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
background-attachment: fixed

A few more background tips for you:

How to Make a Background Image Repeat Vertically Down a Page

Add this line:

body {
background: #ffffff url( repeat-y;
font:x-small Arial sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;

How to Make a Background Image Repeat Horizontally Down a Page

body {
background: #ffffff url( repeat-x;
font:x-small Arial sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;

Positioning the Background Image

background: #ffff00 url( positioning-variables-here no-repeat;

Positioning Variables are:
  • top left
  • top center
  • top right
  • center left
  • center center
  • center right
  • bottom left
  • bottom center
  • bottom right
So say you want your background to be centered top and center, it would look like this:

background: #ffffff url( no-repeat top center;

So, say you wanted your background to look like I have it on here. This is what my code looks like:

body {
background:#ffffff url(; no-repeat center center;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
background-attachment: fixed;

Any Questions??

Tuesday, August 18, 2009

Tutorials on Other Sites

As I was looking around this week for some new Tutorials to do for you, one of my readers pointed me towards April Showers Blog Design. She only has a few on her site, but I think they are worth checking out. Her version of the navigation bars is brilliant if you are into doing a little designing. I had issues with her Favicon tutorial only because it didn't work for me, I had to do something a little different for mine to work. If you are interested, let me know and I will do share how I figured it out.

Also I am always interested in seeing others Tutorials, so if you find a good one, let me know I am will do a shout out on here and spread the news.

If there is anything you want to learn how to do, drop me a note. I won't guaranty that I will know how to do it, but I will make an honest effort to find out.

Friday, August 14, 2009

Tutorial: How to Remove the Lines Between Your Sidebar Items and Posts

This is really simple!

To Remove the lines between your sidebar items, you need to find this line in your HTML editor:

.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;

Now all you have to do, is change the 1px to 0px. (Note: If you actually want to thicken the line you can change the 1px to 2 or 3 or whatever you want. Additionally, if you don't want the "dotted" you can change it to "solid" instead. Play around with it, but don't save until you have previewed and like it)


To Remove the lines between posts
, you need to find this section in your HTML Editor:

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

Change the 1px to 0px. (
Note: If you actually want to thicken the line you can change the 1px to 2 or 3 or whatever you want. Additionally, if you don't want the "dotted" you can change it to "solid" instead. Play around with it, but don't save until you have previewed and like it)

That's it! Enjoy!

Thursday, August 13, 2009

FYI: How to Take the "blogspot" out of your Address

There will be times, where I will just refer you to another site for their tutorial. Not because I am too lazy to do it myself, but because I most likely have no experience in the matter and would rather pass on the responsibilities to someone else.

However, I do want to put the information on this site, just for you. To help you out so you don't get lost in a search engine. This is a blog of gathering and sharing information, where it comes from isn't important. What is important is that you can find whatever you need here in one place.

In answer to a question I received on how to make your own custom domain (take the ".blogspot" out of your site address) I found this tutorial on The Cutest Blog on the Block to help you out.

Click here

If you are still a little confused what this means, look at this address:

If I got my own custom domain, my address would be this:

See the difference? I hope this helps all of you out there that are interested in doing this. However, know that it costs a monthly fee of around $10 to do it.

Wednesday, August 12, 2009

Tutorial: How to Remove Border Lines

So you get your new cute header up, but when you view it, it has these annoying border lines around it! Here is what you do to get rid of those:

  1. Click on "Edit HTML" in your Layout page.
  2. Find the following code and change the 1's to 0's (part's in red):
#header-wrapper {


margin:0 auto 10px;

border:0px solid $bordercolor;

#header-inner {

background-position: center;

margin-left: auto;

margin-right: auto;

#header {

margin: 5px;

border: 0px solid $bordercolor;

text-align: center;

That's it! Easy huh?

Tuesday, August 11, 2009

Tutorial: How to Center my Buttons and Other Stuff

Has it ever driven you crazy that all the pictures and buttons you put in your side bars aren't centered! It drove me nuts! I couldn't figure out how other bloggers were doing it!

Here is the little trick I actually learned on my own.

1. Make sure that whatever you are putting in your sidebars has an HTML code. You can do this with your pictures by uploading them to Photobucket to get an HTML code for them. As for the buttons, they will already have one.

2. When you copy the code, and paste it in an HTML/Java Script gadget, it will look something like this:

If you posted it just like this, it would look like this:

But you want it centered right?

3. So you will simply type this in before the code:

4. At the end of the code type this:

So now it will look like this:

And it will look like this on your site:

You can do this in your posts, in your sidebars, the code is easy and it can work with anything that has a code. Enjoy!

Wednesday, August 5, 2009

Tutorial: How to Add Background Color and Borders to Sidebars

This is one thing that is pretty simple but can be a little tricky. However, it is one of my FAVORITE things to do because it looks so classy and sharp!!

If you have no idea what I am talking about, look at my blog. See how my sidebars and area for posts are all different colors? AND they have borders? That is what I want to teach you today.

All of this is done in the HTML editor. So go there. You are also going to need to pull up an HTML color code chart like the one here. And don't forget to backup your blog before making any changes! You don't have to, but I need to say it so if you mess it up, it's not my fault LOL.


There are a few awesome things you can do and I will tell you:
  • If you want your sidebars and posts to have one whole color behind them like this: Then you need to find this line: #outer-wrapper { Underneath it, you need to type: background: #enterhtmlcolorcodehere; Don't forget the ";" or it won't work. So it will look something like this:

#outer-wrapper {

background: #ffffff;

Then you can see what it will look like by clicking "Preview" if you like what you see, hit Save and you are done!
  • Now if you want to add a border to that so it looks like this: Then you need to add one more line under background. This line: border: 5px solid #htmlcolorcodehere; The 5px is how wide you want it. So you can play around with that number too. So now your code should look something like this:
#outer-wrapper {
background: #ffffff;

border: 5px solid #000000;
  • Alright, now if you want all your sidebars and post section to have different colors like this blog. Don't mess with the #outer-wrapper but skip on down to where it says #main-wrapper { this is where your posts are located. You will want to add this line underneath: background: #htmlcodehere; Just like you would have done above. Also, you will enter this under the following as well, with the colors you choose:

#sidebar-wrapper {
#left-sidebar-wrapper {
So it will all look like this:

#main-wrapper {
background: #ffffff;

#sidebar-wrapper {
background: #990000;

and if you have a third column:

#left-sidebar-wrapper {
background: #990000;

Now your blog will look something like this: (2 column template)Tip: if your words touch the side, you will need to change your padding and margins -- see this post for that help: Tutorial: How to change Margins and Padding.
  • Now, if you would like to add a border, it is pretty much the same as above. Just add this line border: 5px solid #htmlcolorcode; under both of the background codes. So it will look like this:
#main-wrapper {
background: #ffffff;
border: 5px solid #990000;

#sidebar-wrapper {
background: #990000;
border: 5px solid #ffffff;

and if you have a third column:

#left-sidebar-wrapper {
background: #990000;
border: 5px solid #ffffff;

Now it will look like this: (2 column)
Notice though, that when you first put the borders on, your sidebar may go to the bottom, mine did. This is where you need to go in and change your widths or margins. I changed my width under #outer-wrapper { and then changed it under #header-wrapper { to match the widths. Now when I previewed it, both columns were there. You can play around with this, and look at it under Preview, before you keep the changes. Don't save it until you know for sure that is what you wanted.

Last Note: If you want, you can also do this to your header. Just place the background and/or border code under #header-wrapper {

Just don't forget the ";" !!

Tuesday, August 4, 2009

Tutorial: How to Make your Own Blog Button

I don't know about you, but this was one of the first things I wanted to learn! A bunch of other blogs that I saw had them, and I wanted one too! It's kind of hard to find a site that is willing to teach you these things too. So here is the way I like to do it.

First off, you are going to need some kind of scrapbooking or image manipulation program (Photoshop or Photoshop Elements), even Paint will work if you are desperate. But I want to give you a few links to some great programs you can download for FREE.

  • Scrapbook Flair has a simple scrapbooking program that you can download and design your own buttons on. Click here for downloading information. I think you have to register with them, but it is a free membership -- and the benefits are so worth it. They have some of my favorite scrapbook pages and elements for free downloads.
  • Gimp is a Free image manipulation program not much different then Photoshop Elements. And it is FREE. I used this program A LOT before I finally got Elements. You can download it here.
  • -- I haven't personally tried this program, but I have heard great things about it. It is also free.
I will do this tutorial in Gimp, for your benifit. The reason I prefer Gimp and Photoshop is because it is easy to resize images. And you will need to do that.

Also, before I start, you will need to be a member of an online image host. What is that? Well, it is a site that you can download your photos or any graphic creation to and it will give it its own URL (web address). Most image hosts are free and easy to do. I really like photobucket. It seems to be the most popular. You can check it out here.

Okay, are you ready? Here we go!

1. Create your button in whatever program you choose. However, you are going to need to be able to transfer it into a program that can resize your creation. Gimp is great for this. In the following picture you can see my design in Gimp. But I can't have my button that big!
2. You need to resize your creation. If you are in Gimp, go to "Image", then "Scale Image". If you are using Photoshop whatever, go to "Image", then "Resize" then "Resize Image." Now since I am dealing with pixels when I do my HTML coding. I like to use them when resizing. I also know, that most sidebars on other blogs are around 200 pixels wide. (Mine is 205). I like to make my button 190 pixels wide (don't worry about the height it will adjust automatically). So change your setting to look like this:


Photoshop Elements:Then click "scale" or "okay". Your button will look little now. Save it as a jpg file.

3. Now you will need to load it onto a photo online host, like Photobucket. Right after it loads, click on Return to Album and you will see your button there. Click on it! You will now see a box with all kinds of codes on them. Now you will have two choices:
  1. If you want to just post the picture or button on your site, just copy the HTML code and paste it in a HTML/ Java Script gadget and put it wherever you want. Or...
  2. If you want to make a grab this button box for others to take and put on their site you will need to follow these steps:
-Copy the HTML code. I like to paste it in Word so I can manipulate it easy before I put it on my blog.
-Now this code will show the picture on your blog, but will link back to photobucket. You don't want that, you want it to link to YOUR blog. It will look something like this:

now, where it says: href="" You need to replace the http: part with your blog address so it looks like this: href=""

It will now look like this:

-Great! Now this button will link to your site. Tip: If you want your button to be centered, type at the begining of this code and at the end type .

-Next you will need to add the text box below so your friends can copy your code. Copy and paste the following underneath the code above and fill in the blanks with your own info. (Note: where it says src="" you will need to copy and paste the Direct Link of your picture between the quotes. You can get that on photobucket right next to where you got the HTML code.)

-Tip: make sure you don't erase any of the punctuation! Or it might not work properly.

Now your whole code should look something like this: (this is for my button I made for this tutorial.

Now you want to copy and paste your finished code into an HTML/ Java Script gadget. Place it where you want it and it will look like this:

Yay! You did it! I knew you could! If you like this button, go ahead and grab it for your site! If you have any questions or notice any typos on my part, leave me a comment and let me know! Thanks!!

Monday, August 3, 2009

How to Comment

I know this is basic stuff. But I can't tell you how many time people email me saying they don't know how to leave comments on blogs. I don't really blame them. It took me a while to figure out that commenting was even an option.

Here is a picture of a typical post:Okay, see on the bottom where it says "0 Comments"? Click on that to leave a comment of your own. (Warning: some bloggers like to get creative and change the word "comment" to things like "thoughts" or "quips" or "nice things people say". And sometimes, the comment link is on the top of the post. So be sure to look around. But generally, it is on the bottom.

After you click on this 1 of 2 things will happen. 1. A pop up will come up with the comments people left and a space for you to leave yours. or 2. the whole screen will change and you will see others comments and a box for your own. It all depends on the blogs settings.

But for the most part it will look like this:However, again, it will vary depending on the blogger's settings.

Now, if you have a google account (it doesn't have to be gmail, most people have one if they have a blog at blogger.) you can comment with that account name. See where it says "Choose an Identity"? See, I have "Mama Nut" checked off as mine. I can also have the option of checking the box underneth to have any follow up comments emailed to me. Now for all you beginners most of the rest of this stuff, you won't have to worry about. But see where it says "Annonymous"? If you don't have an account this is an option many blogs have. However, if you don't see it, then the blog doesn't allow it, and you will have to either get a google account or skip on the comment.

Some blogs make you do a word verification. Mine does. This keeps spammers from leaving comments. Other blogs like to read your comments before they will post them -- so don't worry if your comment doesn't show right up, it usually means it has to be approved.

If you would like to have a google account without getting a blog or new email. You can click
on "No Google Account? Sign up here. " It will show up on your comment form. It's easy and they don't ask for super personal info. And you can change your setting however you want to.

That's about it! If I left anything out, let me know!

Note: Bloggers LOVE comments. It totally makes their day.

Tutorial: Margins and Padding

What is a Margin?

In a blog, the margin is the space between the columns.

What is padding?

Padding is the space between your content and the side of column.

In other words: "Blog margins define the space of each element in relation to each other, while padding defines the space within each element."

(although I made this chart myself, I did get the idea off of

When I first made my 3 column template, I noticed that my words and pictures in each column were nearly touching, and then I did something and one of my columns ended up on the bottom. In frustration, I searched and searched for some help. I didn't know what it was called to even find it. Finally I did figure it out. This is what you do (this example is dealing with the settings I put on my 3 column tutorial).

First off, these are my favorite width settings in the HTML editor:

#header-wrapper {

#outer-wrapper {
width: 1000px;

#main-wrapper {
width: 505px;

#sidebar-wrapper {
width: 210px;

#left-sidebar-wrapper {
width: 210px;

This is where one of the columns may be put on the bottom. To adjust your margins and padding, you need to change and add these lines in the HTML editor:

#main-wrapper {
padding: 0 5px 0 5px;
width: 505px;
margin-left: 8px;

#sidebar-wrapper {
padding: 0 5px 0 5px;

#left-sidebar-wrapper {
padding: 0 5px 0 5px;

That should fix the problem. If you want your sidebars or main-wrapper (the part with your posts in it) bigger or smaller, just adjust the settings to your liking.

If I am not totally clear on certain stuff, please let me know so I can clarify for you.

For a deeper Tutorial for adjusting margins and padding and such see Blogger Buster's tutorial here, which goes into a lot more detail.

Saturday, August 1, 2009

So You Want to Start a Blog??

This is for all my friends out there, who would love to start a blog, but feel too intimidated to try.

First off, when starting a blog, it is only as public as you make it. You can make it private with only a few visitors, or if you have something to share with the world, you can promote it as well.

When people want to start off, I suggest going through Blogger. They seem to be the most user friendly -- maybe that is why I like Blogger! When I started my personal blog two years ago, I was totally intimidated to even try, and I was really afraid of perverts finding my site. So I made it private and invited a few friends and family to read it. It wasn't until recently that I branched out and went public with 4 Nuts in a Nutshell.

Okay, so here is how you do it. Keep in mind that it is FREE by the way. You don't have to pay a cent.

1. Go to

2. See that big orange button that says, "Create a Blog"? Click it.

3. Next it will have you create an account. Just fill in the blanks.

4. Then you will get a screen telling you to name your blog. Now you can name it whatever you want! And you can always change it. But the url (http://) you can't change and it can't be the same as someone else's. So go ahead and experiment with different addresses until you get one that is available.

5. Next you get to pick a Template. This is the layout of your blog. Now, if you are planning to get creative yourself and put on your own backgrounds, I would suggest sticking to Minima (the simplest white one) because it is the easiest to tweek.

6. Congrats! You now have your own blog! Go a head and start blogging! At this point you will find yourself on the "create a post" page. You can start posting, or you can click on all the fun tabs and see what they do. Don't be scared. You really can't mess anything up... trust me, I have tried.

You can always view your blog by clicking on the "view blog link".

This should get you started. If you have any questions, feel free to email me at: nutsinanutshell(at)gmail(dot)com (I write it this way to prevent spamers).
Blog Widget by LinkWithin