How to Make Your Blog Look Like It's Not on Blogger

My blog is hosted on blogger. Can you tell? Probably not. I have removed the blogger navbar, the attribution that says "powered by blogger" and I changed my favicon to my own logo instead of blogger's logo. 

I also removed almost every blogger gadget on my blog and replaced them with HTML gadgets that give me more customization and are easier to edit and from my point of view I got rid of those annoying little wrenches and pencils called "quick edit" tools. 

I've also edited my HTML itself. HTML is all the code that goes together to create your blog. I've added HTML Gadgets but I've also edited the HTML backbone itself. 

Today we are going to get into a little HTML editing and adding a little CSS code. Don't worry I'm not going to get to in depth with HTML editing. Today the HTML editing is all just search and delete.






1. Custom Favicon

The favicon is the little photo on the page tab of your browser and next to the URL. By default since you are being hosted on blogger this photo is the blogger logo. You can upload your own custom image such as your logo or a photo of yourself. Something that makes the blog your own. I'm starting with this one since it's the easiest to change. 

1. Go to Dashboard>Layout.

2. The Favicon is at the very top. Click on Edit>Choose File

3. Choose the photo you want to use. Make sure it is a square image.
Tip: Use something big and easy to see. I used to have my logo's image and my name since that is my full logo but I changed to just the image since it is easier to see.

4. Click save and now your have a custom icon! 
Note: It can take up to 24 hours to update.





2. Removing the Attribution

The attribution is the text at the bottom of the page that says something like "Template by _____. Powered by Blogger" or just "Powered by Blogger"

There are 2 ways to do this, one with CSS and one with HTML. If your remove it with CSS it just hides it. If your remove it with HTML you remove it completely and you can put your own text in it's place with a text box.



CSS Removal

1. Go to Template>Customize>Advanced Settings>Add CSS

2. Copy the following text and paste it in the CSS box.

#Attribution1 {
display: none;
}

3. Scroll to the bottom and see that the attribution is gone. Click "Apply to Blog"



HTML Removal

1. Go to Template>Edit HTML>Jump to Widget>Attribution1

2. Look for this line of code:

<b:widget id='Attribution1' locked='false' title='' type='Attribution' visible='true'>

Change locked='true' to locked='false' This will allow you to remove the Attribution and replace it with your own text box

You can put a text box in the footer above the attribution that your have hidden with CSS but by removing it this way you won't have a large blank space at the bottom of your blog.





3. Removing the Blogger Navbar

You can remove the blogger navbar by simply turning it off.

Go to Dashboard>Layout>Navbar>Turn off>Save

Or you can remove the whole thing so you don't see it on your layout template and you will remove the gap left by the navbar.

1. Go to Template>Edit HTML>Jump to Widget>NavBar1

2. Find this code:

<b:section class='navbar' id='navbar' maxwidgets='1' name='Navbar' showaddelement='no'>
    <b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar' visible='true'>
      <b:includable id='main'>"..."</b:includable>
    </b:widget>
</b:section>

3. Delete it all.

4. Click preview template to make sure all the code is right and hasn't messed up anything. Then click "Save Template"

And the navbar and its gap are gone!

4. Adding a Custom Header

You can use an image as your header instead of the one Blogger gives you. You can edit it in photoshop or even Google Picasa. Here's how your add it.

1. Go to Layout>Edit Header>Choose a file

2. Once your photo is uploaded choose the "Instead of title and description" option and make sure "Shrink to Fit" is unclicked

3. Click save and your have a cool new header





5. Removing the "Quick Edit" Symbols

The quick edit symbols are the little wrenches and pencils you see when you load your blog. Only you can see them but it gets annoying. Hiding them is simple. Just a little CSS code.

1. Go to Dashboard>Template>Customize>Advanced>Add CSS

2. Copy this code:


.quickedit{display:none;}

Add paste it in the box

3. Click "Apply to Blog" And those little wrenches and pencils are gone!





6. Removing the "Subscribe to: Post (Atom)

1. Go to Dashboard>Template>Edit HTML

2. Click anywhere in the box and hit "CTRL+F" to open a search box.

3. Search for this code:

<b:include data='feedLinks' name='feedLinksBody'/>

4. Delete this line. Preview your template and the ATOM Feed should be gone.

5. If all is well click "Save Template" and the Feed is gone!





7. Remove the Google+ About Me

Layout>Click Edit About Me>Click Remove

You want to remove this and add a custom About me with a text box or add an about me page. I've added a photo with an HTML Gadget and added a small "Welcome" with a text box then made an About Me Page.





If you have anymore blogger items you'd like to remove from your blog leave them in the comments below and I'll see what I can do.

If this tutorial has helped you please consider leaving a like. It'd be much appreciated!

Thanks for reading this post! I hope you enjoyed! If you have any questions or concerns please feel free to message me!

Twitter | Instagram | BlogLovin | Facebook