Tuesday, November 10, 2009
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 {
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!
#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!
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).
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;
}
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
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/
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;
padding-bottom:1.5em;
}
And you are going to change it to this:
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!
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.
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;
}
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
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.
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...
Tuesday, October 13, 2009
FYI: How to Network your Blog in Facebook
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!
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!
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 :)
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 :)
Subscribe to:
Posts (Atom)
Posts
