Cat Spills the Beans

How to Upload PDF Files to Blogspot

noreply@blogger.com (Cat) — Tue, 11 May 2010 14:27:00 +0000

I wanted to upload my own link for a chart I made for my friends on my blog. I wanted them to be able to click on the link and then download my chart. I had seen it on other blogs, but I had yet to figure it out.

Upon my research, I found out that blogspot had that option blocked for safety reasons and for a split second I thought about switching to wordpress. Then I found a great tutorial on how it can be done.

Now, this is one of those moments where I have to give credit to where it belongs, and it doesn't belong with me. So I am going to give you the link to the site I found the EXCELLENT tutorial.

http://moonloh.com/how-to-upload-pdf-file-to-blogspot/

I honestly couldn't have done a better job! I can't wait to get going on this!

Note: You can upload any types of files this way to share.

Sorry!

noreply@blogger.com (Cat) — Tue, 12 Jan 2010 22:23:00 +0000

I just want to apologize to all my followers for not posting more tutorials and updates. My main excuse is that I don't know what YOU want and what you are looking for. So please, if you have any suggestions or questions or want me to post a tutorial for something you want to know how to do. Please send me an email or comment here!

Remember this is for you!

Freebies: Thanksgiving Blinkies and a Button

noreply@blogger.com (Cat) — Tue, 10 Nov 2009 22:22:00 +0000

Tutorial: How to Change the Width of your Footer

noreply@blogger.com (Cat) — Thu, 05 Nov 2009 07:01:00 +0000

This is really simple. Just find this section in your HTML editor and change the following number in red to the length you want:

#footer {
width:1000px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;

You may have to reload your pictures or whatever you have in your footer to change to the new size.

Have fun!

Tutorial: How to Add a Sidebar Element Divider

noreply@blogger.com (Cat) — Wed, 04 Nov 2009 19:56:00 +0000

This is a tutorial I have been meaning to do for a while now, but haven't yet gotten around to it until today... you know, holidays and all.

So here we go!

Okay, you have two options when it comes to a divider for your sidebar elements:

1. You can make it just a plain kind of line (for line codes see this post).

or

2. You can design your own cute or fun one.

Let's start with the custom image first!

Custom Image Divider:

Okay, first you are going to have to design your own. I designed mine in Photoshop Elements 7, but you can use some of the free programs like paint.net or Gimp (links on the right sidebar). I also made sure to create my image to be transparent (and save as a PNG file), so it didn't have a white background. Here is what it is: (I wanted to stick to my Jelly Bean theme going on here)Note: you can also get pre-made ones all over the net.

Now, be sure to make sure it is the right size for your sidebar. To check the length of of your side bar, go into your HTML editor and look for this line:

The line in red is the length in pixels your sidebar is -- this or smaller is what you want your picture to be. Since mine is 210 px, it will be about an inch long.

NEXT: you need to upload it unto one of the online hosts (Ex. Photobucket, Imageshack, etc.) to get an html code.

Okay once you do that, you are going to go here: DASHBOARD --> LAYOUT --> EDIT HTML
and find this little tidbit:

Now it gets a little ticky, so make sure you save your template before you go tinkering around!

You are going to need to edit this code, and spilt it into two parts. (Or you can just copy and paste this to replace the above code).

Now that you did that, you need to add your picture!

Notice that we changed the default border to 0 and added a little padding (50 px).

Now check out my sidebars to see how fun it looks!

Now for the plain old line -- don't get me wrong, I like the line, it can look VERY classy and sharp.

Customizing Sidebar Dividers with Border Lines:

This is pretty simple. Find this line:

The part in red is what you need to play with. You can now change the "styles" of the border (width, type, color). For the list of some codes look here. <----- to see examples too. Actually, let me make it a little easier on you: Here are the codes The "1px" is the thickness of the line... you can play with that.

Line Styles:

dotted (as shown above)
solid
dashed
inset
outset
groove

Color Codes:
So say you want your border to be a thick, dashed maroon line. It would look like this:

border-bottom:5px dashed maroon;

That's it! Have fun!

}

FYI: Coordinating Colors

noreply@blogger.com (Cat) — Wed, 04 Nov 2009 19:49:00 +0000

