Sunday, 24 April 2016

Google Introduced New Blogger Template Editor with Awesome Features

In last few months,many pro-bloggers mentioned that Blogger team is working hard for the betterment of blogspot platform.If you are also using Blogger platform for blogging then there is a good new for you because Blogger team has officially released an improvement in Blogger Template Editor.Normally we use Blogger Template editor for the customization of our template but the old editorwas that much user friendly.However new Blogger template editor is equipped with lot of features.In this post,we will discuss all features in details.
How to Make use of  New Blogger Template Editor?
You can easily experience the new Blogger Template Editor by navigating to Templates >> Edit HTML in your blog.The look of new Blogger Template Editor is shown below:
What are the  features of New Blogger Template Editor?
New Blogger Template Editor has so many features which were not present in its previous version.All features are discussed below:

#1- Line Numbers for finding errors

New Blogger Template Editor has the facility to highlight a particular line where error has occured.Thus it makes the error findings very easy.Earlier it was very difficult to find the error line after getting an error like “Error parsing XML, line 297, column 3””.It is a nice feature.Actually most of the html editor softwares like dreamweaver contains this kind of facility but it was missing in blogger.Now blogger also has this facility which is quite nice.

#2-Syntax Highlighter

Syntax Highlighter is another awesome feature which has been introduced in new blogger template editor.It allows users to understand the code easily by highlighting the codes with different colors.

#3-Expand/Hide section of code

New blogger template editor provides you the facility to expand or hide different section of code.It means you can easily hide a section of code which is not in use.It makes the task of developers much easier because sometimes it creates confusion and they write codes on wrong sections.

#4-Preview changes at the same place

Now you can preview your templates after making changes in template and that too in same place.Normally this kind of functionality is known as WYSIWYG(What You See Is What You Get) and is often employed by softwares like Adobe Dreamweaver.Now the same facility is available in Blogger as Well.

#5-Directly Jump to Different Widget Codes

Now there is no need to search your widgets through their IDs or Names.You can directly find their code by clicking on respective widgets.To do the same,simply click on “Jump to Widget” option.It will open a drop down menu where you will have to click on any specific widget.

#6-Expand widget replaced with format template

In old Blogger Template editor,there were a checkbox at the top with title “Expand Widget”.Now it has been removed.It place has been taken by “Format Template”.So if any tutorial asks you to expand widget then simply click on “Format Template” button.It does exactly the same task.

How to use Custom Robot Header Tags for better SEO in blogger?

Blogger and WordPress are the two blogging platform which are very much popular these days. As you all know, WordPress is considered powerful due to the availability of Various Plugins. Blogger doesn’t support plugins but the developers are continously adding new features to it. This week, i am providing you a Search Engine Optimization Tutorials for optimizing your blogger blog. This is the third post of our “Blogger Advanced SEO Pack for Beginners and Advanced Users” series. Today, i will show you, How you can use the Custom Robot Header Tags for optimizing a blogger blog. It is an advanced tool so new bloggers always avoid its use. It can really boost your ranking and definitely traffic so i am providing you the complete setup tutorial.

Understanding the Different Tags used in Custom Robot Header Tags
Before you start using Custom Robot Header Tags in blogger, you must have proper knowledge of Different tags which are used. Without proper knowledge of different tags of Custom Robot Header Tags, you won’t be able to use it properly. In this case, it can do much harm as well  so lets know the meaning of all tags.
Have a look on the above attached figure and read the meaning of each tags carefully before applying them to your blog.
How to Setup Custom Robot Header Tags for better SEO in Blogger?
Just follow the below given steps and enjoy:
  • First of all, Sign into your Blogger Account.
  • In Blogger’s Dashboard, Click on “Settings”.

  • In Settings, Click on “Search Preferences” option. After doing that, you will see a new screen on the right side. Just click on “Edit” link which appears beside “Disabled” option of  “Custom Robot Header Tags” option. Below given figure shows everything clearly.
  • Just enable this option by choosing the “Yes” radio button. After choosing “yes” option, You will see the below given screen:
  • If you have already read the above provided information, which tells the meaning of all tags, you can easily apply the best settings for your blog. If you are confused, just apply the below given settings.  The below given settings are recommended by me.

  • That’s it from the settings part. Just click on “Save Changes” button and you are done.
From the Editor’s Desk
As i mentioned earlier, Naive or new blogger users hardly make use of Custom Robot Header Tags.  Most of the time, this functionality is used by Experts because it comes under Advanced SEO functionality, which has been provided by blogger.
I always try my best to make every tutorial easy for you. If you are still facing any difficulty or have any query, feel free to ask the same. It would be my pleasure to assist you.

How to Speedup a Blogger Blog by using Lazy Load Script?

