Thursday

New Backgrounds

Here are the newest backgrounds. To apply them to your blog, remember the name of the background you want (written just below the background), and click here. At www.GirlieBlogs.com, you'll only have to copy and paste code into your blog ONE TIME! After that, you'll just change the "name" of the blog's background image to the next one you want.

Sweettweet

Jillian

Tristin

Gina

Amelia

Angie

Cinderella

Michelle

Katie


Brave

The Code:

The best part about GirlieBlogs, besides the great backgrounds, is that you only have to add all the gobbledigook code ONE TIME! Isn't that so nice?

Ready to get started...here's how you do it:

To change the code in blogger, click on your "Layout" tab. Then, in the middle of the page, click on "Add a Gadget".

Look for "HTML/JavaScript" and hit the (+) sign.

In the large "content" box, copy and paste this code EXACTLY:

<script>document.write(unescape("%3Cstyle%20type%3D%22text/css%22%3E%0Abody%20%7B background-image %3A%20url%28%22http%3A//s195460054.onlinehome.us/blog/MICHELLE.jpg %22%29%3B%20background-position%3A%20center%3B%20background-repeat%3A%20no-repeat%3B%20 background-attachment %3A%20fixed%3B%20%7D%0A%3C/style%3E%0A%3Cdiv%20id%3D%22tag%22%20 style%3D%22position%3Aabsolute %3B%20left%3A0px%3B%20top%3A30px%3B%20z-index%3A50%3B%20 width%3A150px%3B%20height%3A45px%3B%22%3E%0A%3Ca%20href%3D%22 http%3A//www.girlieblogs.blogspot.com%22%20target%3D%22_blank%22%3E%0A%3Cimg%20src %3D%22http%3A//s195460054.onlinehome.us/blog/gbl.png%22%20border%3D%220%22/ %3E%0A%3C/a%3E%3C/div%3E%20"));</script>



Change the name above in RED to the name of the new background you'd like to have applied to your blog, and use UPPER CASE letters so that you can easily find it next time (as it won't be in red for you). It may not work, if you type it in lowercase. So if it's not working, check here first to see that you typed the name in Upper Case letters.

After adding this code the first time, all you'll need to do to change the background is to go back to your Layout tab and edit your new "HTML/Java Script" gadget. Replace MICHELLE with the new name of your choice. (The name is always just below each new background.)

And VOILA, You're done!

You'll never have to copy and paste a bunch of code again!! Isn't that so easy? I hope you enjoy your new backgrounds, and thanks again for visiting www.GirlieBlogs.com!

Adjusting the Margins

In the earlier related post, we showed you how to turn your free two column Minima Blogger template into a three column Minima template. After you get your three columns all set up, you'll probably want to adjust your margins. Your blog will be fine without this step, but you'll probably notice that your columns appear "squished" in together. Have no fear, it's easy to fix, and once you learn how you can customize your blog's look to almost any desire.

This post is for adjusting margins in "Layout Version". If you forgot which version you're using, just go into your dashboard and look to the left of the "View Blog" link. If the tab there says "Layout", you are using the Layout version of Minima and this post is for you. If it says "Template" there instead, then you are using the "Classic" Template version of Minima and those instructions are here.

Like the instructions for adding columns, these instructions are also simple and easy, and you can do it if you don't know the first thing about HTML.

In the Three Column Blogs tutorial on adding a column to Minima in Layout, you made room for the new column by increasing the width of the page to 940 pixels.

Consequently, when you adjust your margins, the width of the sidebars, the main post column and all the margins must collectively add up to 940. If they exceed 940, one of your columns will drop to the bottom of the page. If they are less than 940, you will still see all three columns but the layout will be asymmetrical. So get out your calculator and let's begin!

First, open up Blogger and go into your Dashboard, then click on the "Layout" tab. Then go into the "Edit HTML" tab. Next, scroll down (or use CTRL+F) to where it says:

/* Outer-Wrapper
----------------------------------------------- */

Now, you are going to paste some code in to add margins to your new columns. It's helpful here to remember the "ctrl c" trick to copy and "ctrl v" to paste - it's much faster and easier. The code you are going to paste in will be the exact same every time. It is:

margin right:
margin left:

First, we will add margins to the "left-sidebar-wrapper". To do that, paste the following code in between the sidebar's "width" and "float" designations:

margin-right: 10px;
margin-left: 5px;


Next, we will move to the "main-wrapper". Paste the following code in between the main-content's "width" and "float" designations:

