Blogger’s templates are hard to work with because they don’t look very professional and having close to no knowledge on HTML and CSS, customizing can be a bitch. With so many people these days using WordPress or Squarespace, it often feels like using a blogger blog can get you left behind.
However, there are ways to make your blogger blog look, well, less like a blogger blog without paying $50 for a customized template by a designer or learning HTML. Today, I’ll be showing you how I got my blog from this:
to this:
So first, because I have very little grasp on HTML, I chose one of the original blogger themes to work off of. I chose the Simple theme, which is provided by Blogger, and chose the one with the white background, just to have a blank slate to work off of.
Next, I went to the template customizer in Blogger. I went to the adjust widths tab and played around, making my entire blog’s width to around 1300px and my sidebar width to 400px. Then I went to advanced tab and adjusted my fonts and font sizes and colors, leaving the background white.
You’ll notice that my blog uses a font that isn’t in Blogger’s selection in the blog customization page. I’m using the font Quicksand, which is a google web font. To use this font instead of the font’s Blogger offers, I used this super simple tutorial.
Now, onto the real stuff: how to remove the little things that make your blog scream “Blogger blog!”
Side note: I am now using WordPress instead of Blogger, but these tips are still relevant to you!
1. Add your own header
To add your own header instead of Blogger’s default header, go to Layout > “Your Blog Name” (Header). Click edit in the bottom right hand corner, then upload your own picture or paste in the URL of a picture you’ve previously uploaded. For placement, be sure to click “Instead of title and description.” Then click save, and you’re done!
2. Remove the blogger navbar
To remove the little Blogger navbar on top of the blog, go to Layout and in the upper right hand corner you should see a block that says Navbar. Click edit in the bottom right hand corner, then select the off option.
3. Remove the Blogger Attribution
To remove the Blogger attribution from the bottom of your site that says “Powered by Blogger,” go to Template > Customize > Advanced > Add CSS (this is all the way at the bottom). Then paste the following code into the box:
#Attribution1 { display:none; }
This should completely remove the text from the bottom!
4. Remove the “Subscribe: Posts (Atom)”
To remove the “Subscribe: Posts (Atom)” from the bottom of the page, go to Add CSS again and paste this code into the box:
.feed-links { display:none; }
5. Remove the dots between the pagination
These dots are in between the links for Home and Older Posts and Newer Posts at the bottom of your posts. To remove them, go to add CSS once again and paste the following code:
.blog-pager { background: none!important;}
6. Remove the shadows from your images
To remove the shadow from the images in your blog, post this into the Add CSS text box:
.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;
}
Obviously I also changed simple things such as removing default gadgets, changing the placement of the Pages Gadget, and adding my own custom gadgets, but that’s a whole different post.
Hopefully you found this tutorial helpful! Feel free to leave any questions you have in the comments.
P.S. Want even more helpful tips? Check out the next installment of this series: More ways to unblogger your blog!
Pin this for later!
