10 things that will supercharge your blog. Immediately, after starting your blogspot blog, you require some customization, which gives it professional look and also helps it perform well on search engines.
Remove/Hide the Top Blogger bar.
Add the Following line of code by going to Edit HTML (Expand Widget):
#navbar-iframe{height:0px; visibility:hidden; display:none}
body{ margin-top:0px; position:relative; top:2px}
which should look like this after adding the code:
<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name: Simple
----------------------------------------------- */
#navbar-iframe{height:0px; visibility:hidden; display:none}
body{ margin-top:0px; position:relative; top:2px}
Split the Header into two columns
. Although, blogger has launched many designer templates, none till date, has split header by default. So, you need to insert extra section in Header to get two column headers. Two column header helps you insert extra widget in that area. Find the following code, by going to edit HTML in your blogger control panel, leaving Expand option unticked: <b:section class='header' id='header' maxwidgets='1'showaddelement='no'>. Just after </b:section>, insert the following code:
<b:section id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>
Now Find the ]]></b:skin> and add the following line of code just before it:
#header {width:20%;display:inline-block;float:left;}
#header-right {width:80%;display:inline-block;float:right;padding:0px;}
#header-right .widget {margin:0;}
After saving the template, go to add page element, choose the image only option, and insert Logo in Header Left, and description or Adsense in header right column. Here, for those who have opted for image only option in Header, need to tweak the template again. So, go back to edit HTML, and, find below code:
<!--Show the image only-->
<div id='header-inner'>
<a expr:href='data:blog.homepageUrl' style='display: block'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
</a> Replace this code with one given below:
<!--Show the image only-->
<div id='header-inner'>
<a expr:href='data:blog.homepageUrl' style='display: block'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
</a><div class='titlewrapper' style='display:none'>
<h1 class='title'>
<b:include name='title'/>
</h1>
</div>
Change Post Title tag to write search engine friendly headlines.
Blogger, by default has Blog Title, into header description. it reduces the real estate of first 150 characters, which are of so importance these days. Your important, headlines goes with blog title to all important services updates, including your posts’ Search engine description. Just go to Edit HTML, and find <data:blog.pageTitle/>. Replace it with the following line of code: <b:if cond='data:blog.pageType == "index"'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>
Show more posts on home page. SEO the archives
. Read this/Expand the post feature also, indexes your archived pages by April, May, June… Which helps Search engines to index it in this way. To automatically get the post thumbnails on your home page, copy & paste the following code, just after the </head> tag in your template: <script type='text/javascript'>
var thumbnail_mode = "yes"; //yes -with thumbnail, no -no thumbnail
summary_noimg = 430; //summary length when no image
summary_img = 340; //summary length when with image
img_thumb_height = 125;
img_thumb_width = 150;
</script>
<script type='text/javascript'>
//<![CDATA[
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(thumbnail_mode == "yes") {
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 align=justify>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script> After this save the template, tick the expand widget option and find <data:post.body/>, in your template. Replace this line with the following code: <!—Netargument.com Read This code Start --><b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/><b:else/>
<div expr:id='"summary" + data:post.id'>
<data:post.body/>
</div><script type='text/javascript'>
createSummaryAndThumb("summary<data:post.id/>");</script>
<div style='clear: both;'/>
<span class='rmlink' style='float:right;padding-top:5px;'><a expr:href='data:post.url'><b>Read This >></b></a></span></b:if></b:if> <!—Netargument.com Read This code End –> Now, Preview and Save the template. This will create thumbnail of posts on home page, labels and archives. This also helps search engines index your archives by months like March, April…
Insert Meta tags for home page and other pages.
Use of conditional tags to help the search engines, index the pages, and prevent content duplicate listings. To help search engines index your blog by proper keywords and descriptions, you should write meta tags for home page. Just copy the meta tags from below, alter it suitably and paste after <head> in your template: <b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content=' DESCRIBE YOUR BLOG HERE AS YOU WANT TO APPEAR ON SEARCH PAGES ' name='description'/></b:if>
<meta content='WRITE 8-10 KEYWORDS HERE RELEVANT TO YOUR BLOG' name='keywords'/> If you want to write Description for other pages too, simply add this code: <b:if cond='data:blog.url == "WRITE YOUR POST/PAGE URL HEREquot;'><meta content='DESCRIBE THE CONTENT OF THE PAGE' name='description'/></b:if>
Change default comment permalink.
Blogger default comment permalink adds “?’ attribute to the page url with comment id in post url. Google will then see as an issue of duplicate title tag. To avoid this, you need to change the ‘?’ attribute to “#”. This can be achieved by replacing the default code which is like this: <a expr:href='"#comment-" + data:comment.id' title='comment permalink'> <data:comment.timestamp/> to this one: <b:if cond='data:post.commentPagingRequired'>
<a expr:href='data:comment.url' title='comment permalink'> <data.comment.timestamp/> </a>
<b:else/>
<a expr:href='data:blog.url + "#" + data:comment.anchorName' title='comment permalink'> <data:comment.timestamp/> </a>
</b:if>
Bottom Page number for posts, archives and labels.
Insert the code just before </b:skin> in your template: .showpageNum a {
text-decoration:none;
border: 1px solid #ccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #ccc;
background-color:#ccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #ccc;
background: #ccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #ccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333;
} Save the template, return again to Edit HTML, and leave the Expand widget unticked. Press ctrlF and find Blog1. This should take you to following line of code: <b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>
<b:widget id='HTML12' locked='false' title='' type='HTML'/>
<b:widget id='HTML2' locked='false' title='' type='HTML'/>
</b:section> Immediately after </b:section>, add the following line of code: <script type="text/javascript"> function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)==".com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-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 pageCount = 14;
var displayPageNum = 10;
var upPageWord = 'Previous';
var downPageWord = 'Next';var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){itemCount++;
}}else{
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
} for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
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){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
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++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){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>';if(isPage || isFirstPage || isLablePage){
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 src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999"; type="text/javascript"></script> Preview the template. This won’t show you any impact, but it’s a safety against any code error. Save it, and you would find the page numbers on home page.
Style/Remove Older Post, Newer Post link
Following code will add style to the below post older/newer/home link. Just go to Designer>Advanced>Add CSS, and paste this: #blog-pager-older-link, #blog-pager-newer-link, .home-link{background:#FFF0B7; padding: 5px 5px 5px 5px; } If you want to completely remove them use this code instead: #blog-pager-older-link, #blog-pager-newer-link, .home-link{background:#FFF0B7; padding: 5px 5px 5px 5px; display:none;}
Remove Subscribe link below the post body.
Subscribe link below the post looks ugly and should be removed. Just find the following code: <b:include name=’feedLinks’/> in your template, delete and save. It is gone.
Add Favicon:
Choose a favicon, host it on web preferably in ico/png format(check favicongenerator.com), and paste the following code just before </head> in your template: <link href='YOUR-FAVICON-URL' rel='shortcut icon'/>
<link href='YOUR-FAVICON-URL' rel='icon'/>
In addition to all the above I also recommend using an offline Blog Editing software. I myself use and recommend windows live Writer for windows and Blogilo for ubuntu.
No comments:
Post a Comment