How to Add Pages to Your Blog

A few weeks ago, the good folks at Blogger released something pretty dang cool. I call it a late Christmas gift to the world at large, but I suppose normal people would call it a Page Gadget. That's right, people! PAGE gadget! Do you know what this means?!! It means that you can make pages!...on your blog!...with a cute little menu!...and it's eeeeasy! Of course, you could do this before if you wanted to get all HTMLy, but now you can do it so easily. Check this out:

1. Log into your Blogger account and click on the "Posting" tab as if you are going to...you know...post something.
2. Click on "Edit Pages"

3. Now, click on the button that says "New Page." (FYI: You can create up to 10)4. Enter your page title and whatever else you'd like on that page. (It's very similar to a regular blog post.) When you are finished, click "Publish Page."
5. Now you get to pick where you want the links to your pages placed. Once selected, click on the spiffy "Save and Publish" button.You're done! That's it! (See? I told you it was totally easy.) I'll show you one more thing though. If you go to your Layout page, you'll now see the Pages Gadget. Click on "Edit."
You'll now get a pop-up that allows you to rearrange the order in which your pages appear...if you'd like. Just thought I should show you how. :)
Here is what your new page(s) will look like on your blog...unless you chose to put the gadget on your sidebar, of course. Isn't that cool?
*If you were just thinking, "Yes Megan, that's cool...but why do I need that?" here are a few page ideas to get you started:

About
Contact
Links/Favorites
Photo Albums
Videos
Projects
Tutorials
Shop
Website
Disclaimer
Press
Giveaways
Polls
Advertise
Guest Book
FAQ's
Favorite Posts

I'm sure there are a gazillion other pages you could add that would be utterly brilliant, but that's what I came up with off the top of my head. Sadly, you can't link directly to an external url using this gadget, but I'll play around with it. Enough from me though. Go! Blog! Enjoy!

How To Add A Picture To Your Header

One of the questions I get asked the most is how to customize a Shabby Blogs header by adding a photo to it. It's a tricky question because everyone uses different programs on their computers...and some people don't use any photo-editing software at all. So, for those of you who are already pros, rock on. For the rest of you, check out the video tutorial I just added to our FAQ page and you'll be sporting a super swanky custom header in no time! I can't wait to see it!

*We're working on a site redesign that will include several video tutorials. If there is something in particular you would love a little help with, please let me know!

Hope you had an awesome Valentine's Day! I know I did! :)

Disappearing Nav Bar Tutorial

This is one of my favorite Blogger tricks! You know that colored strip at the top of your blog that is really handy, but not very cute? It's called a nav (or navigation) bar. There are lots of tutorials out there that can show you how to delete it, but there are a couple problems with getting rid of it altogether. Numero uno, you can no longer access the handy links contained in your nav bar. Also, it most likely violates Blogger's terms of use. So...how can you make your blog design look better and more custom without losing the features of your nav bar or doing something illegal? Read on, friends!

I'm going to show you how to create your own magical disappearing nav bar. It will only be visible when you scroll over it with your cursor, as you can see demonstrated on this blog. Now you see it, now you don't. :) Cool, right?

• First, log into your Blogger account and go to your Layout/Page Elements page.


• Now click on the tab that says "Add a Gadget"


• A pop-up box will appear and you will click on the "HTML/JavaScript" button

{Click on images for enlarged view}

• Now, copy and paste the code below in the blank text box and click "Save"
  
  
<!-- DROPDOWN NAVBAR -->
<!-- stylesheet for FF2, Op9, IE7 (strict mode) -->
<style type="text/css">
#navbar {
display:inline;
width:100%;
position:absolute;
background-color:transparent;
top:-30px;
left:0px;
height:60px;
z-index:999999;
}
#navbar:hover{
top:0px;
height:30px;
}
</style>
<!-- stylesheet for IE6 and lower -->
<!-- (not supporting element:hover) -->
<!-- first, unhide the navbar through css -->
<!-- second, hide the navbar and mimic -->
<!-- the effect with javascript, if available -->
<!--[if lt IE 7]>
<style type="text/css">
#navbar {
height:30px;
top:0px;
}
</style>
<script type="text/javascript">
var navbar = document.getElementById('navbar');
if(navbar){
navbar.onmouseover = function(){
navbar.style.top = '0px';
navbar.style.height = '30px';
}
navbar.onmouseout = function(){
navbar.style.top = '-30px';
navbar.style.height = '60px';
}
if (navbar.captureEvents){
navbar.captureEvents(Event.MOUSEOVER);
navbar.captureEvents(Event.MOUSEOUT);
}
navbar.onmouseout();
}
</script>
<![endif]-->
<!-- end dropdown navbar -->

  
  

