Having your own blog on blogger.com is great but there are some tweaks and features you definitely want to implement to make your blog even better. I am going to show you the most important features and tweaks and for all of these you need to mess up with code of your blog. To reach the html/css code - go to: template -> edit html -> proceed and check the box next to “Expand Widget Templates”. Now the first thing to do is to make a backup of your code (just in case). So copy the entire code (ctrl+a, then ctrl+c) and paste it into an empty notepad document and then save it to txt file (without word wrap selected).
Post titles
If you read my topic about internal SEO, you should already know that having proper post titles is really important. Go to the code of your template and search for:<title><data:blog.pageTitle/></title>
and replace this piece of code with:
<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<meta content=' --- YOUR BLOG DESCRIPTION --- ' name='description'/>
<meta content=' --- KEYWORD, KEYWORD, KEYWORD --- ' name='keywords'/>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>
This will fix your post titles and maximize the score you will get from the search engines for proper page title. Also, put your own blog description and keywords in the code above. Unfortunately, they will repeat on all of your pages and posts but it is still better than missing them at all.
Facebook like button
To add a “Facebook like” button to your posts search for:<div class='post-header-line-1'/>
and paste the following code after it:
<b:if cond='data:blog.pageType == "item"'>
<iframe allowTransparency='true' expr:src='"https://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=standard&show_faces=false&width=100&action=like&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:25px;'/>
</b:if>
If you can not find the code above – search for :
<data:post.body/>
and paste the code before it. This will add “Facebook like button” to your posts.
Blog redirect remover
Probably you are not aware of this, but blogger displays your posts and pages using different domains for users in different countries. For example you might see your blog as “yourblog.blogspot.com” but somebody in UK will see it as “yourblog.blogspot.co.uk”. And this will apply for all posts and pages URLs. And as you suspect – this is devastating for your SEO as it creates multiple URLs for a single post and duplicated content (thus getting your blog penalized). In order to get rid of the redirects search for the closing head tag:</head>
and add the following code above it:
<script type='text/javascript'>
var blog = document.location.hostname;
var slug = document.location.pathname;
var ctld = blog.substr(blog.lastIndexOf("."));
if (ctld != ".com") {
var ncr = "https://" + blog.substr(0, blog.indexOf("."));
ncr += ".blogspot.com/ncr" + slug;
window.location.replace(ncr);
}
</script>
This way, everybody will access yourblog and posts at yourblog.blogspot.com.
Related posts
If you want to add related posts below each post – search again for the </head> tag and add the following code above it:<!--Related posts-->
<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: -1.0em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOJqvk7bU-C9J4fpqsc99zKNykG0DqWlgo1B0ri0yWm6bmuHQlQ_8auYmAWpqEj21JLXGh-18oPod3nHpkComHsy5XxL9bD3siWwtSY_2x9uJgBNQXWOdPU0UVuyUjG9p-BVrnlQISyOE/s400/noimage.png";
var maxresults=7;
var splittercolor="#66ccff";
var relatedpoststitle="Related posts:";
</script>
<script src='https://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
--------------------------------------------------------------------------
Then search for:
<div class='post-footer-line post-footer-line-1'>
and paste the following code below it:
<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<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_thumbs&max-results=6"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='https://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'><img alt='Related Posts Widget For Blogger with Thumbnails' src='https://image.bloggerplugins.org/blogger-widgets.png' style='border: 0'/></a><a href='https://bloggertemplates.bloggerplugins.org/'><img alt='Blogger Templates' src='https://image.bloggerplugins.org/blogger-templates.png' style='border: 0'/></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->
--------------------------------------------------------------------------
If you want to customize the related posts appearance you could play with the variables above. For example:
var maxresults=7; -> Just change the number to get less or more related posts.
var splittercolor="#66ccff"; -> change the color if you want to have different colored line
var relatedpoststitle="Related Posts"; -> change the title of your “related posts”.
defaultnoimage="…”; -> changes the path to the default no-image.
