Blogger Hacks

A compilation of the best hacks
to Google Blogspot / Blogger's standard templates.

Important Note
Although you will find easier guides on the web, you don't need to read this page at all.
Why? Because what this page offers is a completely
BLANK TEMPLATE
with most of these hacks applied*, downloadable by clicking the link.

These hacks have been applied to a standard Google template.
In theory this means you can host your own customised code..
..and yet retain the full functionality of Google's editing tools..
Voila! Full custom free CMS..

From time to time Google will change the rules..
..so these hacks are guaranteed not to remain working.
I will, however, endeavour to keep it updated.

HTML Hacks

(via Template - Edit HTML)

Hide Blog Title

Look for: .Header h1 {

Add: display:none;

Hide Blog Description

Look for: .Header .description {

Add: display:none;

Remove Subscribe to: Posts (Atom)

1. (Go to dashboard/ template/ edit HTML)
2. Click the 'Expand Widgets Templates' box
3. Find and Remove:

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

Remove Home (link)

1. (Go to dashboard/ template/ edit HTML)
2. Click the 'Expand Widgets Templates' box
3. Find and Remove:

<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

Remove NavBar

1. (Go to dashboard/ template/ edit HTML)
2. Paste inside the head section:

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

Remove Top Margin

1. (Go to dashboard/ template/ edit HTML)
2. Find outer-wrapper
3. Look for margin-top: (value)px; 
4. Set the value (can be a negative value)

Remove Top Padding / Margin

1. (Go to dashboard/ template/ edit HTML)
2. Find <Variable name="main.padding.top"
3. Change value= to "0px"

eg.
<Variable name="main.padding.top" description="Main Padding Top" type="length" default="0px" value="0px"/>and/or

.post-outer {

  padding: 15px 20px;
  margin: 0 0 25px;

Remove Post Background

1. Create a 1px transparent .png
2. Upload and copy it's URL
3. Go to dashboard/ template/ edit HTML
4. Replace background-color: $(post.background.color) with background: url(image_url) repeat;

Remove Image Border

.post-body img, .post-body .tr-caption-container {

  padding: 0px;

Remove Post Footer

Paste this code just after ]]></b:skin> :

<style type='text/css'> <b:if cond='data:blog.pageType != "index"'> .post-footer {display:none !important;} </b:if> </style>

Remove Page Title

Paste this code just after </b:skin> :

<b:if cond='data:blog.pageType == "static_page"'>
<style>
.post-title.entry-title{
display: none;
}
</style>
</b:if>

Centre Title

Paste this code just before ]]></b:skin> :

h3.post-title { text-align:center; }

Remove Attribution

Search for Attribution
locked='false'
Layout -> Edit Attribution -> Remove

Remove Link Underlines
a:link {
text-decoration:underline;
}
a:visited {
text-decoration:underline;
}
a:hover {
text-decoration:underline;
}

To

a:link {
text-decoration:none;
}
a:visited {
text-decoration:none;
}
a:hover {
text-decoration:none;
}

CSS Hacks

(via Template - Customise - Advanced - Edit CSS)


Note that CSS hacks you  Customize  will disappear from the template editor.
and end up in the HTML template.

Horizontal Gradient

body {

background:-webkit-gradient(linear, left bottom, right bottom, from(#000000), to(#ffffff));
background: -moz-linear-gradient(left, black, white);

}

Remove NavBar

#navbar-iframe { height: 0px; visibility: hidden; display: none;}
#navbar { height: 0px; visibility: hidden; display: none;}

Remove Image Border

.post-body img, .post-body .tr-caption-container, .Profile img, 
.Image img, .BlogList .item-thumbnail img {
    border: 0px;
    -moz-box-shadow: 0px 0px 0px rgba(0, 0, 0, .0);
    -webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, .0);
    box-shadow: 0px 0px 0px rgba(0, 0, 0, .0);
    border-radius: 0px 0px 0px 0px;
    background: none;

Remove Post Footer

.post-footer
{
display: none;
}

Remove Attribution

#Attribution1 {display: none;}

External Links
(Top Tips and Tuts from other sites)

W3 Schools
W3C: CSS tips & tricks
Smashing Magazine
CSS Tricks
Learn CSS Positioning in Ten Steps
Hongkiat: 20 Useful CSS Tips For Beginners
Web Vamp - CSS Image Rollovers