How to add meta tags to blogger

META TAGS are pieces of information that describe your blog. They play an important role in search engine optimisation (SEO) by helping search engines to index your blog more accurately. Bloggers should include these two main meta tags namely, meta description tag and meta keywords tags, which describe your blog and blog contents respectively.

STEPS to add meta tags to blogger

1. Backup your template
2. Go to Template > Edit HTML > Proceed
3. Look for <b:include data='blog' name='all-head-content'/> in your HTML code
4. Replace it with the code below

<b:include data='blog' name='all-head-content'/>
<meta content='YOUR KEYWORDS' name='keywords'/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<meta content='YOUR BLOG DESCRIPTION' name='description'/> </b:if>

5. Click Save template

How to add multiple authors in blogger

BLOGGER offers multiple authors for a blog. It allows you to have multiple authors, a maximum of 100 to manage your blog. These authors can create new posts and edit them but, they neither have the features to edit or delete others posts, nor change your blog layout.

STEPS to add multiple authors

1. Go to Settings > Basic
2. Look for Permission > Blog Authors
3. Click Add Authors
4. Enter the emails of people to invite
5. Click Ok
6. Blogger will send invitations to them

How to display post title before blog title

BLOGGER posts listed in search engine results page (SERP) by default, display blog title first, followed by post title. This setting is not search engine optimisation (SEO) friendly because, most readers are searching for your blog contents rather than your blog title. Moreover, google only shows a maximum of 70 characters for the titles in SERP, and if you have a long blog title, then some of your post titles may be truncated.

Before      Tmbrain: How to display post title before blog title

After         How to display post title before blog title | TmBrain

STEPS to display post title before blog title

1. Backup your template
2. Go to Template > Edit HTML > Proceed
3. Look for <title><data:blog.pageTitle/></title> in your HTML code
5. Replace it with the code below

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/> | <data:blog.title/></title> </b:if>

6. Change | with any symbol of your choice
7. Click Preview then Save template

How to add facebook like button

FACEBOOK like button is a powerful tool for sharing content. It enables your readers to share your posts with their friends, with just a simple click. Follow these few steps to add facebook like button to each of your blog post.

STEPS to add facebook like button

1. Backup your template
2. Go to Template > Edit HTML > Proceed
3. Tick Expand Widget Templates
4. Look for <data:post.body/> in your HTML code
5. Add the code below, before or after that line

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='float:left;padding:2px 2px 2px 0;'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width0&amp;action=like&amp;font=verdana&amp;colorscheme=light&amp;height=35&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:35px;'/></div>
</b:if>

6. Configure your like button

layout (standard, button_count, box_count),
width, height,
action (like, recommend),
font,
colorscheme (light, dark)

7. Remove the conditional tags in blue, if you want to display the like button on static pages
8. Click Preview then Save template

How to install blogger related posts with thumbnails - linkwithin

LINKWITHIN offers not just related posts but, with thumbnails as well. These attractive thumbnails link to your older posts, making them more accessible to your readers. By keeping your readers engaged with your blog, you are increasing your traffic at the same time!

STEPS to install linkwithin

1. Go to LinkWithin
2. Enter your email address and blog link
3. Select Blogger for platform
4. Choose your width based on number of stories
5. Click Get Widget

STEPS to change the title

1. Click Edit Content
2. Add the code below, before content of the widget
<script>linkwithin_text='YOUR TITLE'</script>

STEPS to display the widget only on post pages

1. Click Edit Template
2. Replace the existing code with the code below
<b:includable id='main'>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:content/></b:if>
</b:includable>
3. Click Add Widget

How to add google custom search box

MAKE your blogs or websites more reader friendly by adding google custom search box. Just follow these simple steps and you can finish installing it in just 5 minutes.

STEPS to create search results page

1. Go to Pages > New page
2. Select Blank page
3. Enter Page title and leave the content blank
4. Click Publish
5. Copy the URL of the page

STEPS to create google custom search code

1. Log in to Google AdSense
2. Go to My ads > Search
3. Click New custom search engine
4. Fill up the necessary infomation
5. Customise your search box and search results page
6. Select on my website using an iframe for display results
7. Paste the copied URL
8. Click Save and get code

STEPS to add search box code

For the search box code
1. Copy the search box code
2. Go to Layout > Add a gadget
3. Add HTML / Javascript
4. Paste the copied search box code
5. Click Save

For the search results code
1. Copy the search results code
2. Go to your search results page
3. Switch to edit HTML
4. Paste the copied search results code
5. Click Publish

How to hide blogger navbar

NAVIGATION BAR or navbar is actually quite useful for both bloggers and visitors. As a blogger, you can sign in to your blogger account, customise your blog and create a new post easily. Visitors on the other hand, can search your blog, follow and share it on other social networks.This blogger navbar however, is not visually appealing because it does not blend well with your blog even though, you can choose from six different colours; and you may think of hiding it.

STEPS to hide blogger navbar

1. Backup your template
2. Go to Template > Edit HTML > Proceed
3. Look for ]]></b:skin> in your HTML code
4. Add the code below, before that line
#navbar { height: 0px; visibility: hidden; display: none; }
5. Click Preview then Save template

How to backup blogger template

TINKERING with the HTML code of your template can be fun but, things may get tricky at times though. It would be wise to backup your template before any changes have been made. By backing up, you have a saved template, then reverting it to the original is just easy.

STEPS to backup blogger template

1. Go to Template
2. Click Backup / Restore
3. Click Download full template

STEPS to restore blogger template

1. Go to Template
2. Click Backup / Restore
3. Click Browse
4. Browse your saved template
5. Click Upload