Friday, July 31, 2009

Tutorial: How to Make a Three Column Template

As you may have noticed, there are a lot of blogs out there that have 3 columns, but that Blogger doesn't offer that as an option when you are starting out your blog. And probably many of you are like me, we want one but we don't know what it is called to google it! LOL. I found out totally by chance, I was actually looking for something else.

Anyway, here is how you do it step by step.

Remember! Before making any changes, like always backup your blog settings. You can do this by going to -Layout-, then -Edit HTML- and there is a link near the top that will ask you if you want to "Download Complete Template". Do that.

*These changes are designed for the Minima (white) template. To change yours to this, go to Layout, then click on Pick New Template. Then select Minima and save. MANY people have tried this tutorial ignoring this and then get upset when they can't get it to work.

1. Go to -Layout-, -Edit HTML-
2. Look for this line of code:



3. Now COPY the whole thing I have above, and paste it directly underneth itself. So it will be there twice.

4. Now on the bottom one you just pasted, you need to change some of the wording so it will look like this: #left-sidebar-wrapper and then change this: Float: left;

5. Great! Now you need to scroll up a bit until you see this:Now you will have to add the code in red above, this gives space for the new column.

6. To make more room, we need to adjust a few more numbers:

#outer-wrapper {

width: 880px;

#main-wrapper {

width: 425px;

#sidebar-wrapper {

width: 200px;

#left-sidebar-wrapper { width: 200px;

7. Next you will need to hit "Ctrl F" and type in Or Just look for this piece of code near the bottom.

8. When you find this piece of code, paste the following directly above it!




9. Now you will want to adjust your header so that it fits your new look! Find the following and change the parts highlighted.

#header-wrapper {

width:1000 px;

margin:0 auto 10px;

border:0px solid $bordercolor;

}

#header {

margin: 5px;

border: 0px solid $bordercolor;

text-align: center;

color:$pagetitlecolor;

10. Click and save your template. You now can go to Layout and move your elements around. You now have 3 columns!!

*when changing out your backgrounds, DO NOT reset your template -- you don't have to.

You may notice that your words are touching the sides of the columns, later I will post a tutorial on how to adjust Margins and Padding, so stay tuned.

Update: If your columns are too close or one of them is on the bottom, please see my new Tutorial on adjusting your margins and padding: Click here!

Thursday, July 30, 2009

Tutorial: Marquee (Scrolling) Blog Rolls

This took me a long time to figure out on my own. Fellow bloggers REALLY didn't want to share this tip! And it is so simple!

1. Open an HTML/Java Script gadget.
2. Copy and paste this code:

3. Then paste the codes for your links or buttons or whatever you want to scroll.
4. You can change some of the settings if you want.
scrollamount = how fast you want it to go.
direction = is which way you want it to scroll.

5. After all your stuff is pasted in, end it all with this:


6. Then just save it and move it where you want it. Here are a few examples:





Photobucket


Notice that it stops when you put your mouse over it. Too cool.

Tutorial: Navigation Buttons

If you look right under my header, you will see some page navigation buttons. Several friends have asked me how to do them, and truth be told, it's a cinch. Disclaimer: Please back up your blog before making any changes.

1. Go to <Layout> then <Edit HTML> *now don't let yourself be intimidated by all this code if you are a newbie to blogging. (to back up your blog, you can click on the Download Full Template link located on this page in blue.

2. You want to find the line that says: (you can find it easy by clicking <Ctrl F> and then typing it in.

3. Right above this line, cut and paste this code:

a.navigation {
background: #000000;
color: #ffffff;
margin: 1px;
padding: 5px 35px 5px 5px;
border-width: 0;
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
}
a.navigation:hover {
background: #5d5d54;
text-decoration: none;
}

4. Then you have to place the navigation buttons where you want them by saving your template and going to -Layout- then -Page Elements-, and -Add a Gadget-. Create an HTML/ Java Script box.

5. Copy and paste this in the HTML/ Java Script box:


6. It will look different when you paste it, weird I know. Anyway, you can replace the words with what links you want and their URLs. The instructions are kind of within the code you will paste. You can add as many navigation links as you want. Save it and place it where you want it! Click and drag the gadget so that it is located under the header for the best look.

7. At this point, you can go back into the HTML editor and change the colors of the links. You will need to use a HTML color code. I really like this one: HTML Color Code Chart.

If you have any questions, if I wasn't quite clear, feel free to leave me a comment or email me.

Patriotic Buttons/ Blinkies

In honor of the 4th of July, my new soldier, and just because I love my country (and Photoshop)I made these blinkies to share with all my new friends. For all blog newbies: just copy the code below the blinkie you like, and paste it in an HTML/ Java Script gadget in your layout. (Backgrounds from www.scrabookflair.com).























List of Tutorials

I am constantly adding to this list, so fill free to check by often!
Thanks,
-Cat

Blog Basics:
Starting a Blog
How to Comment

Design:

Add a Label Cloud
Add a Signature to your Blog Posts
Add Fun Post Dividers
Adjusting Margins and Padding
Add Background Color and Borders to Sidebars and Post Area
Add Borders Around your Words
Center Buttons and Pictures
Change your Font Size
Make a 3 Column Template
Make your own Background and Other Tips
Position your Background
Remove Borders Behind Headers
Remove Lines Between Sidebar Items and Posts
Text Decoration
Marquee (Scrolling) Blogroll
Navigation Buttons (simple)
Navigation Buttons (Fun & Creative)

FYI:

How to Capture Screen shots
How to get an Add a Gadget Bar by your Header
How to Network your Blog on Facebook
Upping your Traffic: Using the "Link Within"
How to take the .blogspot out of your address

Other Fun Stuff:


How to Make Your Own Blog Button
Blog Widget by LinkWithin