margin-right: 15px;
margin-left: 15px;


Then, we'll do the same thing for the right sidebar wrapper, which is identified in the code as the "sidebar-wrapper". Paste the following code in between the right sidebar's "width" and "float" designations:

margin-right: 5px;
margin-left: 10px;


Now for the math. These margins added 70 pixels to the main page, so we'll need to reduce the width of the columns by a collective 70 pixels. In this example, I have chosen to reduce the width of the two sidebars, but you can also reduce the main post width alone, or all columns together. This is what you need to do in order to reduce the sidebar widths:

#left-sidebar-wrapper {
width: 220px;<-------change to 185
margin-right: 10px;
margin-left: 5px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 220px;<-------change to 185
margin-right: 5px;
margin-left: 10px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Your finished block of code with the new margins should now look like this:


#left-sidebar-wrapper {
width:
185px;
margin-right: 10px;
margin-left: 5px;

float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#main-wrapper {
width: 500px;
margin-right: 15px;
margin-left: 15px;

float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width:
185px;
margin-right: 5px;
margin-left: 10px;

float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}



Hit "preview" to see your new three column blogger layout with margins, and then save the template if everything is ok. And now you really are a now master minima coder! Not only are you completely done, but you are also armed with enough knowledge to increase the width of your columns and main page in order to fit custom widgets and other "non-google" add-ins.

Best of luck with your blogging. I hope this article on adding margins to your three column template was helpful!

********************************************************
This content is from: www.threecolumnblogger.com.

3-Column Minima: Template Changes

I started this blog because, like everyone who gets into blogging, I wanted to add a third column to my Minima template. Sadly, I also knew absolutely nothing about HTML, and nowhere could I find instructions that were all in one place and easy to understand. Three Column Blogger was then born.

These instructions are simple and easy, and you can do it if you don't know the first thing about HTML (which is perfect, because I don't). Minima is one of the simplest templates to modify, and it's also easy on the eyes, so both readers and bloggers like it.

This post is for adding a third column to Minima in "Layout Version". To check which version you're using, go into your dashboard and look just to the left of the "View Blog" link on the top left of the page. If the tab there says "Layout", you are using the Layout version of Minima and this post is for you. If it says "Template" there instead, then you are using the "Classic" Template version of Minima and those instructions are a bit different. But don't worry, I've posted instructions for three column Minima in Classic Template version here.

So let's get started! First, open up Blogger and go into your Dashboard, then click on the "Layout" tab. Then go into the "Edit HTML" tab. You will see a bunch of gobbledygook and gobbledygook it shall remain - you don't need to know anything about it. Just scroll down through the code until you see :

/* Header
-----------------------------------------------
(Note: you can also use your browser's control F (CTRL+F) command to search for this section. Just type in /* Header and then click the "next" button)

Now, change the width of the "header-wrapper" from 660 to 940;

#header-wrapper {
width:660px; <-------change to 940
margin:0 auto 10px;
>border:1px solid $bordercolor;
}

That piece of code should now look EXACTLY like this:

#header-wrapper {
width:940px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

Also, at the bottom of the same Header section, change the max-width from 660 to 940:

#description {
margin:0 5px 5px;
padding:0 20px 20px;
border:1px solid #eee;
border-width:0 1px 1px;
max-width:660px;<-------change to 940
font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.2em;
color:#999;
}

That piece of code should now look like this:

#description {
margin:0 5px 5px;
padding:0 20px 20px;
border:1px solid #eee;
border-width:0 1px 1px;
max-width:940px;
font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.2em;
color:#999;
}


So far so good. Next, scroll down (or use CTRL+F) to where it says:

/* Outer-Wrapper
----------------------------------------------- */

Now, just like you did in the Header above, change the "outer-wrapper" width from 660 to 940, and (2) change the "main-wrapper" width from 410 to 500

#outer-wrapper {
width: 660px; <-------change to 940
margin:0 auto; padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 410px; <-------change to 500
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Next, take this new block of code (in red) and paste it in exactly as it appears directly in between the "outer-wrapper" code and "main-wrapper" code. It's helpful to use "CTRL C" to copy, and then "CTRL V" to paste, if you didn't already know that trick. Regardless of how you do it, you must paste it in between these two code blocks, nowhere else.


#left-sidebar-wrapper {
width: 220px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}


The new code block should look exactly like this:


#outer-wrapper {
width: 940px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#left-sidebar-wrapper {
width: 220px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#main-wrapper {
width: 500px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}



