Dress Up Your Blog

I LOVE to change my blog around. There are so many wonderful, free resources available and it is so easy to update the entire look of your site. Here are a few tips (humble, mind you...I am no-where-near the professional level) that I've learned along the way:


* almost everything that you find, you can right-click, save, and edit in photoshop to your liking. I always ask first, and once I get the green light from the owner of the graphic, I can easily turn it into a background, header, button, or picture for a post (more to come of how-tos later). 


*music. I love it. I want it on my blog. I had it on my blog. I took it off my blog. Why? I had a few blog-mentors explain that if someone is reading your page at work (surely not, work is work and play is play, right?) and your music pops up, that could be annoying. Or, you may have very different tastes than those who read your blog. Music is so subjective that it really is better left off of a blog. I took my music player off my blog in the event that my blog-mentors were right...but I don't hate it on other blogs...keep it, don't keep it, I will still read your blog...just passing advice given to me onto you.


*love comments? like feedback? THEN TURN OFF YOUR WORD VERIFICATION! Hurry! Have you ever left a comment, thought you were finished, and then were prompted to type some silly series of letters? Often, other bloggers get frustrated by this and will leave without leaving a compliment. I turned mine off and have nothing bad happend, I promise.  Go to your dashboard, settings, comments, scroll down until you see "Show word verification for comments" and select NO. Make sure you select "save settings" and see if you get more blog love. 


*if you plan on editing your blog, the best template is Minima. It is a little harder to find now, but still available. If you sign in, go to "design", click on the "edit html" tab near the top-left, "old templates" near the bottom,  "select template layout", and then select "minima". Save and you are ready to edit. 


*favorite places for blog goodies:
for fonts: 
http://kevinandamanda.com/fonts/
http://www.sugarfrogfonts.com/
for a free photoshop elements trial (then purchase via Amazon...so cheap)
https://www.adobe.com/cfusion/tdrc/index.cfm?product=photoshop_elements&loc=en_us
blog backgrounds:
http://www.backgroundfairy.com/
http://shabbyblogs.com/


*there are many, many, many places on the web to get free backgrounds. They are easy to install, but if you find a graphic or print you like, you can use it to. 
1. Once you have your seamless background file downloaded to your computer, the first thing you need is a place to store the file online. You will need an online host such as Picasa, Flickr, or Photobucket.
2.  If you don’t have an online photo host, I recommend Picasa. The Picasa albums are fully integrated with Blogger and you can create multiple albums that are easy to navigate. To access Picasa, visit this link:www.picasa.google.com and sign in with your Blogger account information.
3.  Simply create an album, upload your background file to the album and click on your newly uploaded background file. Once the image file is in view, right click on the image file and select “view image” or “view image property”. This will lead you to the image file property link.
4. Select and copy the image property link, it will look something like this:
http://your-background-property-link/image-name.png
You will need your file’s property link when you are editing your Blogger HTML.
Editing Blogger HTML Code:
5. In your Blogger Dashboard, select “Design”, then select “Edit HTML” and you will see the html and css for your blog template (this tutorial is using the Minima Template) . First, copy your template html so that you have a backup for your template design. Then scroll down in your css coding and find the “body” code:
body {
background:$bgcolor;
margin:0;
}
6. You are going to edit this code by adding your property file link to the background and telling it to repeat endlessly. After editing, it should look like this:
body {
background:$bgcolor 
url(http://your-background-property-link/image-name.png); repeat-xy;
margin:0;
color:$textcolor;
}
7. (Optional): Sometimes your blog may not have a middle wrap (the white background for your text), if that’s the case, find the “outer-wrapper” code:
#outer-wrapper
8. You are going to add a background color and increase the width size so that it looks something like this:
#outer-wrapper {background:#ffffff;
width: 900px;

margin:0 auto;
padding:10px;
text-align:$startSide;
}
9. Once this code is added, click “Save Template” and view your blog to see how it looks with your new background! (instructions courtesy of June Lily)


*making the main portion of your blog wider so you can make your pictures extra large and still have them fit on your blog:


To do this login to Dashboard and click on Layout under the name of your blog. This takes you to Page Elements. Then click on Edit Html tab next to Page Elements tab. This opens the Edit Template page.
Then without putting a check in the Expand Widget Templates box at the top of the Edit Template text box scroll down in the box till you come to :
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 1025px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width: 530px;
margin-left: 20px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}
#sidebar-wrapper {
width: 250px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}
#newsidebar-wrapper {
width: 170px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}


The Outer wrapper contains the main wrapper and the two sidebar wrappers. Their dimensions are described by the width parameter. Their positions are described by the float parameter. Notice that the outer wrapper does not have a float parameter. This is because its position in the center of the page is described by the "margin 0 auto" parameter. To change the width of any of the main or sidebar column change their width parameters only. Then change the width of the outer wrapper by the same amount because it has to expand to include the new width.

You will have reason to increase the width of your blog when you find your main column of posts below the sidebar or the sidebar below the posts column. This happens when a large photograph or a large link is added in the posts column. This prevents the sidebar from rising up to take its normal place besides the posts column. Increasing the width of the outer-wrapper then accomodates the sidebar.

To change the width of the HEADER scroll down in Edit Template text box till you come to :
/* Header
-----------------------------------------------
*/
#header-wrapper {
width:750px;
margin:0 auto 10px;
border:0px solid $bordercolor;
}

then change 750 to whatever width you want it to be.

SOME TEMPLATES MAY NOT HAVE OUTER WRAPPER AS A DIVISON : Then go to Edit Html under Template tab and usually the first division after 'Body' and the a links will usually correspond to the outer wrapper.