Adding META Keyword Dynamically in Blogger

Hi,

Welcome back to our Blogger Tutorial series. Most of the blogger have good knowledge of SEO. They have used various blogging platform and use different plugin for SEO enhancement. Search Engine Optimization, commonly known as SEO is a method or way or process of effecting the visibility of your website among different Search Engines for better traffic and ranking. There are many paid advertisements among different Search engine but they are not considered part of SEO.

Whatever they do, coming back to our topic, we are talking about Keywords. META description and Keyword are the best approach for search engine. META description show the excerpt of your post or blog while searched. And Keywords are useful to match with the query text from user in search box. Lets illustrate using below graphical presentation.

But if you are using Blogger, there is no plugin for making your blogs SEO better, you have to do it yourself. If this article, I will tell you, how to add META Keywords dynamically according to post in your Blogger blog. You can set static keywords by modifying template code in simple steps but adding dynamic content is somehow tricky. 

Dynamic Meta Keywords

Lets move to work. Start with logging into blogger. Points are described step by step.

1. Click in Template Link in Left side.
2. Click on Backup / Restore button at right corner.
3. Click on Download Full Template and save at safe place. In case something goes wrong, you will need this before cursing me.
4. Now click in Edit HTML button just below snapshot preview of your blog template.
5. Search in Template using CTRL+F and find for keywords.
6. If there is already a link containing Meta Keyword, replace its value with below one or if there is no keyword then search for </title> and add below line just below that.

   <b:if cond='data:blog.metaDescription != ""'>
        <meta expr:content='data:blog.pageName + ", " + data:blog.title' name='Keywords'/>
   </b:if> 
   

7. Save your template.

If you have following all steps I mentioned, congratulation you have successfully set your post title as keyword in Blogger. You can check this by viewing source code in your browser.

In our next post in this series, we will be discussing about how to add Labels in Blogger Meta Keyword section dynamically? Till then, keep reading. Do not forget to share or provide feedback.

All the Best.

+John Bhatt 

Read More

Adding CommentLuv in Blogger

Hi,
Once again, a new post for all blogger friends. As you are aware, the quality back-link has great value in website ranking. Most of blogger want to increase their ranking on various measurement tools and follow many tricks. They use many tools available over internet.

CommentLuv / IntenseDebate

In case of blog, one of the most used and must have feature is comment system. You should know what your visitor think about your post, so there should be a commenting system which is powerful, can protect spam, give you ability to control them and other administration features. Disqus is one of the most used commenting system. Another powerful and most used commenting platform is CommentLuv from IntenseDebate. This is an Automattic product. Automattic is company which made WordPress, JetPack, Askimet and other web products which are used by approx 70-80 % of web-masters. So by default, CommenLuv comes with Askimet spam protection which is actually powerful and blocks spam without any extra effort. Best thing about IntenseDebate is it is free. We will learn how to integrate CommentLuv comments with blogger template so that our blog can display and work with IntenseDebate commenting system.

Procedure

1. Open http://intensedebate.com/signup.
2. Fill the required details, If you have already got a WodPress.com account, you can login using WordPress API.
3. If you are registering for first time, you must confirm your email id. Check you inbox and confirm email.
4. Login to intensedebate.com using your username/password.
5. Click on Sites menu and choose Add Blog/Site or navigate to https://intensedebate.com/install
   
   
   
6. Put the domain of your blog. They have great support for Blogger. You can put your custom domain or blogger.com domain name and click next.
   
7. This is choose your platform screen. Currently they have automated tools for WordPress.org, TypePad, tumblr and Blogger. Click on Blogger button. Remember, classic blogger is not supported.
   
    
8. Now the next step is to login to blogger. Remember, you are using Modern version of Blogger. Navigate to Template section.
9. Click on Backup/Restore button on right top corner. 
10. You will be asked to download the template or upload. Click on "Download Full Template" button.
    
11. Save this XML file (blogger template) to hard disc. Now navigate back to IntenseDebate website.
12. Next screen is installer screen for blogger. There are some steps. They will ask you either you want to put commenting system in all posts or in new posts only. Selecting All posts will delete all older comments made using Blogger comment system. So this is not recommended if you have lots of comments in website earlier.
    
13. There is a File Upload button in Step 5, click on button, upload your newly saved XML template. The rest is on IntenseDebate.
14. Once file is uploaded, they read content and place all settings and codes themselves in template and write all code in a textbox.
    
15. Now copy all that text and navigate to blogger. Click on Edit HTML button. 
    
    
    
