You can do it this way, using links to your separate posts:
Check out these tutorials!
How to get your own grab button
Or you can do it this way by copying the actual posts and pasting them here:
Need a little help?
Check out these tutorials!
How to add pages to your blog
Check out these tutorials!
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 get a disappearing nav bar
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 -->
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.