In this modern World, People don’t have useless time so they try their best to utilize the time. Due to this reason, they prefer faster devices, faster internet connection and obviously fast loading websites.  Those days are gone when users preferred to use slow loading websites having quality contents over Fast loading websites having a bit poor contents. Contents still matters but now,t he success or Failure of a blog/website also depends upon their load time as well. For example- Users will not visit a website which takes 5 minutes to load. Instead of that, they will visit a website which takes just 1 minute because it saves their precious time.
As we all know, Blogger is a Popular Free Blogging Platform which allows you to modify the codings so as to enhance the look and feel of your Blog. Sometimes, Designers use lots of Graphics which slows down their blog. If you are also facing the same problem, You can either Compress your Images or use the Lazy Load Script. Today, I will show you the way to speedup a Blogger Blog by using the Lazy Load Script.
How to Speedup a Blogger Blog by using Lazy Load Script?
Simply, Follow the below given steps:
  1. First of all, Log in into your Blogger Dashboard by visitinghttp://www.blogger.com and choosing your Blog.
  2. Once done, Click on “Template” Option. You will find this option on the left hand side. The screenshot of the same is given below:
  • After that, Click on “Edit HTML” option. The screenshot of the same is given below as well:
  • Now, Press “Ctrl+F” button on your keyboard and try to find “</head>“. If you are confused, see the below given picture:
  • Just Above </head> tag, Insert the below given code:
<!– starting the Lazy Load Script –>
<script type=”text/javascript”>// < ![CDATA[ (function(a){a.fn.lazyload=function(b){var c={threshold:0,failurelimit:0,event:”scroll”,effect:”show”,container:window};if(b){a.extend(c,b)}var d=this;if(“scroll”==c.event){a(c.container).bind(“scroll”,function(b){var e=0;d.each(function(){if(a.abovethetop(this,c)||a.leftofbegin(this,c)){}else if(!a.belowthefold(this,c)&#038;&!a.rightoffold(this,c)){a(this).trigger(“appear”)}else{if(e++>c.failurelimit){return false}}});var f=a.grep(d,function(a){return!a.loaded});d=a(f)})}this.each(function(){var b=this;if(undefined==a(b).attr(“original”)){a(b).attr(“original”,a(b).attr(“src”))}if(“scroll”!=c.event||undefined==a(b).attr(“src”)||c.placeholder==a(b).attr(“src”)||a.abovethetop(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.rightoffold(b,c)){if(c.placeholder){a(b).attr(“src”,c.placeholder)}else{a(b).removeAttr(“src”)}b.loaded=false}else{b.loaded=true}a(b).one(“appear”,function(){if(!this.loaded){a(“<img />”).bind(“load”,function(){a(b).hide().attr(“src”,a(b).attr(“original”))[c.effect](c.effectspeed);b.loaded=true}).attr(“src”,a(b).attr(“original”))}});if(“scroll”!=c.event){a(b).bind(c.event,function(c){if(!b.loaded){a(b).trigger(“appear”)}})}});a(c.container).trigger(c.event);return this};a.belowthefold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).height()+a(window).scrollTop()}else{var d=a(c.container).offset().top+a(c.container).height()}return d< =a(b).offset().top-c.threshold};a.rightoffold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).width()+a(window).scrollLeft()}else{var d=a(c.container).offset().left+a(c.container).width()}return d<=a(b).offset().left-c.threshold};a.abovethetop=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollTop()}else{var d=a(c.container).offset().top}return d>=a(b).offset().top+c.threshold+a(b).height()};a.leftofbegin=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollLeft()}else{var d=a(c.container).offset().left}return d>=a(b).offset().left+c.threshold+a(b).width()};a.extend(a.expr[“:”],{“below-the-fold”:”$.belowthefold(a, {threshold : 0, container: window})”,”above-the-fold”:”!$.belowthefold(a, {threshold : 0, container: window})”,”right-of-fold”:”$.rightoffold(a, {threshold : 0, container: window})”,”left-of-fold”:”!$.rightoffold(a, {threshold : 0, container: window})”})})(jQuery);$(function(){$(“img”).lazyload({placeholder:”http://i22.servimg.com/u/f22/15/42/72/40/grey10.gif”,effect:”fadeIn”,threshold:”-50″})})
// ]]></script>
<!– End of Lazy Load Script –>
  • After that, Click on “Save Template” Button and you are done.

Is there any Disadvantage of using Lazy Load Script?
Every coin has two faces so Lazy Load Script also has some disadvantages. Your blog on Browsers where Javascript is disabled or doesn’t have support for javascript will show Blank Images. This is the only disadvantage. Many blogger has misconception that, it affects the SEO as well which is not true.

Top 10 Must use Free Online Tools for Bloggers and Webmasters

