#1 - Hide the "Next Blog" Navigation Bar
Hiding the default blogger navigation bar that appears at the top of your blog can dramatically improve the look of your site. However, some users dislike blogs that have this navigation bar hidden. It is NOT against the Blogger Terms of Service to do this, so it's up to you.
Find the code <b:skin><
A favicon is a 16x16 pixel bitmap image that identifies your site in the visitor's address bar as well as in their list of bookmarked sites. The default favicon for blogs hosted on blogger/blogspot is the orange "B", but it's very easy to make a custom one for your website to make it stand out.
First, make the image by creating a 16 by 16 pixel image and save it in Bitmap format. Then save another copy in PNG format. Rename the bitmap image to have the extension ".ICO" (leave the png image as .PNG). Upload the two images to your own website or to your imagehost of choice like imageshack or photobucket.
In your template, find the closing </HEAD> tag and insert this code immediately above it:
Of course, change the URL-TO-ICO-FILE and URL-TO-PNG-FILE to the urls where you hosted the images.<link href="URL-TO-ICO-FILE" rel="shortcut" type="image/x-icon"> <link href="URL-TO-PNG-FILE" rel="icon" type="image/png">
#3 - Automatically Change Copyright Year
Find the copyright at the bottom of your template and replace the year with:
<script type='text/javascript'> document.write(new Date().getFullYear()); </script>
#4 - Add More Page Elements
By changing a few values in your template you can give yourself the ability to add elements or gadgets both above and below the posts area and above and below the header, as well as increase the number of elements you can have in each spot. Search your template for:
<b:sectionThere are several of these sections in the template, including "header", "main", etc. For each of these sections, change the attribute maxwidgets='1' to a higher number, like 3 or 5, and showaddelement='no' to "yes".
#5 - Post Previews with "Read More" Link
Instead of showing the entire post wherever it appears (homepage, searches, etc), this hack will show just a preview of each post with a "Read More..." link (sometimes called a "peekaboo" or "jump break summary"). Search for this line in your template:
<p><data:post.body/></p>And replace it with this:
<b:if cond='data:blog.pageType == "item"'>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>read more...</a>
</b:if>You don't have to go back and edit your older posts to create a summary by using this DIV, but you can if you want. Any new posts you create will start with this as the template so you can easily setup each post's summary to be as long or as short as you like. If you want to make a post without a summary/preview, just delete the div for that post.Type your summary here <div class="fullpost"> Type rest of the post here </div>
#6 - Expandable Posts
Expandable posts provide an even cleaner look for your visitor when they view lists of many posts, such as in the labels or archives section or during searches. Only the title of each post will be initially displayed, with a button next to it that expands the post to show the content (or in this case the summary/preview and Read More link, as this code utilizes the previous hack to show post summaries as well). To implement this template hack, search for the </HEAD> tag and paste this code immediately before it:
<script type='text/javascript'>
function toggleIt(id) {
post = document.getElementById(id);
post.style.display = (post.style.display!='none' ? 'none' : '');
}
</script></b:includable>And paste this code immediately after it (or after any of the includables as it is an includable itself):
<b:includable id='PostExpander' var='post'>
<div class='post uncustomized-post-template'>
<div style='float:left;padding:5px'>
<a expr:onclick='"toggleIt(\"" + data:post.id + "\");"' href='javascript:;' style='text-decoration:none' title='Expand/collapse this post'>[+/-]</a>
</div>
<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3>
<div class='post-body' expr:id='data:post.id' style='display:none'>
<style>.fullpost{display:none}</style>
<p><data:post.body/></p>
<p style='text-align:center'><a expr:href='data:post.url'>read more...</a></p>
</div>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</b:includable>Then search for this:
<b:include data='post' name='post'/>And replace it with this:
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:include data='post' name='post'/>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='post'/>
<b:else/>
<b:include data='post' name='PostExpander'/>
</b:if>
</b:if>#7 - Fix the "1 comments" Bug
As a bonus, this will also let you display a message like "Be the first to leave a comment!" instead of "0 comments", enticing people to reply to uncommented posts. Find this code or something similar:
<b:if cond='data:post.numComments == 1'> 1 <data:commentLabel/> <b:else/> <data:post.numComments/> <data:commentLabelPlural/> </b:if>And replace it with this:
<b:if cond='data:post.numComments == 0'>Be the first to leave a comment!</b:if> <b:if cond='data:post.numComments == 1'>1 comment</b:if> <b:if cond='data:post.numComments > 1'><data:post.numComments/> comments</b:if>
#8 - Related Posts
Find this line:
<p><data:post.body/></p>And paste this code immediately after it:
<script type='text/javascript'>
var thisurl="<data:post.url/>";
//<![CDATA[
var relatedTitles=new Array(), relatedUrls=new Array(), relatedNum=0;
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedNum++] = entry.link[k].href; break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp=new Array(), tmp2=new Array();
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i]) && relatedUrls[i]!=thisurl) {
tmp[tmp.length] = relatedUrls[i];
tmp2[tmp2.length] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length-1) * Math.random());
document.write('<ul>');
for (var i=0;i<relatedTitles.length && i<20;i++){
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length-1) r++; else r=0;
}
document.write('</ul>');
}
//]]>
</script>
<div id='related-posts'>
<b>Related Posts:</b>
<b:loop values='data:post.labels' var='label'>
<data:label.name/><b:if cond='data:label.isLast != "true"'>,</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=5"' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>removeRelatedDuplicates(); printRelatedLabels();</script>
</div>#9 - Recent Comments & Recent Posts
You can use your own blog's feeds to create a Recent Comments widget and Recent Posts widget, without having to use any scripts at all. Simply add a feed widget, and for the Feed URL type in http://yourblog.com/feeds/comments/default. Then add another feed widget with the Feed URL of http://yourblog.com/feeds/posts/default. On the settings page you can specify how many items to show and whether to show the authors names, etc. If you want to increase the number of results shown beyond the default, add ?max-results=10 (or however many you wish) to the end of the Feed URL.#10 - Remove "Newer Post" and "Older Post"
Unless you're just blogging about one topic, the Newer/Older Post links will take you to posts that have nothing to do with the current post. They will be from any category/label, simply based on the post timestamps. On top of that, there is currently no way with Blogger to show the actual post title of the Newer/Older post, so the visitor can't even see what page they would be taken to (at least without mousing over the link and looking at the URL it links to). Fortunately, removing these links is easy. Just search for this code in your template:
<b:include name='nextprev'/>And delete it wherever it appears.
thanks for your compilation of best hack templates now i protect mine to those hackerz..thanks
ReplyDelete