Then scroll way down the page to the footer section (or use CTRL F), it looks like this:

/* Footer
----------------------------------------------- */

Change the width of the "footer" from 660 to 940.

#footer {
width:660px; <-------change to 940
clear:both;
margin:0 auto; 10px
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

At this point, believe it or not, there are only two more steps. This particular step is hard only because you need to make sure you paste the additional code in the right spot, and this next spot can be a hard place to identify (CTRL+F helps here a lot).

Anyway, in the same footer section that you're now in, scroll down until you see:


<div id='content-wrapper'>


Then, locate the the "main wrapper" id a few lines below it. It looks like this:


<div id='main-wrapper'>


Now, just above the "main wrapper" id, paste in the following code EXACTLY as it appears below:


<div id='left-sidebar-wrapper'>
<b:section class='sidebar' id='left-sidebar' preferred='yes'>
<b:widget id='BloggerButton1' locked='false' title='' type='BloggerButton'/>
</b:section>
</div>


Note: this will also temporarily insert the Blogger logo button into your new sidebar, but you can delete that and add the widget of your own choice after you finish adding the column. If you get an error message that says the widget ID should be unique, you have an existing blogger button already loaded in your original sidebar and you'll have to delete that one temporarily. If not, there's no need to worry about it - the button is just a placeholder and you can replace and rearrange all of your widgets when you finish.

So, after you do that, the newly modified section should now look like this:


<div id='content-wrapper'>

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>

<div id='left-sidebar-wrapper'>
<b:section class='sidebar' id='left-sidebar' preferred='yes'>
<b:widget id='Gadget1' locked='false' title='Geo IP Tool' type='Gadget'/>
</b:section>
</div>


<div id='main-wrapper'>



And you are a now master Minima coder, because you're done! Hit preview to see your new three column Minima layout, and then save the template. Now you can go into the "Layouts" and add a new google gadget of your choice. You can also read this article for instructions on how to adjust your margins to make more space in between your columns.

Best of luck with your blogging. I hope your new three column Minima template helps make your blogging even more fun and enjoyable!

*****************************************************************
This content is from: www.threecolumnblogger.com.
For more Blogger templates in 3 columns, visit her site. This is all you will need to convert your blog into 3-columns for using my 3-column backgrounds.

Why add a third column to Blogger?

If you're interested in adding a third column to your free blogger template, search no more. Our blogger tutorials will teach you everything you need to turn your two column blog into a three column blog.

Not only will we show you how to quickly and easily add a third column, but we will show you how to position your new column too. Do you want a new sidebar to the left of the main post? Or do you want your new sidebar to be to the right of the new post, next to the existing sidebar? Or do you want FOUR columns??

Customize Your Blogger Layout

There are many free third-party, three-column template downloads available online. However, downloading hacks can create several disadvantages. First, you may be disappointed with the specific template design, and if so you will not have the knowledge to modify it. Also, to the extent you've already customized your Blogger layout, you may lose all of those customizations if you download a hack. Adding all those customizations back can be a painstaking waste of time.

Also, many free templates have not been updated and that means they will contain outdated, incompatible code. Worse, some unscrupulous programmers may have embedded malicious code within their templates. There's no reason to take these risks, because modifying your existing Blogger template really isn't all that hard.

The Advantage of Free Blogger Templates

The free templates provided by Blogger are current and up to date, and there is no risk of harming your computer. Blogger updates, when they inevitably occur, will still support your existing Blogger template even if you've customized it, but they may not be so kind to a third party work-around. What's more, I guarantee you that you will get to the point of wanting to customize your blog template, and the knowledge you will gain from adding a third column on your blog will give you the confidence and knowledge you need to succeed in customizing it even further. This approach gives you total control over the layout and look of your blog.

If you have an existing blog and merely want to expand the template to include another column, our tutorials will be extremely helpful. The sole focus of Three Column Blogger is to show you how to add a new sidebar to your Blogger template - that's it. Tutorials on adding columns and sidebars is all we write about. Our tutorials will also show you how to adjust the margins and padding and other things incidental to adding a new column or sidebar.

Add a Third Column to Blogger Easily


So if adding a third column to your blogger template is what you want to do, you've come to the right place. Our tutorials will show you how to add a third column to any free blogger template quickly and easily. We offer step by step, template-specific instructions. No more guessing or translating from one three-column tutorial to another. We show you specifically how to add a third column to YOUR blogger template. We look forward to helping you achieve your third column nirvanna soon!

*********************************************************
This content is from: www.threecolumnblogger.com.