| 0 comments ]

In some blogger template, the title tags will be like this --> blogger title: blogger post title.
This is not so good for SEO technique. To change the blogger title tags to blogger post, need to change some code in blogger template.
To change tihis, find in blogger template code like this,

<data:blog.pageTitle/>
Change code above with this code,

<span id="fullpost"><b:if cond="'data:blog.pageType">
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pagename/></title>
</b:if></span>
Code above will make blogger main page/homepage title tags using blogger title, and other page, ie blogger post page, using blogger post title.
Save your blogger template.

| 11 comments ]

Different meta tags for each blogger post is good in SEO point of view. It can tell search engine about the post, so it can have more visibility by search engine.
This article will describe how to add different meta tags for each blogger post based on post title.
In Blogger Dashboard, go to Design, then Edit HTML.
Find code below,

<b:include data='blog' name='all-head-content'/>
Add code below after that code,
<b:if cond='data:blog.url != data:blog.homepageUrl'>
<meta expr:content='data:blog.pageTitle' name='description'/>
</b:if>
The code will have result that if the page is not homepage or main page, it will have meta tag description using post title.
If we combine from my previous article about adding meta tags to blogger homepage, and this article, we can add meta tags to homepage/main page hardcoded to template, and different meta tags to each post using post title. The code will be like this,
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='DESCRIPTION HERE' name='description'/>
<meta content='KEYWORDS HERE' name='keywords'/>
</b:if>
<b:if cond='data:blog.url != data:blog.homepageUrl'><meta expr:content='data:blog.pageTitle' name='description'/>
</b:if>
Code above will make static meta tags for main page/homepage, and title tags for each post.

| 0 comments ]

Meta tags is important in SEO techniques, especially meta description.  Meta description tell search engine about the content of homepage.  One of parameter Google see is meta description.  Unfortunately, Blogger didn't give tools for creating meta tags in their dashboard.  Here is the way to create meta tags in blogger homepage.
Login to your blogger, go to Design, then to Edit HTML.
Find code below,

<b:include data='blog' name='all-head-content'/>

Add the following code after that code,

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='DESCRIPTION HERE' name='description'/>
<meta content='KEYWORDS HERE' name='keywords'/>
</b:if>

Save template.

The code above will add meta tags for blogger homepage/main page only.

| 2 comments ]

In my previous article, I describe about inserting adsense in blogger post.  In new blogger template, seems the article was not valid anymore.  In this article, I update how to insert adsense below blogger post.  I try to insert the adsense code to show below blogger post, and the result was positive.


First, parse adsense HTML code.  Just paste your adsense code to form box in Blogcrowds.  Copy the result.
Login to your blogger account, go to Design, the Edit HTML.  Click Template Widget.  Find code like this:

<div class='post-tags'>

Place the result html parse code before that code.  The result was adsense will be showed after post content.

| 9 comments ]

Adsense can only display 3 adsenses in a page.  So, if we place adsense in sidebar, post, footer, or header, we must arrange it so that only 3 adsenses in a page.  Adsense can only display in single post, or in homepage.

To display adsense in blogger homepage only (main page), follow the steps below,

1.  Login to blogger
2.  Go to Layout --> Edit HTML.  Click on Expand Widget Template.  Find adsense widget.  For example, adsense is placed with widget id HTML3.

     <b:widget id='HTML3' locked='false' title='' type='HTML'>

3.  Add code with bold text.


     <b:widget id='HTML3' locked='false' title='' type='HTML'>
     <b:includable id='main'>
     <b:if cond='data:blog.url == data:blog.homepageUrl'>
     <div style='float: left;padding:20px 0px 40px 0'>
     <!-- only display title if it's non-empty -->
     <b:if cond='data:title != &quot;&quot;'>
     <h2 class='title'><data:title/></h2>
     </b:if>
     <div class='widget-content'>
     <data:content/>
     </div>
     <b:include name='quickedit'/>
     </div>
     </b:if>
     </b:includable>
     </b:widget>

4.  Save Template.

| 2 comments ]

 Blogger doesn't have ready to be used Related Post Widget.  But, we still can create related post widet based on label.  This related post widget will use Label in Blogger Posting.  Posting with the same label will be displayed in Related Post Widget.  So, the prerequisite to get Blogger Related Post Widget working is you must label in every blogger posting.

Here are steps configuring Blogger Related Post Widget.
1.  You must have label in every blogger posting.
2.  Login to Blogger.
3.  In Blogger Dashboard, choose blog you want to edit, Layout, then Edit HTML, choose Expand Widget Templates.
4.  Add this code below and paste after <head> and before </head> tag or just paste below <head> tag.


<script type="text/javascript">
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = 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());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>

5.  Find Widget Code below,

<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
 

Add code with bold blue text below,

<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;
max-results=10"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>

6.  Save Tempate.
7.  Open Layout-->Page Element, add new HTML/JavaScript Widget.  Paste code below, and name it Related Post and then Save.

<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>

8.  Back to Layour-->Edit HTML, click Expand Widget Templates.  Find HTML/JavaScript Widget Related Post Widget we've created before.  Add code with bold and blue below, so that Related Post Widget will show only in Post page.

<b:widget id='HTML13' locked='false' title='Related Post' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

9.  Save Template.