People often ask me, What’s blogging for you? I simply answer, it is like second life to me because I can’t live without blogging. So many people starts blogging everyday but they fail because they focus on earning money online. If you are a new blogger then don’t concentrate on making money only. First of all, try to give something new and unique to your users. Just remember that, Blogging is not a magic which will supply bundles of note(money) right from the first day. It really needs a lot of hard work and research.
Internet is the best place to learn. Now a days, Pro Bloggers are making huge amount of money from their blogs so they use Paid Tools. However, it is not possible for every new bloggers. When i started blogging, i used many Free Online Tools which really helped me a lot. I am still using these Free Online Tools and now sharing Top 10 Must use Free Online Tools for Bloggers.
Top 10 Must use Free Online Tools for Bloggers
The list of Top 10 Must use Free Online Tools for Bloggers are given below:

1.Index King

Index King is one of the best Free Online Tools for new bloggers because it helps you to index your blog much faster in various search engines. It uses the ping functionality and thus forces different search engines to know about your new blog quickly. It means your new blog will be indexed much faster than ever.

2.Google Banned Site Checker

Google Banned Sites Checker Tools is considered best for the one, who is interested in buying new websites or domains because it provides information about the sites, which are banned by Google. Please Note that, Google never index any banned websites or Domain in their search crawler. It means, these domains or sites will never get organic traffic. Before buying any domain, you must check its status in Google Banned sites checker.

3.Copyscape Tool

As its name suggests, it is used for checking the copied content. If you are an established blogger who gets lots of Guest Posting articles then you must check these articles for copied contents. This tool display the percentage of content which has been copied from other website or blogs.

4.Stat Counter

I use this tool on regular basis because it gives all kind of information related to my traffic i.e About visitors, the location of visits, Keywords using which they came, their browser types, their country and much more. I will recommend you to use this tool as well. Another similar tool is Google Analytics which allows you to track your visitors as well.

5.Free Website Malware Scanner

Sometime, bloggers or webmaster face difficulty while opening their own blog or website because their own antivirus blocks their website or blogs. If you are also facing similar issue, don’t forget to scan your website or blog for malware by usingFree Website Malware Scanner Tool. Believe me, It is really helpful.

6.Google Keyword Tool

It is the only tool used by me for keyword research. I consider it best because it is the product of Google  and it also shows the value of keywords. Based upon the value of keyword, you would be able to know the CPC rates which can be really beneficial for Adsense Users.

7.Google Adsense Sandbox Checker Tool

Google Adsense Sandbox Checker Tool is another free online tool which is developed by Amit Aggarwal of Labnol.org. It allows you to check whether Google Adsense has disabled showing ads on your website/blogs or not. Most of the time, bloggers experience this kind of issue when some of their blogs shows the Adsense Ads while others doesn’t.

8.Fake Page Rank Checker

If you are indulged into selling or buying of websites/blogs, Fake PageRank Checker is a must use Tools for you. These days, so many tools are available, using which, a web master can show fake Data like-High Google PageRank, Higher Alexa rank etc about their Website or Blogs. This Tool shows the correct data of any blog or website.

9.Background Pattern Downloader

Every blogger or webmaster want to enhance the look of their blog or website. Using an attractive background pattern really makes your blog/website attractive.Background Pattern Downloader is the website which, i use normally for downloading stylish and eye-catching background patterns.

10.Online Office Documents

Google Drive is one of the Free Online Tools which is used by me daily. It allows you to create files of various formats like -doc,excel file,Powerpoint file,Drawing file and much more. I like this tool because it provides a cloud computing environment which means, you can access your files from all parts of the world.

Remove the “Powered by Blogger” Attribution using the New HTML Editor of Blogger?

As you all know, Blogger is the most popular free blogging platform. However, its Templates contains an official Attribution which shows that the blog is the product of Blogger. Normally it appears as “Powered by Blogger“. Every blogger want to remove this “Powered by Blogger” attribution for giving a professional look and feel to their blog. There are so many ways to Delete this attribution widget but I am sharing the easiest one. Actually, this task is not so tough. I am publishing this tutorial on the request of “Rahul Ranjan“, who is a novice blogger. After the introduction of new HTML Editor in Blogger, he is quite confused. If you are also finding it difficult to remove the “Powered by Blogger” Attribution then follow the below given steps and enjoy.
How to remove the “Powered by Blogger” Attribution in Blogger?
  • After that, Click on “Edit HTML” option. The below given figure shows the same:
  • After that, Click on “Jump to Widget” drop down list and choose “Attribution 1” option. The below given figure shows the same:
  • Have a look on “<b:widget id=’Attribution1′ locked=’true’ title=” type=’Attribution’>”. You will have to replace “true” with “false”. The screenshot of the same is shown below:
  • Now replace the “true” option with “false“. Once done, click on “Save Template“. The screenshot of the same is shown below:
  • Once done, Click on “Layout” option. You will find this option on the left side as shown below:
  • You would be able to see the layout of your template. Now, find the “Attribution” widget and click on “Edit” link. Below given figure shows the same.
  • Another screen will appear before you. Simply click on “Remove” button. Below given figure shows the same.
  • That’s it. You are done. Now, Log out your account and log in again and enjoy.

