Blog Makeover

All About Designing Your Own Blog

After receiving numerous emails and comments about my blog design, and requests on helping others with their blog, I decided to go ahead to put a post together. All out of the kindness of my own heart. {insert awwww}

But in all seriousness, I really hope this post will help many of you. I hope that you are able to take the time and make your blog your own. Your own touches. Your own style. And all you need are just the basics. The instructions. The how-to.

Now let me just say, I am not very good at explaining things to others. My brain just doesn't operate the way that a normal individual's does, and believe me... if I were to do step-by-step instructions to you guys... it would be all over the place.

Lucky for you, I went ahead and did the research for you. Long. Extensive. Research.  And as you will be able to see, those are the categories listed above. All nice and organized for you. You are so so welcome!

Before you again, PLEASE SAVE your current template. JUST IN CASE. This is an easy step and you just go to your template tab, then click "edit HTML" and then click save. Or if you do not see a "save" button just "select all" and copy it into a word document or email and save it just in case.

Template. Design. Layout. Start here. This is very important, and will set the tone for the rest of your blog design. Decide what you like. What you don't like. Do you want the 3 column design {one on each side}. Or do you want one. Do you like that one on the left or the right. And do you want that one to split into two? So many questions, so many options. Look around on other blogs, decide what is more like your style.

Also, decide on a color scheme for your blog. If you don't know what you would like, I suggest pinterest and searching "tones." to get some ideas.

Then follow these instructions.

First. Make sure that you have the new blogger! And if you don't... stop living under a rock and change Now. Notice that little message on the top every time that you sign into blogger reminding you to switch? Yup it's just that easy.

Second. Go to template tab. Click customize. Choose "simple." {this is just the easiest template to work with designing your blog. Just do it.}

Third. Don't leave there. Stay where you are. On that left toolbar where you see the different categories, go ahead and choose layout. Now, this is where I was talking about picking what your layout. You have 8 different options. You can choose one and then click save if you want to see what it looks like.

Fourth. Adjust your widths by going to ADJUST WIDTHS on the same sidebar that you are at. As you may see, some blogs have widths that are "larger" than others. Some have the sidebars very skinny and the post area very wide. You can totally mess around with this and see what you like. Just remember that to make the widest for your entire blog 1200px if you want people to see your whole blog without scrolling to the side. You can make it wider, but just know that it will cause people to have to scroll, and people like me, might not like that. Too much work for us lazy people. While adjusting your entire blog, you can also adjust your sidebars. Now, for my sidebar I have 430px. I used to have 2 sidebars on the right and it would still say "430px" but it was obviously split between the two. If you have only one sidebar... I suggest making it at least 200px so that you can fit the buttons that people have {if you choose to} that are usually 200x200. Again, the options are endless. You can totally play around with this.

Fifth. Background. Do you want one? Yes? No? Your choice. Either way, click the Background tab on that sidebar. Then you can either browse around the backgrounds that are given to you by blogger, or you can find your own. I suggest finding your own. Where do you find them? Well, the easiest place for me has been google images. Just search things like "grey pattern" or "classic background"... whatever your little heart desires. Save the image. Then upload it where it says background image.

Sixth. Fonts, colors, and lines, and more. Next go to advanced tab where you will find an assortment of goodies for you to work with. You can change the fonts of your header, your date, the sizes of your fonts, and most importantly the colors. Obviously choose colors that go with your overall color scheme.

Navigation bar. Deals with a lot of HTML and coding. This is more detailed and requires that you actually have to pay attention to the step-by-step instructions. Remember when I said that I don't provide those? Yup. Lucky you, I found some great sites for you to go to do get those instructions. Once you are able to figure out the coding, you are squared away and can change the colors at any time!!

Okay here is one website: Instructions-Navigation-Bar
Color codes to change the colors: Color Wheel


If you are familiar with HTML {even just a little, how to get there and such} then here my quick version of how to do it. It's actually very simple.

copy this: {delete the **} **<center><a class="navigation" href="LINK URL">TAB NAME</a>**

