Design your own blog

These are the instructions to making your own background for your blog. These seem a bit intense but once you start doing it, it all makes sense. However, if it doesn't, I am here to help. Once you have this format down, we will work on recognizing the html code so you can change up the blog layout and not just the background.

Changing your blog.

To change your blog you want to first find paper that you like. I like places like www.shabbyprincess.com, www.heatheranndesigns.com, www.sweetshoppedesigns.com and others. There are many that provide free kits to download which is amazing. So look for freebies. Then once you find and download the paper you like, save the ones you want to use in an online photo saving program. I prefer photobucket.com but you can use whatever you like.

Then once the papers are saved copy the DIRECT LINK for that paper. Go to layout/html in your blogger dashboard. I have bolded and highlighted where you are to insert the different pages. The first one is for the main background page, the next is for the header outline and the last is for the center page where you write. Once those are in you can click preview to make sure you like it. Before you save you NEED to go to the category HEADER. Under this category, right below the spot where you put the direct link code for the paper, you will see width and a number, probably 765 px. You HAVE to change that to 720 px and then click save.

To make a header you will need photoshop, elements, scrapbook deluxe or some other program like this to make it. Make the paper size a 12x5 and the creativity is up to you. Once your header is done, save it as a JPEG. Then go into layout/page elements in your blogger dashboard and click edit on the right hand side of the header location. You will upload the new header from your computer. Be sure that the use instead of box is clicked and the shrink to fit. Then save.

After that go back into your HTML code location and change that number you just changed to 720 back to 765 and save. This will make it fit perfectly. The reason you are switching it the first time and then again and you must do it every time, is because if you don’t it will just get bigger and bigger and you don’t want that.

From here you can go to layout/fonts and colors and switch up the colors to your liking and save.

Now you’re all set. And as always, shoot me an email or comment on my blog if you have any questions.

******The code below is just so you know where to put it, do not copy this and paste it, you already have the code so it’s not necessary. Just use this as a reference in doing yours and paste the direct links in your current html and not this one****

body { background:$bgcolor; background-image:url(INSERT DESIRED BLOG MAIN BACKGROUND HERE, USING THE DIRECT LINK CODE FROM PHOTOBUCKET OR OTHER PHOTO SERVER);background-repeat:repeat-xy; margin:0; color:$textcolor; font:x-small Georgia Serif; font-size/* */:/**/small; font-size: /**/small; text-align: left; } a:link { color:$linkcolor; text-decoration:none; } a:visited { color:$visitedlinkcolor; text-decoration:none; } a:hover { color:$titlecolor; text-decoration:underline; } a img { border-width:0; } /* Header ----------------------------------------------- */ #header-wrapper { background-image:url(INSERT THE DIRECT LINK CODE FOR THE DESIRED PAPER THAT GOES IN THE HEADER OUTLINE);background-repeat:repeat-xy; width:765px; margin:0 auto 20px; border:1px solid $bordercolor; } #header-inner { background-position: center; margin-left: auto; margin-right: auto; } #header { background-image:url();background-repeat:repeat-xy; margin: 25px; border: 1px solid $bordercolor; text-align: center; color:$pagetitlecolor; } #header h1 { margin:5px 5px 0; padding:15px 20px .25em; line-height:1.2em; text-transform:uppercase; letter-spacing:.2em; font: $pagetitlefont; } #header a { color:$pagetitlecolor; text-decoration:none; } #header a:hover { color:$pagetitlecolor; } #header .description { margin:0 5px 5px; padding:0 20px 15px; max-width:700px; text-transform:uppercase; letter-spacing:.2em; line-height: 1.4em; font: $descriptionfont; color: $descriptioncolor; } #header img { margin-left: auto; margin-right: auto; } /* Outer-Wrapper ----------------------------------------------- */ #outer-wrapper { background-image:url(INSERT THE DIRECT LINK CODE FOR THE DESIRED PAPER THAT WILL BE WHERE YOU TYPE HERE);background-repeat:repeat-xy; width: 60%; padding:2.5% 5%; margin-left:15%; margin-right:25% text-align:left; font: $bodyfont; }