What is blogger in Draft & How to Change to Blogger in Draft

  • Blogger in draft is Blogger's beta server.
  • This server is used for testing new features before they integrate that features to main blogger server.
  • So if you decide to blog with blogger in draft, it will enable features than the main blogger server,with new function that is under construction or being reviewed.


How to Use blogger in draft?

The interesting thing is, anyone with a blogger profile can enable blogger in draft.
So you can too.

To Switch to blogger in draft,
Simply go to below address.

http://www.blogger.com/user-settings.do

OR

in blogger/home page, there will be  settings icon next to language drop down menu(New blogger interface)
Click on that button
And select edit user settings
It will take you to the page "http://www.blogger.com/user-settings.do".

There you can see   two sections named as General and Email Notifications

In general section, you can see a check box labeled "Use Blogger draft"

Tick it. Click on save button below.

You just moved to blogger's beta server from blogger server.
Now you can enjoy the pre-release features in all its glory.


Extras: At the time of writing this article, am using blogger in draft.
and there is an option to define/translate typed html in tools list. Which is not yet added to blogger.com's dashboard. ;)

happy blogging. feel free to start a discussion in comments :)

Read Article →

How to Switch back to blogger profile from Google plus profile - easy way


How to Switch back to blogger profile from Google plus profile

If you are using Blogger service to blog,you will have noticed that there are two profile options available for a blogger
one is blogger profile and another is Google plus profile related to your email account that you used to create blogs with.

so, How to Revert from Google plus profile to limited blogger profile where only your name  and picture(picture if available) shows. and another blogs you have(You can always hide  unwanted blogs from appearing in its settings)

To revert from Google plus profile to blogger profile ,Follow instructions below. 

In blogger/home page , click on settings icon that is located on right side of the page next to language drop down and select 'Revert to Blogger profile' option.

OR

Simply Go to below URL

http://www.blogger.com/revert-profile.g
Here we go. you can see a button named as 'Switch to a limited blogger profile.'

If You're currently using a Google+ profile on your blogs,drawback of changing to blogger profile from Google plus profile is, links to your blogs from the About tab of your Google+ profile will also be removed.(IT will affect SEO [authorship meta tag]).

If you switch to a limited Blogger profile, you will be asked to confirm your settings on the next page

Don't click on cancel, just proceed, click on switch to a limited blogger profile button.

It will take you to the confirmation page.
Address will be something like this

http://www.blogger.com/switch-profile.g?continue=/home?profileSwitch%3Dreverted&default_profile=profile-blogger&choose_profile&switchProfileSource=7

The profile that readers will see when they view your posts is shown below. Using a Google+ Profile gives you an identity on Google properties and connects you with your readers, allowing them to share and recommend your content on the web and on Google+. If you want to use another identity such as a pseudonym, you may choose a limited Blogger Profile instead. There will be a section titled as "You will be seen as...".

Display Name [----]

Type your name for your blogger limited profile

Click continue to blogger 


You have just converted from Google plus profile to limited blogger profile.

Feel free to start a discussion in comments

Read Article →

How to add Google translate to website or blog



Google translator is best service ever to translate between languages with ease.
Nowadays, many websites and blogs are make use of this feature. it will help user to read website contents in their language. Google does give an option to show a banner for users for those who are not using our website's default language as their system language.
thus Google translator makes it easy for users to read and understand everything in their language.

To add Google translator service to your website or blog, follow steps below. its so simple as anything.

Go to
http://translate.google.com/manager/website/add


You will see a text field titled with Website URL. with a subtitle of What is the URL of your website.

Enter your website URL here. if you are having a sub domain and not a domain, like a blogspot.com domain,
type the address here.

Next, is Website Language
It will ask for what is the original language of your website.
so if you have a website with its contents in English language, select default language as English.
And if you have a website with contents in other language, just select that language.

Click Next.





Now you will be in plugin settings Tab.

you will see a field titled as translation languages.

select All languages, if you want to enable translation to all languages.
or if you want to enable translation to only some languages, you can select "Specific languages" option  and select languages.

Select display mode.
Three options are there

  1. Vertical
  2. Horizontal
  3. Drop down only


When you select this option , sample of the widget displays on right side.

Under advanced title option