That's it! Easy peasy! Now you have your very own super fancy peek-a-boo nav bar. :)

Just FYI for those of you who don't know... You can change the color of your navigation bar from your Layout/Page Elements page. Just click the "Edit" button, select your color, and then click "Save" as demonstrated below.

Tutorial: How to Add Post Dividers to Your Blogger Blog

They're here! Shabby Blogs post dividers have arrived! We've started out with 16 super sweet designs to give your blog a totally pulled together look. Browse our Shabby Extras page for the perfect divider to match your Shabby Blogs background. Not sure what to do after snagging our latest blog couture? Read on for an easy peasy tutorial!

Installing your new post divider:

1. After choosing your awesome new divider and saving it to your computer, you will need to upload it to the image storing site of your choice. I'll be using Photobucket in this tutorial.


2. All Shabby Blogs dividers are 650 pixels wide. I created them in this size to accommodate those of you with wider post sections since it is easier to shrink images than it is to enlarge them. To find out what size your divider should be, log into your Blogger account and click on "Layout" and then "Edit HTML." Scroll down to where you see the code below. The circled area will tell you how many pixels wide your divider should be.
(Click on image to enlarge)

3. Okay. Now that you know that, open Photobucket in a new tab and locate the Shabby Blogs divider you uploaded. Click on "Edit" and then "Resize" as shown below.

4. Change the width to whatever the number in your code was. (The standard width for Blogger's Minima template is 410px.) After you have changed the width, click "Apply" and then "Replace Original."

5. You are about to change your HTML code...which really freaks some people out. I promise, it is not as scary as you may think. :) Still, it's a good idea to backup your template before making any changes- which, FYI, you can do just below the tabs near the top of the Edit HTML page. Take a deep breath and scroll down in your code until you get to the text shown below. Replace this:

With this:

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

6. Now replace the highlighted area shown below with the URL (or "direct link" from Photobucket) of your stored image.

That's it! See? That wasn't too hard, was it? You can adjust the spacing (or padding) of your divider by adjusting the number 5.5 in this section of code. Preview it to see what you think and make any adjustments necessary. After saving your changes, you will be left with something similar to this:
Awesome, right? Way to go, you! :)


PS. You can also use our dividers as a footer for your blog! After saving it to your computer, just add it as a photo gadget to the bottom section of your blog like this:
PPS. You can also add your own text to our post dividers so it's a combination signature/divider as I have done on this blog. :)

Tutorial: How to Add a Custom Signature to Your Blogger Posts

Ever wonder how people get those spiffy signatures on their blogs at the bottom of each post? It's easier than you might think. Here's what to do, friends...

1. Create your signature. This needs to be sized correctly because Blogger will not adjust it to fit. I wouldn't suggest going bigger than about 170 x 70 pixels, but I'm not a fan of humongous signatures so play around with it and see what you like best. :)
2. Upload your signature to the image hosting site of your choice and copy the URL (or "direct link" if you are using Photobucket)
3. Log into your Blogger account
4. From your dashboard, click on "Settings"
5. Now click on the tab that says "Formatting"
6. Scroll down to the bottom of the page where you will see a text area next to the words "Post Template"
7. Enter the following code:
<br /><p><br /><img style="border:0;" align="right" src="SIGNATURE URL" /><br /></p><br />
8. Replace the section of code that says "SIGNATURE URL" with your own image URL
9. You can change the alignment (right) to "left" or "center" depending on where you would like your signature to appear
10. Click the spiffy orange button that says "Save Settings"

That's it! The next time you create a new post, your custom signature will be there waiting for you like an old friend. Ha! Just make sure you write your post above it.

If you would like a custom signature, but don't want to mess with creating one yourself, check out this site.