How to Add a Facebook Follow Button in Blogger?

Facebook is the most popular social networking website in the world. Almost all webmaster try to bring traffic from facebook by using various facebook Plugins likeFacebook Likebox, Facebook You Might Also Like Slider and Like button. In other words, We can say that every blogger is aware of above mentioned products. Most of the time, they want to popularize their fan pages so they use their fan page url.

Some bloggers are also there, who don’t want to use their Facebook Fan Pages. Instead of that, they want to allow their users to follow them on facebook via Facebook Follow button. It appears similar to Facebook Like Box. If you don’t know, How to add it to your blog, follow the below given procedure.
How to Add a Facebook Follow Button in Blogger?
Simply follow the below given Procedure and enjoy:
  • Change the default Profile address with your own Profile Address. In this tutorial, I have replaced http://www.facebook.com/zuck withhttp://www.facebook/ravik1214. Below given picture shows the same.
  • Once done, click on “Get Code” button and choose the “IFrame” option. The screenshot of the same is shown below:
  • Select this code and use it anywhere in your blog or website.
I am Really Interested. Can you show a Demo?
Yes. Why not. As I said earlier, the above code can be used anywhere in your webpage. I am using it here for your better understanding.

How to Redirect Traffic from your Old Blogger Blog to New Website?

Normally, a newbie starts his Blogging career with blogger because it is totally free and provides lots of facilities. However, He/She may switch towards bigger goals. In that scenario, They want to redirect traffic from their old blog to the new website or self hosted blog. If you are also looking for the same, This post can be helpful for you.
How to Redirect Traffic from your Old Blogger Blog to New Website?
Some of the methods, Which can be used are given below:

1. Post Advertisement on your old blog

It is one of the common method of informing your visitor about your new website. Simply post a notice board on the your old blog. Always Post it at the top of your blog or below your menu so that visitors can see your Advertisements without any issue. Also make it attractive so that, It can grab the attension of visitors.

2. Use social networks

If you have already got lots of subscribers on social networks like Facebook, Twitter, Google+ etc then you can easily inform your visitors about your new website. For that, You can simply post your information on your Social networks. Ask your subscribers to visit your new website. The way of writting always matters most so make it catchy and attractive.

3.Make use of your subscribers

There is  major difference  between a New and Pro Blogger. New blogger never give importance to their subscribers while ProBloggers always send new stuffs to their subscribers. Always remember that, Subscribers are the one who comes back to your site so always give importance to them. Try to provide some special offer to make them interested all the time..Inform them about your new website and its content. Don’t forget to cover, How it will be helpful for them.

4. Redirect your old blog to new website

You can redirect the visitors of your old blog to the new address simply by putting a simple code in your blogger template. After the insertion of code, your visitors would be able to see the original site just for few seconds and then will redirected to the new website. The steps for implementing the same is given below:
  • First of all, Log into your blogger Profile.
  • Click on “Template” option. The screenshot of the same is shown below:
  • After that, Click on “Edit Html”. The screenshot of the same is shown below:
  • Try to look for <head> in your template as shown below:
  • Just below <head>, Paste the below given code:
  • Once done, Click on “Save Changes” button and you are done.

How to Add an Official Contact Form Widget to Blogger?

Blogger’s developer team is really working hard for the betterment of Blogger. Few months ago, They introduced Wikipedia Search Box widget. Now they have launched another widget i.e Contact Form Widget which allows you to add Official Contact Form widget to either sidebar or footer depending upon the location of widget box on your Template. It is a good news for blogger users because it will not disturb the page loading speed of Blog. This post contains the instruction for adding Official Contact Form widget to blogger.


Official Contact Form by Blogger


Why You Should Use Official Contact Form Widget in Blogger?
I have found few reasons which are shown below:
  • No Need of Using any Third Party Contact Form Any more.
  • Doesn’t Show any impact on Page load Speed.
  • You can customize it.
  • Can be easily Added to either sidebar,Footer or any other places( Depending upon the template), where html/javascript codes can be added.
  • Simple and Beautiful
How to Add an Official Contact Form Widget to Blogger?
Simply, Follow the below given steps and add the official Contact Form widget to blogger.
  • In order to add it into your blogger blog,log into your account and click onLayout.The screenshot of the same is shown below:
  • After that Click on “Add a Gadget“.The screenshot of the same is shown below.
  • Now you will see a Pop up with many Gadgets.Click on “More Gadgets” option on the left hand side and choose the “Contact Form New!“.The screenshot of the same is shown below:
  • After that, simply name your Contact Form. The screenshot for the same is shown below:
  • Once done, Click on “Save” button and enjoy.