"Automatically display translation banner to users speaking languages other than the language of your page. "
Check this option if you want to. i recommend to check this.

If you have contents in multiple languages, then check next option "Your page contains contents in multiple languages"

If you want to, you can use Google analytic to track translation usage.

Click "next" button. you will be agreeing to Google's terms and conditions.





You are almost done, but you have to add the code to your blog or website to get it to work.

Add the first code meta code to section

It will look like this.

<meta content='e3ca32bb0a4tgtrr09d-5b78317696fryr863-g5bc9rye-15' name='google-translate-customization'/>

Now add the next code(Widget code), wherever you want to display the translation option

It will look same as this.



<div id="google_translate_element"></div><script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>



If you are blogger, using blogspot.com sub domain, you can use add add widget option in Layout Section

After completing the above steps, test run your website and check whether it works or not.
iif you are having problems, feel free to ask in comments.


Read Article →

How to Enable/Disable default lightbox for images in blogger

Here is how you can enable or disable blogger's default lightbox plugin on your blog.
If you need more advanced controls, you will have to disable it and search for any other Lightbox plugin like jQuery Pretty photo plugin.

So, if you want to enable light box for blogger images, then
Go to blogger dashboard by signing in to your blogger.com account.

Select your blog to enable or disable Default light box.
Click on options, Select Settings
It will open up settings tab for selected blog.

In settings -> select Posts and comments option


in sub menu -> you can see An option > showcase images with light box.



To enable light box, select Yes from drop-down menu,


if you are using any other plugin to showcase images, then
Select NO from drop down.


Note: If you are using any other light box plugin, then it is better to disable default light box in blogger else it will cause problems with your template.

Hope this helps you!:)

Read Article →

How to backup blogger template?- Simple tutorial with screenshots

Steps to backup blogger template

To backup your blogger template,

Go to blogger dashboard

Select blog to edit template

You can see template option on the left side of blogger dashboard window.

select it

It will show two thumbnails of your blog, one is the appearnce in web, and another for mobile.
next to that, on top right corner, you can see a button labeled "backup/restore" like this.



Click on that
it will popup a box that looks like below

Click on download template button
you are done.
your current blogger layout template code is backed up now. it will be downloaded to your downloads folder in .xml file format.

Restoring bloogger template .Xml file


If you fail anytime while you edit your blogger template codes, try restoring the .xml template file to server.
to do so, repeat above steps until it pops up the download template button containing box.
just below that button, you can see a choose file button.


click on that, browse for previously downloaded template.

After selection, it will be uploaded to server and page will automatically refreshed saying that the neww template has been applied.

Thats all you have just learned how to backup or restore the blogger template in easy steps.

Hope you liked this article. please post your comments :)


Read Article →

blogger blogspot redirection to country specified domain extention and SEO problem - Explained



If you are curious about your blogspot.com sub-domain you registered with a blogspot."com" suffix redirects to your country specified domain suffix?
In simple, do you wonder why your "youraddress.blogspot.com" redirects to "youraddress.blogspot.in" , "youraddress.blogspot.se" or "youraddress.blogspot.+any country specified suffix" ?

Please have a look at address bar above. what you see is my blogspot subdomain+country specified suffix.
If you are a visitor from india, then it might be "http://aslamise.blogspot.in/" in your address bar.

Does it really matter? Does this thing prevent our blog from getting higher page rank in Google?
After reading this Article, you will be able to understand everything about whats happening out there. :)

Do you know what are domain suffixes?

As Defined in Wikipedia
A top-level domain (TLD) is one of the domains at the highest level in the hierarchical Domain Name System of the Internet.[1] The top-level domain names are installed in the root zone of the name space. For all domains in lower levels, it is the last part of the domain name, that is, the last label of a fully qualified domain name. For example, in the domain name www.example.com, the top-level domain is .com (or .COM, as domain names are not case-sensitive). Management of most top-level domains is delegated to responsible organizations by the Internet Corporation for Assigned Names and Numbers (ICANN), which operates the Internet Assigned Numbers Authority (IANA) and is in charge of maintaining the DNS root zone.
Blogger.com's suffix or top-level-domain is ".com".

