How To: Blog Design

When I started blogging, I used to visit about 50 blogs a day. I was using a generic Blogger template and I found about 15 other blogs using the same template as me. I also found about 25 blogs that looked so good they made me keep coming back just so I could see how fabulous they were.

I wanted to have a unique and attractive blog but I couldn't afford it. There was only one option left for me: I had to learn How to Blog Design!

After months of trial and error, I fell in love with blog design and launched my blog design website. Now, I am sharing with you the knowledge that I have acquired by launching my latest site, How To Blog Design.

How To Blog Design is a site filled with resources and tips on how to customize your Blogger blog and make it fabulous!

So dive in! 

But remember to always download your blog template before you make any changes!

How To: Blogger Signature

You're here.

Which means you want to create and include a signature in your Blogger blog.

So let's get right to it.

First, you need to create the signature image.

You can create your signature image with any software such as Paint or Photoshop. You can also create your signature online using an Online Signature Maker (enter: google search).

Once you have your signature image, you need to upload it to a host site. I use photobucket.com because its free and easy but you can use any site you want (tinypic.com is another option).

Grab the HTML code of your uploaded image.

Next, go to your Blogger account and click on Settings. Then, click on the Formatting tab. 

Scroll down to the bottom of the page and paste your image HTML code in the box labeled Post Template.

Before you save, you need to edit your HTML code from this:

<a href="http://tinypic.com" target="_blank"><img src="http://i28.tinypic.com/bg8kt2.jpg" border="0" alt="Image and video hosting by TinyPic"></a>

to this:

<img src="http://i28.tinypic.com/bg8kt2.jpg" border="0" alt="Image and video hosting by TinyPic">  

 * This is just a sample code, remember you are editing your image HTML code.

Now you are ready to click on Save Settings.

And you're done!

When you go to create a new post, your signature will automatically upload.

Want to try it? Go on, you know you want to... Click on the Posting tab and see for yourself!



* Is there a border around your signature? Want to get rid of it? It's easy.
Go to the Layout tab, and click on Fonts and Colors. Select Border Color and set it to the color of your background.

How To: Create a 3 Column Layout

All of my blog tutorials are for Blogger blogs. 

First of all, please make sure that you download your template. If anything goes wrong you can always reset your previous blog layout.

After you've done that, you are ready to proceed.

1- Make sure that your template is set to Minima White. If you are not sure or need to change it, go to the Layout tab and select Pick New Template. There you will be able to see which template you are using and/or select Minima White as your new template.

2- If you are not there already, go to Layout then select Edit HTML.

Scroll down to where it reads #outer-wrapper and change the width value to 1000. Also change the #main wrapper width to 540. What we just did was change the width of your blog in order to fit in the third column. You can always come back and tweak it later to make it a little bigger if you want to.

3- Now, scroll further down to where you see #sidebar-wrapper. You are going to copy that entire section and paste it directly below. Add the word left- in front of sidebar-wrapper.

* If you want your two columns to the right skip step #4.

4- This step is ONLY if you want one column on either side of your post area. 

Notice that both the #sidebar-wrapper and the #left-sidebar-wrapper read float: $endSide;

You are only going to change the #left-sidebar-wrapper. Change it to float: $startSide;

5-  Next, we are going to change the template so that it recognizes that we have just added this additional sidebar and that we want to you use it. You are going to scroll almost all the way down until you see 

<div id='main-wrapper'>

Copy this code: 

<div id="left-sidebar-wrapper"><b:section class="sidebar" id="left-sidebar" preferred="yes"></b:section></div>

and paste it above <div id='main-wrapper'>

When you click Preview or save the changes and try to view your blog, you will not see the new sidebar. That is because you do not have any elements/widgets here. 

You need to go to Layout and go to Page Elements so that you can drag widgets onto your new sidebar.

* You may need to go back to the (left-)sidebar-wrapper and/or main-wrapper and adjust the width, padding or margins in order to fill up the space of your Outer-Wrapper. Add up the width of the sidebars and main post area (including padding and margins) and make sure they do not exceed the width of the outer-wrapper (we set it to 1000px in this tutorial). Widths depend on your individual design so you can play around with the numbers and "preview" your blog until it looks right.

How To: Remove Blogger Navbar

So you what to hide/remove your Blogger navbar?

This is going to take you less than 5 minutes.
* Remember to always download your blog template. You want to have your blog layout backed up in case there is a blog design catastrophe ;)

Go to your Dashboard and select the Layout tab. Then, click on the Edit HTML.

Copy this code:

#navbar-iframe {
   display: none !important;
}

 and paste it here:

Now go ahead and Save.

If you want to reveal the navbar again just go ahead and delete the code you just entered.


Interested in learning about the benefits of the Blogger navbar? Click here.