16. Replace all content in editor and click on Save Template button. Your all existing script customizations, texts, widgets will remain same and as per your settings, you can see the IntenseDebate commending system enabled in your blog posts.

You have successfully completed the installation of IntenseDebate commending system in your blogger powered blog. Leave feedback about your reading experience. Your feedback will help us to improve.

Thanks for reading.

+John Bhatt 

Read More

Add SyntaxHighlighter to your blog

Hi,
This post is about all Blogger, who write code and want to share their code on their website of community. If the code is in HTML, JavaScript or other browser understandable language, browser renders and displays output instead of code. Visitor will see nothing instead of garbage while in case of other programming languages, formatting, wrapping, alignment and other styles are lost and user is confused about its actual structure.

To remove this we are going to implement SyntaxHighlighter functionality in our blog. Here we will work with Blogger blog, the method is same for html webpage. SyntaxHighlighter is a JavaScript library written by Alex Gorbatchev in year 2004. Because of its feature, it becomes more famous and still maintained at his website.

Procedure

Include the JavaScript files in head section of your website code using External Script linking method. For blogger, open your Template and search for closing of head tag.

</head>

Then paste these links for including files. You can also download latest version from http://alexgorbatchev.com/SyntaxHighlighter/ and use in your own web host also but blogger does not allow you to upload JavaScript files.

<link href='http://www.johnbhatt.com/SharedResources/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://www.johnbhatt.com/SharedResources/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://www.johnbhatt.com/SharedResources/scripts/shCore.js' type='text/javascript'/>
<script src='http://www.johnbhatt.com/SharedResources/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://www.johnbhatt.com/SharedResources/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://www.johnbhatt.com/SharedResources/scripts/shBrushXml.js' type='text/javascript'/>
<script src='http://www.johnbhatt.com/SharedResources/scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='http://www.johnbhatt.com/SharedResources/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://www.johnbhatt.com/SharedResources/scripts/shBrushSql.js' type='text/javascript'/>

You need to include file that you are going to use. Above links are of default CSS style sheets and CSS, JavaScript, XML, CSharp, Php, SQL languages. XML includes HTML, XHTML and XML. Next step is to write a simple JavaScript function and tell browser to run the code.

<script type='text/javascript'>
  SyntaxHighlighter.config.bloggerMode = true;
  SyntaxHighlighter.all();
</script>

Now you are all set to write code in your post. Open editor in HTML mode and write code inside HTML pre (Pre formatted) tag with a class attribute (stylesheet identifier) defining its programming language. Lets see below example to get clear view. 

<pre class="brush:html"> // Replace your brush with your own.
<html>
<head>
<title>Adding SyntaxHighlighter to Blogger Blog by John Bhatt</title>
</head>
<body>
Body can contain codes also, that too highlighted and formatted, well aligned. Congrats.
</body>
</html>

</pre>

Important: You may have to change html tags < and > to html ISO codes. Simply open any code editor Notepad will also rock. Open Replace box using Ctrl+H shortcut or from Edit menu and search for < (Less than) and replace with <. Once again search for > (Greater than) and replace with > using Replace all method. This will not produce any error in case of HTML and other html tags.

Output is in your page. We have done this using this plugin. You have many themes (styles) to make it look better. You can include CSS as per your requirement. 

Do not forget to share and post suggestions.
+John Bhatt 

Read More

Creating a Static Home Page on Blogger

Hi,

On the first day of English Calender, lets start with Blogger tip. A lot of us use Blogger as blogging platform. Blogger is self hosted blogging software from Google. It has great tools and uptime and easier interface with lots of Google features integration with custom templates.
But it lacks a feature, you can not set a static home page. In other CMS (Content Management Systems) you have option to set your desired page as homepage so that each-time user visits website, the static welcome page or home page can be served. Blogger does not support this kind of setting.

Lets make a trick with Google so that we can set our desired post as home page.

Procedure:

1. Sign into blogger account and choose blog for which you want to set a static homepage.
2. If you have already written that post and published, skip options 3.
3. Click on New Post button in your Blog Admin section.
   
4. After setting your content and page title, Click on Schedule link in right side of compose box.
   
5. Set any future date and save. Remember date must be of future, suggested is a year or more future. 

Logic

The above trick will work on blogger because blogs are sorted according to published date and newer first. So blogger will think that that blog is published in last time and display at top of your blog.

There might be some risk if you are using AdSense with blogger, because the AdSense team randomly checks websites and this might not be according to their policy.

Thanks for reading. Wish you a happy new year once again and better luck ahead.

+John Bhatt 

Read More