Customize the new blogger template

If you've switched to the new version of Blogger then you surely want to know how to customize it. Here are some steps that will ensure you having a nice and flexible blog layout combined with strong coding.
Initially open your blog's Template, click on Edit Html and check Expand Widget Templates.

Hint: If you want to search faster in the template just click Ctrl + F and enter in the search box the the word that you are looking for.

I. Search engine friendly blog:
Prevent 302 hijacking!
Below the <head> tag place:

<base expr:href='data:blog.url' />
<meta expr:content='data:blog.pageTitle + " more from http://yourwebsite.com"  ' name='description'/>
<meta expr:content='data:blog.pageTitle' name='keywords'/>

This will protect you from becoming a victim of the famous 302 hijacking and also your website results won't fall under the google's supplemental index.

Additionaly for SEO purposes you can have unique title tag on every post page. How?
Find and replace: <data:blog.pageTitle/> with:

<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>

Remove Next, Prev navigation links
Just find and delete next 2 lines:

 <!-- navigation -->
 <b:include name='nextprev'/>

also if you don't want your comments, feeds or labels to be spidered just add "nofollow" attribute to their anchor tag: <a href="..." rel="nofollow">

Update:
Exclude duplicate blog entries from indexing via webmaster tools
1. Goto http://google.com/webmasters/tools/ and locate your blogspot website.
2. Click on Site Configuration->Settings->Parameter handling tab
3. Add the following parameters and set them to ignore:
updated-max, showComment, alt, orderby, referer
Ignoring these parameters will reduce duplicate content in Google's index and make your site more crawlable.

Remove archive category pages from Google's index.
See the following posts for more details Google panda update and Deoptimization:

<b:if cond='data:blog.pageType == "archive"'>
<meta content='NOINDEX' name='ROBOTS'/>
</b:if>

II. CSS enhancements
Read more link
If you want to have expandable posts or posts with Read more link on them then place in the template the following css code:

span.fullpost {display:none;}

Then find the <body> section in the blog template and add:

<b:if cond='data:blog.pageType == "item"'>
<style>
span.fullpost {display:inline;}
</style>
</b:if>

After the expression <data:post.body/>
place:

<b:if cond='data:blog.pageType != "item"'>
<data:post.body/>
<a href="'data:post.url'" style="'float:right'">Read more...</a>
</b:if>

Next when you write the post switch to Edit Html and place: <span class="fullpost"> when you want your post summary to end. Then close the span tag <span> at the end of the post.
This will show Read more link to the users visiting your main page.

Comment form
If you want to encourage your visitors to do more commenting here is a nice way to have comment form displayed directly underneath your post:

http://www.jackbook.com/2007/06/how-to-make-readers-leave-comment.html

Javascript
More information on escaping characters and implementing JavaScript you can find here:

http://consumingexperience.blogspot.com/2007/01/new-blogger-expr-how-to-convert.html

by Nevyan Neykov

Customize the new blogger template

1 коментара: