finally some tutorials

this giveaway is now closed.

since i only had 4 people comment on my tutorial post, i figured i'd show how to do all of the things (at least the ones i can show you how to do).

first, megan asked how you can put cute fonts on your blog. i learned how to do this from kevinandamanda.com. amanda makes amazing fonts, and they're all free! and she also posts lots of great tutorials. she shows how to use custom fonts for post titles/date/sidebar titles here. it's really easy to do, and she recently added some common problems people had and info to help fix all that. i know, i didn't actually write a tutorial, but there was already a great one out there. and now you'll be addicted to her fonts too. you're welcome :)

next, venassa asked how to get a horizontal navigation bar. she was wondering about a regular one and a dropdown one. the dropdown is quite complicated, and i'm still figuring out how to do it, so i'm just going to tell you have to do the regular one! so here we go!

1. from your dashboard, go to design, then click edit html.

2. add this code under right under /* Header*/

#menubar ul li{
background: none;
}
#menubar ul li{
font-size: 150%;
font-family: century gothic;
font-weight:none;
font-style:none;
list-style-type:none;
padding:0px;
margin:0px;
border:0px solid #fbcb89;
display:inline;
}
#menubar li a{
color: #fbcb89;
}
#menubar li a:visited {
color: #fbcb89;
}
#menubar li a:hover {
color: #fbcb89;
}
#menubar {
margin-left: -15px;
margin-bottom: 10px;
border: 0px solid #fbcb89;
text-align: center;
color:#ffffff;
background: none;
height: 30px;
}
body#layout #main,
body#layout #sidebar {
padding: 0;
}

3. now you'll want to customize it.

#menubar li a{
color: #fbcb89;

is the color of the link.

#menubar li a:visited {
color: #fbcb89;

is the color of the link once it's been visited.

#menubar li a:hover {
color: #fbcb89;

is the color when you hover over the link.

i usually keep the first 2 the same color and change the hover to a different color. make sure to leave the # and put the color code after it, like it is now.

you can also change the font where it says font-family, you can change the font size where is says font-size (just keep it in %), you can change the margin, which is the distance between the links (only change it in the section where you change the font), and the height in next to bottom section. you can customize more if you want (like the background and the border), but i usually don't and sometimes it requires some html knowledge.

4. ok, now you'll go down to and find this section:

<b:section class="'header'" id="'header'" maxwidgets="'1'" showaddelement="'no'"></b:section>
you can just hit control+f (or command+f if you're on a mac) and paste that in there. you'll replace the 1 with a 4 and the no with a yes. so it should look like this when you're done:

<b:section class="'header'" id="'header'" maxwidgets="'4'" showaddelement="'yes'"></b:section>

5. last, you'll add the widget with the links. if you're still in edit html, make sure to save the changes you made to the html, then click "page elements".

<div id="menubar"><ul><li><a href="URL">TITLE</a></li><li><a href="URL">TITLE</a></li><li><a href="URL">TITLE</a></li><li><a href="URL">TITLE</a></li><li><a href="URL">TITLE</a></li></ul></div><br />
you'll put the url where it says URL, and put whatever you want the link to say on your blog (like home, about, etc) where it says TITLE. if you want to add/delete any, just add/delete

<li><a href="URL">TITLE</a></li>
6. then you'll hit save, and move it right under the header. save the layout, and you'll be done!! you can go in and edit the colors/margin/size after you save it and see what it looks like!

next, mama pea and stayc asked how to get the social networking buttons. i actually made them in photoshop. you can try to make your own if you want though! make sure to make them the right size (so if you're putting them side by side they will all fit). once you've made them, upload them to photobucket. then you'll add a gadget to your sidebar. it will look kind of like the nav bar gadget. here's what you'll add:

<center><a href="URL"><img src="DIRECT LINK" /></a><a href="URL"><img src="DIRECT LINK" /></a><a href="URL"><img src="DIRECT LINK" /></a></center>

there will be a direct link to the image that you can get off of photobucket, and that's what you'll past where it says DIRECT LINK. save that, and then save the layout, and there you go! i sometimes put a few spaces between the images (which would go between the </a> and the <a href="http://www.blogger.com/URL">).

last, stayc asked how you disable your photos from being clicked on to open up your photobucket page or make them larger in a new page. if you're getting your images straight off of photobucket, just use the direct link and not the html. when you go to put it on your blog, you'll do like you did with the social networking buttons. it will be <img src="DIRECT LINK" /> you can add <center> before and </center> after to center the picture. if you upload your photos through blogger, you'll need to edit the html of the post. you'll remove the <a href="LINK"> before the <img src="IMAGE LINK" /> and the </a> after the <img src="IMAGE" />.

i think that's it. i hope that all made sense! if you have any questions/problems, just comment or email me!

oh, and before i forget, since it took me so long to post these, i've decided to give away 2 sets of social networking buttons! each set comes with 3 buttons of your choice (facebook, twitter, subscribe, email, or any others), and are valued at $15 a set!

just comment to enter to win!