You can copy and paste this below, just make the changes that I noted above for colors and so forth to your liking.

}
a.navigation {
background: #FFFFFF;
color: #74710;
margin: 1px;
padding: 1px 50px 1px 1px;
border-width: 0;
text-transform: uppercase;
text-decoration: none;
font-weight: none;
}
a.navigation:hover {
background: #FFFFFF
text-decoration: none;

Fonts. You can also change your fonts of your blog if you don't like the fonts that are provided to you by blogger. I honestly would suggest not to do this, as it is very extensive and requires some time. And now that blogger offers more than the 7 fonts that they previously had, you have much more to choose from and play around with.

However, if you still are determined to have something different, then I would suggest this website. It will tell you step-by-step instructions on how to do it. I actually used it with my old blog design and loved it. However, again, it required a good amount of time, and I messed up a few times.

Gadgets. These are fun. And by gadgets I mean like the "Twitter" link and the "Facebook" link and the "about me" link that people have on their blog. You can make it simple on yourself by just uploading the images as "pictures" but it is much easier. See below my example of what I am talking about.

The code to use for these gadgets is not the complicated part. You actually have to create them. Now if you have a PC, then I would suggest using "paint" or if you have another program, a better one, use that. Make sure to change your dimensions according to where you plan on putting this gadget. Remember how you changed your sidebar px {width}? Well remember this number so that you don't make the image too wide and make it go past the dimensions of your blog. For instance, mine is 430px, however, I use 380 as my max {not sure why, but when I go higher, it extends even longer}. So if yours is say 200, I would suggest doing 180 for width.

Same goes for MAC, however the program used is paintbrush. You can download it here for free.

My example of a gadget that I have on my blog. This is all one "HTML" gadget.

The Code Example used for the above gadget

1. change the URL to where you want that specific tab to go to {i.e. your home page}
2. Change the next URL to the URL of your image.
3. You can copy this same code multiple times to make additional tabs like I have done above with my picture, then twitter, facebook, email, etc. Now obviously the first URL will go to not your home page of your blog but like your twitter account or facebook, etc. And then that second URL will go to your image link address.

Next, upload your image to a hosting site. I use facebook. Or you can use photobucket, or flickr, or whatever. You can also use your own blog to upload it {and then delete it later}

After you upload it, right click on the picture to get "image address."

Now, go to "ADD GADGET" and then click "HTM" and then paste the code that I have listed above with the changes according to your site and images. Copy that code and paste it multiple times if you have multiple images {making the changes as stated above}.

Here is the quick shortcut of how you will be doing this:

I actually had a very quick and easy way to do this, however I cannot for the life of me find the link where I found how to add my signature and the rest of the details {twitter, facebook, etc} onto my posts.

And actually, that makes me mad.

So I have some links that you can use to follow their instructions. Now, I have not used these links to do mine, so unfortunately, I cannot be of much assistance to you in that area.

Website: Signature

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

MAKING YOUR OWN BUTTON:
{under construction}.... I totally forgot to add this in.

Design your button. Using either paintbrush for mac, or paint for PC. Remember to change the dimensions based on what size you would like your button to be. And as a reminder, 200x200 is usually standard... however you can totally play around with it.

Upload your blog button to an image hosting site {i use facebook}. Then right click on the image and select "copy image address"

Next, Go to "Add HTML" on your blog layout page.

Copy this code below, replace the YOUR URL with the direct link to your website. And replace the IMAGE URL with the address that you just copied from your picture. MAKE SURE TO DELETE THE QUOTATION MARKS AT THE BEGINNING AND END!

" <center><a border="0" href="YOUR URL HERE" target="_blank"><img src="IMAGE URL HERE" /></a>
<center><textarea rows="2" cols="25"><a border="0" href="YOUR URL HERE" target="_blank"><img src="IMAGE URL HERE" /></a></textarea> "


If you don't want it centered... just delete the center right at the beginning of the CODE, and if you don't want the text centered... delete the second center before the text html begins.

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

Well, that is all I have folks. This post actually turned into a lot longer than I had anticipated. And a lot of my time was spent putting it together. I explained things to the best of my ability... and if you still need more information or are confused, then my suggestion, and what worked for me, would be google.

Oh, for the love of google.