I am the worst when it comes to coordinating my colors on my blog. Mostly because I just don't get what makes one color look good with another!

One of my readers sent me an email with the link to this highly useful site, that will coordinate your colors for you!

Here it is: http://www.colorcombos.com/

I was highly entertained just playing around. Enjoy!!

Tutorial: How to Add Post Dividers

noreply@blogger.com (Cat) — Thu, 15 Oct 2009 21:28:00 +0000

Okay, it took me a while to figure this out. But I was bound and determined to write this post. And after much trial and error, I FINALLY got it to work! Woo Hoo! So here it is.

1. You will need to either design your own post divider, or upload one from another blog such as Shabby Blogs or The Cutest Blog on the Block. I made my own -- I have serious issues about doing my own stuff... I don't want to be like everyone else, know what I mean? (I used elements from Pam Donnis Designs and Scrapbook Flair, put together in Photoshop Elements 7 -- but you can use Gimp or Paint.net to design your own. See links on my sidebar.)

2. If you are designing your own, make sure when you create your new file, you will want to make sure to set it at the right length. To check the length of your post area, go to your HTML editor and find this area (settings will vary):

#main-wrapper {
background: #ffffff;
border: 5px solid #ffffff;
width: 510px;
float: $startSide;
margin-left: 15px;

In red, is the length in pixels your post area is. I made my example 400 px, because I didn't want it all the way across.

Also, if you want the background of your divider to be transparent and not have a white box behind it, make sure you save the finished product as a .PNG file... NOT a .JPG.

Here is my finished divider in Photoshop Elements:3. Next you are going to upload your divider onto an online picture host such as Photobucket or ImageShack to receive the Direct Link Code.

4. Once you have that, you are going to go into your HTML editor. Remember, you may want to back up your blog first before you make any changes. Now you are going to scroll down until you find this little tidbit:

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

And you are going to change it to this:

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

Now notice where it says "padding" -- 5.5 is standard, but when I tried it my divider overlapped my comment and post info. So if you make the number greater, the divider will move down. I ended up using 12em for my padding to look right.

Here it is folks!

Now, I am not too sure I like it with my Link Within Widget... just too much. So I decided to re-design it to go with my signature... tricky. So you can 1 of two things, you can do this same thing and add your signature, OR you can follow my signature tutorial and add a new signature design with a divider. I am choosing the second, just because I don't like mine under the link within.AND LASTLY: You can also use your divider as a footer to your blog. Just go into your settings, page elements, and add a gadget on the bottom. Copy and paste the dividers HTML code into a HTML/ Java Script gadget, and Ta Da!

How cool is that?!

Now if you just want to divide your posts with lines, you can do that too in the HTML Editor. Just find that area:

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

And change the 0 to how thick you want the line, and you can keep dotted if that is how you want it or change that to "solid" -- up to you. Click here for more line code styles.

I Love, Love, LOVE Photoshop Elements 7

noreply@blogger.com (Cat) — Thu, 15 Oct 2009 19:03:00 +0000

I wanted to post this because Photoshop Elements 8 just came out, so Amazon and other retailers are selling Photoshop Elements 7 for a bargain right now! If you want, I won't be mad at all if you purchase it through my link here on the right side...

Anyway, for all you newbies out there like me, here are a few before and after pictures of pictures I edited on Photoshop Elements 7 to give you an idea of what it can do. Disclaimer: I am not by any means a pro, and I am still learning... so if my pictures look a little fishy, hey, I'm still learning!I also do all my headers, blinkies and buttons in Photoshop Elements 7. Here are a few recent ones I did for my other blog:

Anyway, it can be a lot of fun if you are into that sort of thing... and bloggers usually are.

Halloween Blinkies

noreply@blogger.com (Cat) — Wed, 14 Oct 2009 17:01:00 +0000

I designed these myself, but I got the elements and backgrounds from Scrapbookflair.

I also take requests...

Coming soon: Thanksgiving blinkies...

FYI: How to Network your Blog in Facebook

noreply@blogger.com (Cat) — Tue, 13 Oct 2009 17:40:00 +0000

Have you ever noticed how some of your friend's blog posts somehow post in the updates on Facebook?