Just as a side note, my "signature" is actually a post divider- which I'm planning on showing you how to add in another tutorial. I'll give away a ton of free dividers that match our backgrounds. So fun! I'm also going to be posting a tutorial on how to get your own "peek-a-boo" navigation bar like the one at the top of my blog. Loooove that! :)

Tutorial: How to Get Your Own Grab Button

Have you noticed that grab buttons are everywhere these days? Grab buttons are images usually intended for use in a blog's sidebar that link to another site or blog. In short- it's an ad. Grab buttons are the ultimate way to show your support and to spread the word about something you dig. Here's an example of my own spiffy grab button which you may, of course, grab (wink wink)...

<a border="0" href="http://www.shabbyblogsblog.blogspot.com/" target="_blank"><img src="http://i711.photobucket.com/albums/ww111/ShabbyBlogs/ShabbyBlogsButton2-2.jpg" /></a>

Now how do YOU get one? Well, I'll tell ya!

1. Choose the image you'd like to use as your button. I'd make it no bigger than 200 pixels wide so it fits on the average sidebar.
2. Upload your cool new button to the image hosting site of your choice. (I use Photobucket, but it doesn't matter.)
3. In another tab, log into your Blogger account and go to the Page Elements page. Click on "Add a Gadget" and select HTML/JavaScript
4. Copy and paste the following code in the text area:

<img src="http://YOURBUTTONLOCATION.jpg" /> <br /> <textarea style="text-align:center" rows="4" cols="22"><a border="0" href="http://YOURBLOGADDRESS.com" target="_blank"><img src=http://YOURBUTTONLOCATION.jpg></a></textarea>

5. In Photobucket (or wherever you chose to store your button), copy the URL or direct link and paste it in both places where the code says YOUR BUTTON LOCATION.
6. Replace the words YOUR BLOG ADDRESS with...your blog address. :)
7. You can change the size of the box below your button by adjusting the numbers 4 (rows) and 22 (columns). You don't have to, but I just thought I'd let you know.
8. Build your blogging empire!

*I have a bunch of blogging tutorials lined up so let me know if there is something in particular you would like to know and I'll add it to the list!

It's all about YOU!

Finding a blog design that really reflects who you are can be difficult. Hopefully, you've been to the Shabby Blogs site and were able to find something that represented your own personal style. Adding a customized header, gadgets, and most importantly- posts, is what really makes your blog a reflection of you. Shabby Blogs is taking blog couture one step further. How about a totally customizable background that features your own photographs? I've created this design, but YOU get to make it your own. In the photo editing program of your choice, layer photos beneath the frames to create a one-of-a-kind layout that is all about you!

Here is an example of what this design will look like when finished...using my own shabby girls as models. :)

If you are new to digital scrapbooking, you can check out this video tutorial for basic instructions on how to add your photos to an image like my background.

Here's what to do after adding your photos to this background:

1. Flatten the image and save it as a .jpeg- but be sure you adjust the image quality to be less than 1 megabyte. Anything 1.0 or higher won't display right.
2. Once it's saved, upload it to Photobucket, making sure that you've selected the 1 megabyte file size upload option.
3. In a new tab, log into your Blogger account and click on "Layout"
4. Now click on the tab that say "Edit HTML"
5. Scroll down in your code to where you see something like this:

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

and replace the line I highlighted with this:
background:url(YOURLINKHERE) top center no-repeat;

6. Now, in your Photobucket account, copy the direct link to your customized background and paste it in the above code where it says YOURLINKHERE.
7. Select "Preview" to make sure everything looks right. Depending on the size of your monitor, some of the background may be cut off, but don't worry! It's impossible to size background images of this nature to fit everyone's screen perfectly and the same way. Put photos in each frame so that even if you can't see it, others who have larger screens can!
8. If it looks good to you, save it. If not, don't blame me. Just kidding! Review these steps and try again. I'll do my best to answer any questions!

*It's always a good idea to save a copy of your template before playing with the code...just in case. You don't even want to know how many times I've gone all kung-fu on my HTML only to discover I did a bad, bad thing. Save it first so you can always return to Old Faithful if you get a little too carried away. :)

Happy blogging!!!

Download