So here we go. what are country specified suffixes? you might have the answer.
if it is in India, its ".in"
As blogger is a part of Google and they are unstoppable , they own almost top-level-domains in the internet for their websites. Our blogspot.com is one of them.
So when a user access our sub domain in blogspot.com from his country, blogger server automatically redirect it from server itself.
Be happy that you are in care of a master if you are using blogger to blog, and you own much top-level-domain-names for your sub-domain.
and your blog will never be down.

Does this blogger redirect thing matter in Google search and page rank?

NO. absolutely this doesn't matter any SEO for blogger blogspot blogs/sub-domains.
Because blogger automatically push the canonical link to blogger blogs.

For example, if i am redirecting to http://aslamise.blogspot.in even if i try to visit http://aslamise.blogspot.com,
blogger will push this to my blog.

<link href='http://aslamise.blogspot.com/' rel='canonical'/>
This tells the browser and bots that 'Original link is http://aslamise.blogspot.com and go fetch it.".

A canonical page is the preferred version of a set of pages with highly similar content.

So search bots will search them and fetch them instead of http://aslamise.blogspot.com instead of http://aslamise.blogspot.in.

If you cant see a <link href='http://yourblog.blogspot.com/' rel='canonical'/>in source code of your blog's homepage, it says that you edited your blog's template or its a third party template which doesn't pull blogger information properly.

If you cant see then, Lets solve the rel='canonical' issue in your blogger template!


  • Go to www.blogger.com
  • Sign in with your account
  • Take Edit Template option
  • Find <head> tag in your template by searching(Ctrl+F)



  • Add below line after the <head> tag.

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


  • Save your template and Now you are done.


Check again in source code of the homepage whether canonical link displays or not.

Hope you enjoyd and understood this article.
If you have any questions, please ask me in comments :)



Read Article →

If, else, and elseif Statements in blogger template


Have you ever thought that editing blogger template is that easy if we know the basics of coding?
even if we have no such programming skills or just want to experiment,you will need to learn how "if else" statements works in blogger templates.

After reading this article, you will be able :

  • To Understand the basics of if else statements in blogger templates and widgets.

  • To give multiple condition to an if statement.

  • To Understand how blogger conditional tags works inside blogger's server.

  • To understand how easy it is to learn blogger's <b:if/> <b:else/> conditions.

But you should know that there is no method to call if else statements like in php or any other language just by calling something like this.

if (condition)
{
Condition is true - now Do something.
}
else
{
condition is not true - now Do something.
}


you know what are <b:if> <b:else> tags  in blogger templates ?
Yes, these are simply like if else statement.
You can use the b:if and b:else tags to display content in specific pages as per your conditions.
if you want to display your logo only on your homepage in blogger, then you can show it only on homepage by specifying the condition.

You can use the b:if and b:else tags to execute javascripts only where you wish to execute.
You can prevent executing javascript in a specific post or in homepage of your blog itself, just by passing an if else condition in your template.

Before further reading, please have a look at This post about blogger conditional tags, http://aslamise.blogspot.in/2012/12/all-blogger-conditional-tags.html that will help you to capture the syntax.

  • Blogger's if else condition's general syntax of use.


<b:if cond='condition'>
   [here goes the content to display if condition is true]
<b:else/>
   [here goes the content to display if condition is false]
</b:if>


For an example, if you want to display a text "Welcome to My Homepage!" on your homepage only,then the code goes like this.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<h1>Welcome to My Homepage!</h1>
</b:if>


If you are confused about what the above code does, i will explain to you

<b:if cond='data:blog.url == data:blog.homepageUrl'>
//This code lets blogger server to Check whether the current page url matchs homepage url.
//If i use it my blog, it will be executing like this <b:if cond='data:blog.url == "//aslamise.blogspot.com"'>
<h1>Welcome to My Homepage!</h1>
//Here goes the code to display if it is homepage.
</b:if>
//If condition Ends. Execution completed.


The <b:else/> tag is optional tag. Without a <b:else/> tag, the result will be either the content listed in the b:if section or simply nothing.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<h1>Welcome to My Homepage!</h1>
<b:else/>
<h1>This is not my homepage</h1>
</b:if>

So,You might have understood how to setup if or else conditions in blogger template,

Now, we should be knowing how to execute Multiple conditions in blogger template.
Multiple conditions means, you want to check whether all conditions are true, and not only one condition

