Tuesday, May 11, 2010

How to Upload PDF Files to Blogspot

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.


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.

Tuesday, January 12, 2010


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!

Tuesday, November 10, 2009

Freebies: Thanksgiving Blinkies and a Button

Thursday, November 5, 2009

Tutorial: How to Change the Width of your Footer

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 {
margin:0 auto;
line-height: 1.6em;
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!

Wednesday, November 4, 2009

Tutorial: How to Add a Sidebar Element Divider

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


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:

#sidebar-wrapper {
padding: 0 5px 0 5px;
background: #99ccff;
border: 5px solid #ffffff;
width: 210px;
float: $endSide;

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:

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

padding:0 0 1.5em; }

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

.main .widget {
border-bottom:1px dotted $bordercolor;

margin:0 0 1.5em;

padding:0 0 1.5em;


.sidebar .widget {
border-bottom:1px dotted $bordercolor;

margin:0 0 1.5em;

padding:0 0 1.5em;


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

.sidebar .widget {
border-bottom:0px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 50px;
background-image: url(http://yourdirectlink.png);
background-position: bottom;

background-repeat: no-repeat;

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:

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

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)

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

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

Thursday, October 15, 2009

Tutorial: How to Add Post Dividers

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;

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;

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;

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

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.

Wednesday, October 14, 2009

Halloween Blinkies

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

I also take requests...

Coming soon: Thanksgiving blinkies...
Blog Widget by LinkWithin