Here is how you get Facebook to pull your blog feeds and announce them to your "friends."

You can either search through the Applications of Facebook for Network Blogs, or click on this link: http://apps.facebook.com/blognetworks

Click on the button that says, "Add a Blog." Just follow the instructions. You will come to a spot where it wants to verify you are the author of this blog. The EASIEST and fastest way to do this is to choose the option of posting their widget on your site. It only takes a few minutes and you can take it off again after you are confirmed.

Make sure you don't forget to invite friends to follow. Facebook won't start pulling your feeds until you have so many.

ALSO, your feeds will be undated once a day automatically, however, you can also pull feed manually by clicking the "pull feed" link once you are all set up.

Have fun!

Tutorial: How to Capture Screen Shots

noreply@blogger.com (Cat) — Sun, 27 Sep 2009 06:01:00 +0000

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 :)

Tutorial: Label Cloud

noreply@blogger.com (Cat) — Sat, 26 Sep 2009 06:01:00 +0000

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!

Tutorial: How to Create FUN Navigational Buttons

noreply@blogger.com (Cat) — Fri, 25 Sep 2009 03:25:00 +0000

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!

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

noreply@blogger.com (Cat) — Thu, 24 Sep 2009 03:32:00 +0000

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!

Tutorial: How to Add a Signature to your Blog Posts

noreply@blogger.com (Cat) — Thu, 27 Aug 2009 18:49:00 +0000

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 paint.net 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 {
padding:4px;
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

noreply@blogger.com (Cat) — Thu, 27 Aug 2009 18:39:00 +0000

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!
-Cat

Tutorial: Text Decoration

noreply@blogger.com (Cat) — Sun, 23 Aug 2009 06:01:00 +0000

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:

Underline:

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=MC²) =
Subscript (ex. H₂O)=

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

Tutorial: How to Add Borders Around your Words

noreply@blogger.com (Cat) — Sat, 22 Aug 2009 06:01:00 +0000

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 quackit.com that you can use to replace the color names for the ones you want:I found out how to do all this on quackit.com. 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!

Tutorial: How to Change your Font Size

noreply@blogger.com (Cat) — Fri, 21 Aug 2009 06:01:00 +0000

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:

xx-small

x-small

small

medium

large

x-large

xx-large

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.

FYI: Using the "Link Within"

noreply@blogger.com (Cat) — Thu, 20 Aug 2009 06:01:00 +0000

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!

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

noreply@blogger.com (Cat) — Wed, 19 Aug 2009 19:23:00 +0000

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 {
background:#ffffff;
margin:0;
color:$textcolor;
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(http://yourdirectlink.com/your-imageurl.jpg);
margin:0;
color:$textcolor;
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(http://yourdirectlink.com/your-imageurl.jpg);
margin:0;
color:$textcolor;
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(http://yourdirectlink.com/your-imageurl.jpg) no-repeat;
margin:0;
color:$textcolor;
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(http://www.imagehost.com/yourimage.jpg) repeat-y;
margin:0;
color:$textcolor;
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(http://www.imagehost.com/yourimage.jpg) repeat-x;
margin:0;
color:$textcolor;
font:x-small Arial sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Positioning the Background Image

background: #ffff00 url(http://imagehost.com/yourimage.jpg) 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(http://imagehost.com/yourimage.jpg) 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(http://i586.photobucket.com/albums/ss308/nutsinanutshell/sf_ourhouse_bg_06.jpg); no-repeat center center;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
background-attachment: fixed;
}

Any Questions??

Tutorials on Other Sites

noreply@blogger.com (Cat) — Tue, 18 Aug 2009 13:54:00 +0000

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.

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

noreply@blogger.com (Cat) — Fri, 14 Aug 2009 15:29:00 +0000

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;
padding-bottom:1.5em;
}

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!

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

noreply@blogger.com (Cat) — Thu, 13 Aug 2009 17:27:00 +0000

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:
http://catspillsthebeans.blogspot.com

If I got my own custom domain, my address would be this:
http://catspillsthebeans.com

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.

Tutorial: How to Remove Border Lines

noreply@blogger.com (Cat) — Wed, 12 Aug 2009 17:49:00 +0000

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:

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

#header-wrapper {

width:860px;

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?