Blogging 101: 6 Things to Remove from Your Blogger Template

Hi everyone! I am so sorry for being inactive for these past few weeks. A few weeks ago I was sick for a whole week, and I also just got back from my dad's hometown in Bali several days ago.
And oh, as you guys can see, I have changed my blog template as well yay! Actually I was bored with my old template, that is why I decided to re-design my template a few weeks ago, and I spent almost three days working on this new template. I think this new blog design looks a lot more simple and clean than the old one, but still girly with a touch of pink here and there. And for all the watercolor elements on this blog, I drew them manually using watercolors, so I am sorry if they are still a little messy.

Well, talking about blog design.. today I am going to share some easy and quick tips about blog design to all of you.
I really hope these tips would be helpful, especially for those of you who want to start a blog or do a simple re-design by yourself!

I really love reading other blogs.. but as a reader, I think too much clutter on a blog sometimes overwhelms me until I can not focus on the blog content. So, here is a list of six basic elements that you need to remove from your Blogger template~

• Remove the Blogger navbar

To get rid of the navigation bar that appears by default at the top of your blog :
Go to the "Layout" tab -> look for the "Navbar" -> click "Edit".
When the pop-up window appears, scroll down and select "Off", then click "Save".

• Remove the border & shadow from your images

To remove those annoying borders and shadows around Blogger images :
Select the "Template" -> click "Customize" -> click "Advanced" -> click "Add CSS".

Paste the following code to your "Add CSS" box, then click "Apply to Blog".

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,

.BlogList .item-thumbnail img {

 padding: 0 !important;

 border: none !important;

 background: none !important;

 -moz-box-shadow: 0px 0px 0px transparent !important;

 -webkit-box-shadow: 0px 0px 0px transparent !important;

 box-shadow: 0px 0px 0px transparent !important;

}

• Remove the comment section on your pages

To disable comments on your blog pages, such as About and Contact :
Go to "Pages" -> click "Edit" on the selected page -> click "Options".
Under "Reader Comments", select "Don't allow, hide existing", click "Done", and update the page.

• Remove the "Powered by Blogger" attribution

To remove the attribution gadget in the footer that says "Powered by Blogger" :
Select the "Template" -> click "Customize" -> click "Advanced" -> click "Add CSS".

Paste the code below in the "Add CSS" box, and then click "Apply to Blog".

#Attribution1 {
display: none;
}

 

• Remove the "Subscribe to Posts (Atom)" message

To remove the "Subscribe to: Posts (Atom)" message at the bottom of your home page,
and "Subscribe to: Post Comments (Atom)" message on your post page :
Go to "Template" -> click "Edit HTML". Using your keyboard's search function (CTRL+F or CMD+F),
search the following codes and delete them.

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

and

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

Click "Save Template".

• Remove the "Showing Posts with Label" message

To remove the "Showing Posts with Label" message that appears when a reader clicks on a label on your blog :
Go to "Template" -> click "Edit HTML" -> click "Jump to Widget" -> select "Blog1".
And you will see the code below.

<b:includable id='status-message'> ... </b:includable>

Then click on the black arrow on the left to expand the code.

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

Replace it with the following code.

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

Click "Save Template".

Well, if you are hesitant to edit your HTML code, just be sure to backup your template and preview the template first before you change anything on your blog and save it, just in case something goes wrong.

And if there is anything else you would like to know or if you have any questions, just let me know in the comment section below!

Thanks for reading, and have a lovely day ^^

See ya~