<b:if cond='condition 1'>
<b:if cond='condition 2'>
[here goes the content to display if condition1 and then condition2 are true]
</b:if>
</b:if>


The <b:else/> tag is optional tag but The closing </b:if> is required. and if you dont close these conditional tags properly, blogger template will show errors.

Please Note that there are blogger conditional tags that we can use Globally ,Page Header,Blog Posts,Blog Archives,Profile,Text / HTML / JavaScript,Feed,Picture,Labels,List,Link List, or in Logo.

Some data tags are simply true/false values on their own, e.g. "allowComments" on a post.
With other pieces of data, you can compare them with specific values to get a true or false.
Here are some examples:

<b:if cond='data:post.showBacklinks'> True if the current post is set to show backlinks.(Apply only in blog posts)
<b:if cond='data:blog.pageType == "item"'> True if the current page is an item page (post page).
<b:if cond='data:displayname != "Aslam"'> True if this is not Aslam's display name.
<b:if cond='data:post.numComments > 2'> True if the current post has more than one comment.(Apply only in blog posts)
<b:if cond='data:post.numComments < 2'> True if the current post has less than one comment.(Apply only in blog posts)



Read Article →

All Blogger Conditional Tags - Page type Conditional tags

Are you a blogger? or a blogger template designer?
Then you should be knowing what are conditional tags in blogger, 
Actualy what are conditional tags?
have you heard of if, if else, conditions?

If you want to work something in only specified conditions, these tags will be helpful.
Blogger Conditional tags allows you to display files or pages or scripts only under conditions.
It is very similar to conditional tags in any other language. This includes tags such as if, if else. you can use it in your widgets, or blogger main template as well.
If Else type conditional programing in blogger can be done by using <b:if cond=' '>...</b:if> tag.
In this post am going to describe the use of conditional tags on html or widgets. 

1Home Page Only


2Everywhere Except Homepage


3Archive Page Only


4Everywhere except archive page


5Item Page or Post Page Only


6Everywhere except item page


7Static Page Only


8Everywhere except static page


9Specific URL Page Only


10Certain Labels Only









1 Home Page Only

To display a text message only on home page we use
<b:if cond='data:blog.url == data:blog.homepageUrl'> 
<p> This text will be displayed only on home page</p>
</b:if>

2 Everywhere except homepage we use

<b:if cond='data:blog.url != data:blog.homepageUrl'> 
<p>This text will be displayed everywhere except on home page</p>
</b:if>

If you want to display a widget only on home page, you will use the conditional code as highlighted on the following code for a blogger html/Javascript widget


<b:widget id='HTML1' locked='false' title='Testing Widget' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'> 
<!-- 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:if>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

3 Archive Page Only

To display html code only on archive page
<b:if cond='data:blog.pageType == &quot;archive&quot;'> 
<p>Text for Archive pages only</p>
</b:if>


4 Everywhere except archive page

To display html code everywhere except archive page
<b:if cond='data:blog.pageType != &quot;archive&quot;'>
<p>Text for everywhere except Archive pages</p>
</b:if>

5 Item/Post Page Only

To display html code only on item page
<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<p>Text for post pages only</p>
</b:if>

6 Everywhere except item page

<b:if cond='data:blog.pageType != &quot;item&quot;'> 
<p>Text for everywhere except item pages</p>
</b:if>

7 Static Page Only

To display html code only on static pages

<b:if cond='data:blog.pageType == &quot;static_page&quot;'> 
<p>Text for static pages only</p>
</b:if>

8 Everywhere except static page

To display html code everywhere except static page
<b:if cond='data:blog.pageType != &quot;static_page&quot;'> 
<p>Text for everywhere except static pages</p>
</b:if>


9 Specific URL Only

To display only on specific URL
<b:if cond='data:blog.url == &quot;http://aslamise.blogspot.in/2012/12/all-blogger-conditional-tags.html&quot;'> 
<p>Text will display on above URL only</p>
</b:if>

10 Certain Labels Only

To display content on certain labels only:

<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name == &quot;Testing Category&quot;'>
Text will be displayed only on Posts which have label Testing Category. </b:if>
</b:loop>

Note*: You will need to be inside Blog Posts loop in order to use Certain Labels Only code 

Read Article →