These are some tips & hacks to improve your blog's features and give it a professional look.
These involve playing with codes. So first backup your template. To edit your template, go to "Blogger Dashboard>Layout>Edit HTML". You can click on "Download Full Template" to backup your template.
Hide the Navbar
To hide the navbar, paste this code just before the </head> tag.
<style type='text/css'>
#navbar-iframe {
display: none !important;
}
</style>
You can also hide the quickedit wrench icons with the following code,
<style type='text/css'>
.quickedit {
display: none !important;
}
</style>
Use a Custom Favicon
Upload an image to an external host. I recommend to make the image in .png format. Then post the code just before the </head> tag. Replace "http://your-image-url" with the address of the image.
<link href='http://your-image-url' rel='icon' type='image/png'/>
Change the Page Title
Give the title a more professional look. Replace the following line
<title><data:blog.pageTitle/></title>
with the following code. Add the name of your blog and a very short description
<b:if cond='data:blog.pageType != "item"'>
<title>Your Blog | Short Description</title>
<b:else/>
<title><data:blog.pageTitle/></title>
Add "Read More" Link to Blog Posts
This will display a "Read More" link to the post with a thumbnail of image. Search for this code. Of course you can change "Read More" and the dimensions of the image by changing the img_thumb_height and img_thumb_width to your desired one. Also you can change the number of letters appearing in the summary.
<data:post.body/>
Then replace it with this.
<script type='text/javascript'>
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script src='http://blogergadgets.googlecode.com/files/excerpt.js' type='text/javascript'/>
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'>Read more</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
If you want to host the excerpt.js javascript file on your own servers, here is the code,
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
Add Pagination
Blogger only displays the "Newer Posts" and "Older Posts" Link. But adding pagination can improve the navigation a lot.
First, search the following code,
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
Then just after it, place the following code,
<div class='blog-pager' id='blog-pager'>
<script type='text/javascript'>
var home_page_url = location.href;
var pageCount=10;
var displayPageNum=6;
var upPageWord ='Previous';
var downPageWord ='Next';
function showpageCount(json) {
var thisUrl = home_page_url;
var htmlMap = new Array();
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';
htmlMap[htmlMap.length]='/';
postNum++;
for(var i=pageCount-1, post; post = json.feed.entry[i]; i=i+pageCount) {
var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
timestamp = encodeURIComponent(timestamp1);
var title = post.title.$t;
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'&max-results='+pageCount;
}
var banyaknomer = htmlMap.length;
if (json.feed.entry.length % pageCount == 0){
var banyaknomer = htmlMap.length -1 ;
postNum=postNum-1;
};
for(var p =0;p< banyaknomer;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}
fFlag++;
}
if(p==(thisNum-1)){
html += '<span class="showpagePoint">'+thisNum+'</span>';
}else{
if(p==0){
html += '<span class="showpageNum"><a href="/">1</a></span>';
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';
}
}
if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}
}
if(thisNum>1){
html = ''+upPageHtml+' '+html +' ';
}
html = '<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;
if(thisNum<(postNum-1)){
html += downPageHtml;
}
if(postNum==1) postNum++;
html += '</div>';
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");
if(postNum <= 2){
html ='';
}
for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}
if(pageArea&&pageArea.length>0){
html ='';
}
if(blogPager){
blogPager.innerHTML = html;
}
}
function showpageCount2(json) {
var thisUrl = home_page_url;
var htmlMap = new Array();
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';
var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';
var thisUrl = home_page_url;
htmlMap[htmlMap.length]=labelHtml;
postNum++;
for(var i=pageCount-1, post; post = json.feed.entry[i]; i=i+pageCount) {
var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
timestamp = encodeURIComponent(timestamp1);
var title = post.title.$t;
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'&max-results='+pageCount;
itemCount++;
}
var banyaknomer = htmlMap.length;
if (json.feed.entry.length % pageCount == 0){
var banyaknomer = htmlMap.length -1 ;
postNum=postNum-1;
};
for(var p =0;p< banyaknomer;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}
fFlag++;
}
if(p==(thisNum-1)){
html += '<span class="showpagePoint">'+thisNum+'</span>';
}else{
if(p==0){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';
}
}
if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}
}
if(thisNum>1){
if(!isLablePage){
html = ''+upPageHtml+' '+html +' ';
}else{
html = ''+upPageHtml+' '+html +' ';
}
}
html = '<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;
if(thisNum<(postNum-1)){
html += downPageHtml;
}
if(postNum==1) postNum++;
html += '</div>';
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");
if(postNum <= 2){
html ='';
}
for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}
if(pageArea&&pageArea.length>0){
html ='';
}
if(blogPager){
blogPager.innerHTML = html;
}
}
</script>
<script type='text/javascript'>
var thisUrl = home_page_url;
if (thisUrl.indexOf("/search/label/")!=-1){
if (thisUrl.indexOf("?updated-max")!=-1){
var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"));
}else{
var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"));
}
}
var home_page = "/";
if (thisUrl.indexOf("?q=")==-1 && thisUrl.indexOf(".html")==-1){
if (thisUrl.indexOf("/search/label/")==-1){
document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ><\/script>')
}else{document.write('<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')
}
}
</script>
</div>
Add some styling to the pagination, add the following code just before the </head> tag.
<style type="text/css">
.showpageArea{font-family:verdana,arial,helvetica;color:#000;font-size:11px;margin:10px;}
.showpageArea a{color: #fff;}
.showpageNum a{padding: 3px 8px;margin:0 4px;text-decoration:none;background: #333 0 -50px repeat-x;}
.showpageNum a:hover{background:#666 0 -25px repeat-x;}
.showpagePoint{color:#fff;padding:3px 8px;margin:2px;font-weight:700;background: #06a2b9 0 0 repeat-x;text-decoration: none;}
.showpageOf{margin:0 8px 0 0;}
</style>
Add Sharing is Caring Widget
Place this code just after the <data:post.body/> tag,
<b:if cond='data:blog.pageType == "item"'>
<div class='share-bookmarks'>
<ul class='socials'>
<li class='share-delicious'><a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='share-digg'><a expr:href='" http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='share-technorati'><a expr:href='" http://technorati.com/faves?add=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='share-reddit'><a expr:href='" http://www.reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='share-stumble'><a expr:href='" http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='share-designfloat'><a expr:href='"http://www.designfloat.com/submit.php?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='share-facebook'><a expr:href='" http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='share-twitter'><a expr:href='" http://twitthis.com/twit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='share-furl'><a expr:href='" http://www.furl.net/storeIt.jsp?u=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='share-syndicate'><a href='http://feeds.feedburner.com/funsurf/blog' title='Subscribe to RSS'/></li>
<li class='share-email'><a expr:href='" mailto:?subject=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
</ul>
<span class='share-rightside'/></div></b:if>
Then place the css code just before the </head> tag,
<style type="text/css">
div.share-bookmarks ul.socials a{display:block!important;width:48px!important;height:29px!important;font-size:0!important;color:transparent!important}
.share-furl,.share-furl:hover,.share-digg,.share-digg:hover,.share-reddit,.share-reddit:hover,.share-stumble,.share-stumble:hover,.share-delicious,.share-delicious:hover,.share-yahoo,.share-yahoo:hover,.share-blinklist,.share-blinklist:hover,.share-technorati,.share-technorati:hover,.share-facebook,.share-facebook:hover,.share-twitter,.share-twitter:hover,.share-myspace,.share-myspace:hover,.share-mixx,.share-mixx:hover,.share-script-style,.share-script-style:hover,.share-designfloat,.share-designfloat:hover,.share-syndicate,.share-syndicate:hover,.share-email,.share-email:hover{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk7l4lVc02NvyxCA3ZyFrsDeXdBdem0dJXidsFDifILzbRnhBYadR2qJNtqV_u5SZ1pqhU36bEPMYxf-EcAdLs_92khk7BN-YyVAwkkNnuZbE-r1OEl2FrvmkMBF8KPk4PHKoswfAwCRzc/') no-repeat!important}
.share-furl{background-position:-300px top!important}
.share-furl:hover{background-position:-300px bottom!important}
.share-digg{background-position:-500px top!important}
.share-digg:hover{background-position:-500px bottom!important}
.share-reddit{background-position:-100px top!important}
.share-reddit:hover{background-position:-100px bottom!important}
.share-stumble{background-position:-50px top!important}
.share-stumble:hover{background-position:-50px bottom!important}
.share-delicious{background-position:left top!important}
.share-delicious:hover{background-position:left bottom!important}
.share-yahoo{background-position:-650px top!important}
.share-yahoo:hover{background-position:-650px bottom!important}
.share-blinklist{background-position:-600px top!important}
.share-blinklist:hover{background-position:-600px bottom!important}
.share-technorati{background-position:-700px top!important}
.share-technorati:hover{background-position:-700px bottom!important}
.share-myspace{background-position:-200px top!important}
.share-myspace:hover{background-position:-200px bottom!important}
.share-twitter{background-position:-350px top!important}
.share-twitter:hover{background-position:-350px bottom!important}
.share-facebook{background-position:-450px top!important}
.share-facebook:hover{background-position:-450px bottom!important}
.share-mixx{background-position:-250px top!important}
.share-mixx:hover{background-position:-250px bottom!important}
.share-script-style{background-position:-400px top!important}
.share-script-style:hover{background-position:-400px bottom!important}
.share-designfloat{background-position:-550px top!important}
.share-designfloat:hover{background-position:-550px bottom!important}
.share-syndicate{background-position:-150px top!important}
.share-syndicate:hover{background-position:-150px bottom!important}
.share-email{background-position:-753px top!important}
.share-email:hover{background-position:-753px bottom!important}
</style>
Display Codes & Scripts
To give a different look to the codes or scripts you post in your blog, paste following code before the </head> tag.
<style type="text/css">
.codeview {
font-family: "Courier New", Courier, monospace;
font-size: 12px;
color: #000;
border: solid 2px #c7e7f7;
background: #f5f8fa;
padding: 10px;
line-height: 14px;
list-style-type: none;
}
.codeview li {
font-size : 13px;
line-height : 24px;
font-family : "Courier New", "MS Sans Serif", sans-serif, serif;
color : #000000;
font-weight : normal;
}
</style>
Now in your posts, place the code between the following tags.
<div class='codeview'>
Your code goes here
</div>
Remember to replace "<" and ">" with "<" and ">"
