Sunday, February 19, 2012

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
{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.


  1. I am slowly designing my blog. Great info

  2. I use the Simple template for my blog and I changed the fonts all around. The process that Kevin and Amanda use is crazy and way too complicated. Here's an easier way you may want to share:

    Go to the HTML coding and the first group of codes under the details of who made the template are your fonts and colors. Each is on a separate line for where it appears in the blog so it's pretty easy to figure out what you're altering.

    That's obviously the code for the header font. I like Century Gothic and use it on my whole blog. So here's what the code looks like after I customized it:

    And I did that for each area I wanted a diff font and clicked save and it was done! So easy. Just wanted to share! :)


  4. Wow Becky!! This was like HUGE ... thank you & good job!! You definitely didnt have to do this!

  5. holy shize!! did this take you FOREVER to write this post? You are much better blogger than me my friend :)

  6. Thanks for taking the time to write and post this! I'm sure it wasn't easy to do so!i usually google everything which can take so long. This definitely helps!!

  7. Thank you for posting this! I definitely emailed you about it last night haha

    Trying it now!!

  8. this is awesome. I've been wanting to do my own nav bar!

  9. Thank you so so much! I've been wanting to design my blog with a little more of my personality, and a little less " found it on the internet cuteness" and now I finally can! Thanks!

  10. You are freaking awesome :) Wish I had this a month go when I paid & booked a designer for my blog {who has a 1-mo waiting list.} Oh well....I'm sure it won't be long before I want to change things!

  11. Thank you for writing this! I've been wondering forever how everybody creates their blog designs! I'm a complete dum-dum when it comes to things like this, so this post will help me SO MUCH! It must have taken forever to write! It's definitely appreciated!!

  12. Holy crap girl! You are awesome! I have been wanting to try and change mine around or have someone just design it for me and this is going to come in very handy I'm sure. Thanks so much for sharing! You're the best!

  13. Thank you so much for writing this Becky! It's super helpful and I'm sure it took a lot of work to put together!


  14. I'm so glad my husband understands all of this stuff!!! it can be so complicated!! he has taught me lots!

  15. thanks so much for this. i am going to look into a few of these.. =)

  16. I'm redoing my blog now! Thanks for posting this! HUGE HELP!!!

  17. Thank you Becky!!!

    and Thank you Meghan! That works wonders on changing to my own fonts!!!

  18. Oh my gosh this is a life saver! As a new blogger I am totally jealous of all of the great designs I see on blogs. I have been searching for how to redesign my blog! I am going to give this a try tonight. Thank you so much!!

  19. I love your blog and am working on designing mine. I don't want to start writing until my blog looks GOOD. Do you design blogs for people or do you know who can do that for me?

  20. Because I'm illiterate when it comes to HTML (which is sad because I have a graphic design degree)can I just opt for you to make one? Puhleeeease?!

  21. This totally just saved my life! I totally used it.
    Thank you thank you :)

  22. Thanks for sharing these tips!!


 photo copyright.jpg
blogger template by envye