Cecille's Creativity

You need to have a photobucket account for you to upload the picture you want and to get the code.

Sign it at photobucket.com then click MY ALBUMS

You will see REDUCE TO for the size of your picture at Upload Images and Videos

Click 1 megabyte file size

Then CHOOSE FILES

Locate where you save your picture.. my document, my picture, desktop… etc.

Then you will see the save picture below. Just point th cursor on the picture and you will see links. You are going to need that DIRECT LInK CODE

NOW, at EDIT HTML at blogger.com you are going to delete this code:

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

And change it with this….

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
background-color:#FFFFFF;
background-image:url(http://i305.photobucket.com/albums/nn205/crabucay20/image36-2.jpg); <<--change this with the Direct Link code from photobucket.
background-attachment: fixed;
background-position:top center;
background-repeat:no-repeat;
border-color:#ffffff;
border-width:0px ;
border-style: solid;
}a:link {
color:$linkcolor;
text-decoration:none;
}

Save template and your done… oh! Not yet. Hehehe!

Before making changes in your blog make sure that you copy and save the HTML in a notepad or anywhere else. Just in case you don’t like the result of what you are doing. You can copy and paste it back.

1. You need to have a blogger account. If you don’t then sign up at blogger.com

2. You need to look for any background that you want for your blog. I used the “Art Explosion Scrapbook Factory (Version 4.0)” CD and they have variety of beautiful layout and you can actually make your own style layout too.

Remember: You can’t use a dark background if you are using dark color text on your blog.

Let’s Start….

Sign in at blogger.com

Then, go to LAYOUT, choose PICK NEW TEMPLATE then click MINIMA then SAVE TEMPLATE. Then go to EDIT HTML then scroll down and look for /* Header

Once there, change the text that is in red color

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

------------------------------------------------------------------------------------------------
At the bottom of the same Header section look for: #header .description {

#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;
}

-----------------------------------------------------------------------------------------------
#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 */
}

Add this between the “width and the float”
margin-right: 15px;
margin-left: 15px;

----------------------------------------------------------------------------------------------

Now, copy this code and paste it in between the "outer-wrapper" code and "main-wrapper" code.

#left-sidebar-wrapper {
width: 185px;
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 */
}

Add this in between the “width and float”
margin-right: 10px;
margin-left: 5px;

----------------------------------------------------------------------------------------------
#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 */
}

Add this in between the “width and the float”
margin-right: 5px;
margin-left: 10px;

Then locate this too. It’s just a few lines below

Now, type this above the “main wrapper”

Then click save template

Now, if you try to click VIEW BLOG you will now see the three column Minima Style.

To be continued....

I change the layout of all my blog and I made my own background except for my blog Pieces of Me. If you visit this link http://www.ccels-creativity.com/2009/01/emo-style-template.html you will notice that the background doesn’t stretch the entire length of my screen. Just last two weeks that I figured out what went wrong. :-) It was just a simple mistake.

Now, that I know how to do it. I think I will change the background of my blogs every month. AND I am going to share with you all about this CHANGE OF BACKGROUND and MAKING A THREE COLUMN STYLE BLOG.

So, visit this blog for updates.