Add Custom Robots.txt File in Blogger

Are you one of modern day bloggers without much knowledge of technical details, looking to enhance your blog's ratings and audience but don't know how to and your blogger friend told you that you can get a hike into your site visitors via editing your Robots.txt file? Or maybe you don't want search engines spiders to crawl through your pages? Or you do have a technical background but don't want to risk making changes without expert's words on topic? Well in either case, this is the right place for you to be. In this tutorial, you will see how to add Custom Robots.txt file in Blogger in a few easy steps.

But before we open and start working on Robots.txt, let's have a brief overview of its significance:
Warning! Use with caution. Incorrect use of these features can result in your blog being ignored by search engines.

What is Robots.txt?

With every blog that you create/post on your site, a related Robots.txt file is auto-generated by Blogger. The purpose of this file is to inform incoming robots (spiders, crawlers etc. sent by search engines like Google, Yahoo) about your blog, its structure and to tell whether or not to crawl pages on your blog. You as a blogger would like certain pages of your site to be indexed and crawled by search engines, while others you might prefer not to be indexed, like a label page, demo page or any other irrelevant page.

How do they see Robots.txt?

Well, Robots.txt is the first thing these spiders view as soon as they reach your site. Your Robots.txt is like a hour flight attendant, that directs you to your seat and keep checking that you don't enter private areas. Therefore, all the incoming spiders would only index files that Robots.txt would tell to, keeping others saved from indexing.

Where is Robots.txt located?

You can easily view your Robots.txt file either on your browser by adding /robots.txt to your blog address like http://myblog.blogspot.com/robots.txt or by simply signing into your blog and choosing Settings > Search engine Preference > Crawlers and indexing and selecting Edit next to Custom robots.txt.

How Robots.txt does looks like?

If you haven't touched your robots.txt file yet, it should look something like this:

User-agent: Mediapartners-Google
Disallow:
User-agent: *
Disallow: /search
Allow: /
Sitemap: http://myblog.blogspot.com/feeds/posts/default?orderby=UPDATED

Don't worry if it isn't colored or there isn't any line breaks in code, I colored it and placed line breaks so that you may understand what these words mean.

User-agent:Media partners-Google:
Mediapartners-Google is Google's AdSense robot that would often crawl your site looking for relevant ads to serve on your blog or site. If you disallow this option, they won't be able to see any ads on your specified posts or pages. Similarly, if you are not using Google AdSense ads on your site, simply remove both these lines.

User-agent: *
Those of you with little programming experience must have guessed the symbolic nature of character '*' (wildcard). For others, it specifies that this portion (and the lines beneath) is for all of you incoming spiders, robots, and crawlers.

Disallow: /search
Keyword Disallow, specifies the 'not to' do things for your blog. Add /search next to it, and that means you are guiding robots not to crawl the search pages /search results of your site. Therefore, a page result like http://myblog.blogspot.com/search/label/mylabel will never be crawled and indexed.

Allow: /
Keyword Allow specifies 'to do' things for your blog. Adding '/' means that the robot may crawl your homepage.

Sitemap:
Keyword Sitemap refers to our blogs sitemap; the given code here tells robots to index every new post. By specifying it with a link, we are optimizing it for efficient crawling for incoming guests, through which incoming robots will find path to our entire blog posts links, ensuring none of our posted blog posts will be left out from the SEO perspective.

However by default, the robot will index only 25 posts, so if you want to increase the number of index files, then replace the sitemap link with this one:

Sitemap: http://myblog.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=500

And if you have more than 500 published posts, then you can use these two sitemaps like below:

Sitemap: http://myblog.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=500
Sitemap: http://myblog.blogspot.com/atom.xml?redirect=false&start-index=500&max-results=1000

How to prevent posts/pages from being indexed and crawled?

In case you haven't yet discovered yourself, here is how to stop spiders from crawling and indexing particular pages or posts:

Disallow Particular Post

Disallow: /yyyy/mm/post-url.html

The /yyy/mm part specifies your blog posts publishing year and month and /post-url.html is the page you want them not to crawl. To prevent a post from being indexed/crawled simply copy the URL of your post that you want to exclude from indexing and remove the blog address from the beginning.

Disallow Particular Page

To disallow a particular page, you can use the same method as above. Just copy the page URL and remove your blog address from it, so that it will look something like this:

Disallow: /p/page-url.html

Adding Custom Robots.Txt to Blogger

Now let's see how exactly you can add Custom Robots.txt file in Blogger:

1. Sign in to you blogger account and click on your blog.
2. Go to Settings > Search Preferences  > Crawlers and indexing.

3. Select 'Edit' next to Custom robots.txt and check the 'Yes' check box.
4. Paste your code or make changes as per your needs.

5. Once you are done, press Save Changes button.
6. And congratulations, you are done!

How to see if changes are being made to Robots.txt?

As explained above, simply type your blog address in the url bar of your browser and add /robots.txt at the end of your url as you can see in this example below:

http://helplogger.blogspot.com/robots.txt

Once you visit the robots.txt file, you will see the code which you are using in your custom robots.txt file. See the below screenshot:

Final Words:

Are we through then bloggers? Are you done adding the Custom Robots.txt in Blogger? It was easy, once you knew what those code words meant. If you couldn't get it for the first time, just go again through the tutorial and before long, you will be customizing your friends' robots.txt files.

In any case, from SEO and site ratings it's important to make that tiny bit of changes to your robots.txt file, so don't be a sloth. Learning is fun, as long as its free, isn't it?

How To Set Custom Redirects in Blogger

Over time, most blogs may go through many changes, like posts being added or deleted. In some occasions, you don't want people to get 404 messages when they navigate to posts or pages that don't exist on your blog and instead, make all requests to a specific link to be redirected to another page. One of the best way to avoid broken links and keep your traffic flowing in the right direction is setting custom redirects via the Blogger Custom Redirects tool.

This tutorial will show you how to set custom redirects for Blogger posts and redirect an old URL to a new URL. But before redirecting any URL, you must know that there are two types of redirects:

• A 302 redirect means that the page has moved temporarily. This redirect doesn't pass the URL value to the new location and instead, it will take the visitors to an appropriate location so that you aren't showing them a 404 page not found, or an error page. You can use a 302 redirect for coming soon pages or maintenance pages.
• A 301 redirect means that a page has moved permanently to a new location. Use the 301 redirect when you deleted or changed the URL of your post. In most instances, the 301 redirects are always recommended for SEO because they will pass link juice (ranking power) to the redirected page and visitors will also benefit from this. However, 301s aren't suitable when you change your custom-domain, because it only supports redirection within the same blog, not to an external URL.

Now that we've established which is which, let's see how to set custom redirects for Blogger posts.

How to redirect old URL to new URL in Blogger

Step 1. Login to you Blogger account with email and password.

Step 2. Click on your blog > go to Settings \ Search Preferences and click "Edit" next to "Custom Redirects."

Step 3. Enter the old URL in the "From" field, and the new URL in the "To" field including the forward slash "/" (see the screenshot below)

Note: Do not enter the full URL in these fields. Just omit the address of your blog and type only the rest of the link. Again, this works only if you wish to redirect within your blogger blog and not to any external links.

Step 4. Click the "Save" link (1) and the "Save changes" button (2), and you're done!

If you want to redirect more pages, just click the "New redirect" button. Also, you can check out this tutorial to learn how to create a static homepage in Blogger using custom redirects.

How to Add or Invite Multiple Authors on Blogger

If you ever considered working on a blog with multiple authors and you'd like to add others to publish posts or moderate comments, you can invite multiple authors on your Blogger blog. These additional authors have blog posting rights and can be either a guest author or blog administrator.

1. An author can create and edit only his/her own posts and have restricted access to some of the blog' Settings. There, he or she will be able to access the Posting options and Add a mobile device, or remove themselves from the blog membership.
2. An administrator, on the other hand, will have FULL access to the blog' settings and template. Users with this privilege can edit or delete posts made by other members of the blog, add/remove other members or transfer the ownership of a blog.

Related: Add Author's Profile Picture and Name in Multi Author Blog

How to Invite Authors on Blogger

To invite multiple authors on a Blogger blog is really easy. Just follow the steps below:

Step 1. Log into your blogger account at blogger.com and click the name of your blog

Step 2. Click "Settings" on the left side of the page and go to the "Basic" tab:

Invite multiple authors on Blogger

Step 3. Look for the Permissions/Blog authors section and click on the "Add authors" link. Enter the email address for each author you would like to invite, separating each address with a comma.

Step 4. Click "Invite authors" button at the bottom once you're done. And that's it!

Managing Authors

The invited Authors will be listed after the invitations have been sent and they will need to click the "Accept Invitation" button in the invitation email in order to get started. Authors which have yet to accept or decline the invite will be listed under 'open invitations'.

To remove an author from the blog, simply click the "Remove" icon next to the author's email address:

Cancel the invitation

Once the invited member accept your invitation, they will be listed as an "Author" by default. To give a person full admin privileges, you can change the "Author" status in the "Permissions" section of the Settings > Basic tab to "Admin":

Changing an Author into an Admin in Blogger

Please proceed with caution! Administrators have as much power over your blog as you do, including the ability to permanently delete it!

So this is how you can invite multiple authors in blogger. With this feature, everyone on your team can help create different engaging content for your readers to enjoy.

How to Delete a Blogger Blog Permanently

So you really messed something up and need to delete a Blogger blog permanently, but don't know how? You might have encountered an error message you can't get rid of, or it might be something wrong with the appearance. Blogger lets us to create up to 100 blogs without worrying about bandwidth, but sometimes we just want to reduce the number of junk blogs from list to keep it short and simple. In this case, we may have decided that it is time to delete it. So how do you delete a blog on Blogger permanently?

Important! Removing or deleting your Blogger blog will also delete all of your blog data, including your existing blog posts. This means that your blog visitors won't be able to view your blog anymore, and that posts and pages associated with Blogger will be removed from your blog.

How to Delete a Blog on Blogger Permanently

1. If you are not already logged in, log into your Blogger account at http://blogger.com

2. From the Dashboard (that's the area you see right after logging in that lists all your blogs) select the blog you want to delete. Make sure that you click on the right blog if you have more than one.

3. Navigate to the Settings tab and just below it the Other option. Click on it.

5. On the right side is the Blog tools section. To proceed with the deletion then click on the Delete blog link.

If you think you may want to come back to your blog or you've got posts that you want to keep, you can use the Export blog tool to export your blog before you delete it. You can either download your blog posts to your desktop or export it in a format that can be imported into other popular blogging formats.

6. Confirm that you want to delete it and you're done.

Once you've pressed the Delete This Blog button, you will be redirected to the Dashboard. Notice that your blog is no longer displayed in the list of blogs. If you want to view your deleted blog you can click on the Deleted blogs link on the left side of your Blogger Dashboard to see your recently deleted blogs.

Here you'll be able to see your deleted blog including details of its deletion date. To restore your blog, click on the Undelete button. Please keep in mind that deleted blogs can be restored within 90 days.

In this tutorial, we have covered some basic reasons why we might want to delete a Blogger blog permanently and the steps involved in deleting a Blogger blog. Instead of deleting the blog, you also have the option of making your blog private. By making it private, the blog will be kept in your Blogger account but no one will be able to view the blog without your permission.

How to Share Blogger Posts or Pages to Google+

When you share Blogger posts/pages to Google+, an entirely new group of people will be able to find and follow you. Right now, if you access your Blogger dashboard, you'll notice that there's a Google+ tab which can be used to connect your blogs with your Google+ profile or page.

If your Blogger blogs haven't already been integrated with a Google+ profile, you can go anytime to the Google+ tab and click on the Get Started button:

It's important to note that once you've upgraded your blog to connect with Google+, the posts or pages published on your blog will be listed on your personal Google+ profile. However, you have the option to select whether your content will be shared on your Google+ Profile or Page and associate some blogs with a Google+ page, while keeping other blogs connected with your profile.

How to associate your blog with a Google+ page

In some cases, you may want to associate a blog with the Google+ Page for your brand, business or organization, rather than your personal profile. For this, simply access your Blogger dashboard, visit the Google+ tab and there you can swap the Google+ connection from using your profile page to a Google+ page linked with your account:

On the right, you'll have the following options:

• Automatically share after posting: This option is enabled by default on all blogs linked to Google+. When you publish a blog post or page, a snippet will automatically be shared publicly on your Google+ page or profile. You can disable this setting just by unchecking this box.
• Promote to share after posting: If you don't want your post to be published automatically, then you can check this option. This option will allow you to share only some blog posts, or share to specific circles.
• Use Google + comments on this blog: This option enables the new Google + comment system on your blog. This is also a new feature provided by Google.

How to Share Blogger posts or Pages on Google+

If you have the Prompt to share after posting option checked, next time you publish a blog post, you'll see a share box inviting you to share your post with your Google+ followers. Note that the default circle is set to "Public" but you can modify your circles every time you choose to share.

Once you click the Share button, this post will appear on the profile or page to which you have connected your blog. Keep in mind that if you have posts scheduled to be published later, you will no longer be asked to publish to your Google+ stream. In this case, you can choose to Share your post/page at any time by clicking the Share link beneath a post or page.

You can also click on this option each time you want to share only certain posts, or if you want to retroactively share posts and you don't want to constantly change the setting.

As soon as you've chosen to use your Google+ profile on your blog, you can start sharing your content on Google+. If you haven't yet made the switch, click on this link to get started.

How to add Static Pages to a Blogger Blog (UPDATED)

A few months ago, Blogger has completely redesigned the section of the Pages, which now, looks very similar to that of the Blogger Posts. Now we will be able to manage the pages with more flexibility. For example, we can publish, delete or change many of them to draft at the same time - which has just the same function as the old Don't show option.

Related: How to Create a Static Home Page in Blogger

Among the options that we can find by hovering over a page and which we can see in the screenshot below are:

• Edit: To access the editing panel and to edit its contents.
• View: Open a new tab with the actual page.
• Share: Share it on Google+ (which was not possible before).
• Delete: remove a page.

In order to create a page, we need to open the pages editor from the button that says New Page. Almost every option tells us its function.

How to add a Web Address in the Pages widget

Many Blogger users wanted to know how can we add other web addresses, so that they display in the list of the Pages widget, since this option no longer appears in the "Pages" tab?

This can be done by opening the settings of the Pages widget by going to "Layout", then click on the "Edit" link in the widget / gadget for Pages (if you don't have the Pages gadget, just click on the "Add a gadget" link and select "Pages" from the pop-up window). And from there, we will find the option that says: "Add link page" - here, we will have to type the Web Address in the second field every time we want to add a new page from a specific address or URL.

Another cool feature that has been built is that now it will be possible to add a search description, and in that field to add the text that we want to appear in search results. Until now, this option has been available only for blog posts.

This option will appear once you enable the "Enable search description?" option by choosing "Yes". This will show up on "Meta Tags" by accessing the preferences for the search engines: "Settings" > "Search preferences" > "Meta Tags" > "Enable search description"?

How to Enable Google Plus Comments in Blogger

How to Enable Google Plus Comments in Blogger

Long time ago, Google proudly announced their new integrated commenting system which is now available for users who have created a Google+ profile and connected it with their Blogspot blogs. This way, Blogger users will be able to use Google+ as a commenting system for their blogs, while comments from Google+ will automatically appear on their blogs.

For those who haven't yet upgraded the Blogger profile to a Google+ profile, please see this tutorial on how to associate a blog to a Google plus page. Once you have connected a blog to a Google+ profile, you'll have a new "Use Google+ Comments on this blog" setting on the Google+ tab of your blog. To enable the Google plus commenting system, just check the box next to this setting:

As soon as you've enabled the feature through your Blogger Dashboard, you'll have the following features:

1. Threaded commenting system: the threaded system will allow a reader to reply to other comments on that post, thus the conversations will become much easier, more effective and more enjoyable
2. Public and private comments: this ensures a better privacy for your visitors which can make their comments either public or private
3. Edit or delete comments: your visitors will be able to edit any comments that they wrote even after publishing, so they don't have to write another comment explaining the correction
4. Google Plus One (+1) button in comments: we can up-vote any comment by clicking this button. This is a great feature which could also help you to get some traffic from Google+
5. "Also share on Google+" check box: with this option which is right below the comment editor, we will be able to share a specific comment on Google+ and thus get more traffic!

Things to consider before adding the Google Plus Comments in Blogger

• the Google Plus commenting system won't work for private and adult blogs
• If you are using a third-party commenting system like Disqus, your comments might not be retained when you enable Google+ Comments
• If you change domain name, comments will be gone. Therefore, it would be highly recommended to implement the Google Plus commenting system only after you've decided to use a custom domain name
• If you choose to allow comments pending moderation, you will have to visit the post in order to approve, hide or delete comments before they are publicly visible
• Only registered Google+ users can comment, this means that visitors who don't have a Google+ account will not be able to comment on your blog

How to Enable Google Plus on Custom Blogger Templates

If you are using a custom Blogger template, the comments might not show up after checking the "Use Google+ Comments on this blog" setting. In this case, we will need to apply the following trick in order to enable it on custom templates:

Step 1. From the Blogger Dashboard, go to "Template" and click on the "Edit HTML" button.

Step 2. Click anywhere inside the code area and press the Ctrl + F keys to open the Blogger search box, then type or paste the following line inside the search box and hit Enter to find it:

<div class='post-footer'>

Step 3. Just below it, paste this code:

<div class='cmt_iframe_holder' data-viewtype='FILTERED_POSTMOD' expr:href='data:blog.canonicalUrl'/>

Step 4. That's it! Click on the "Save template" button to save the changes and now we should be able to see the Google Plus comments in our Blogspot blog.

Happy commenting!

What is the difference between padding and margins?

For those who would like to know more about HTML and CSS, in this post we will learn the differences between margin and padding CSS properties that are used to add space between the HTML elements, thus preventing the elements from getting 'stuck' together.

Although both have similar functions, each work in a different way.

1. Padding determines the inner margins, being used for changing the distance between the content of a given element and its border.
2. Margin is the space outside of an element affecting how far the element is away from other elements.

For a better understanding of how the padding and margin work, take a look at the picture below:

Difference between margin and padding

Just as you have the option to define the borders for each side of your HTML elements (eg. borders for the sidebar), you can do the same with the margin and padding properties. All you need to to do is to change the top, right, bottom and left values​​.

The values that you can use include: pixels (px), centimeters (cm), millimeters (mm). em units (em), x-height (ex), inches (in), picas (pc) and point sizes (pt).

When using margin and padding, you need to add a value for each 4 corners of an element, as follows: top, right, bottom, left. Each value must refer to the each side of the HTML element. The first value is for the top, and they follow a clockwise direction, so the value would be close to the right, then bottom, and finally, left.

Example 1:

padding:5px 15px 5px 15px;

• top padding is of 5px 
• right padding is of 15px 
• bottom padding is of 5px 
• left padding is of 15px

margin: 10px 5px 10px 5px;

• top margin is of 10px
• right margin is of 5px
• bottom margin is of 10px
• left margin is of 5px

If you define a single value (instead of 4), the distance applies on the all sides, i.e. it will be applied on the 4 sides of the HTML element that you want to modify.

Example 2:
padding: 5px (top and bottom) 15px (left and right);
margin: 10px (top and bottom) 5px (left and right);

If it helps you visually, think of an A4 page of type inside a picture frame. The margin is the space between the edge of the sheet of paper and the other elements (the parts of the frame), while the padding would be the space between the edge of the sheet and where the type starts on the page. The border would be the edge of the sheet of paper.

It's probably easier to understand if you have borders, then it also becomes obvious which one to use. Do you want "space" after the border (outside the element = margin) or before the border (inside the element = padding).

How to Use Cookies in Javascript

Each time we visit a website, cookies can be stored to 'remember' things that we do while browsing a page. This may happen, for example, when we visit a page where we have to login with an username and a password. In this case, after verifying that the login is correct, usually a cookie is stored on our computer.

An example would be the popular page of Google. This search engine allows users to choose how many search results they want to see on each page. Thanks to a cookie, this configuration remains unchanged for each computer, even after rebooting several sessions. Despite this, it is good to remove them from time to time because although some will expire being erased automatically after a while, some of them will never do so.

Like many other things, cookies may suffer a poor use and hence, their bad reputation. For instance, some websites can store and study the browsing habits of a user without their knowledge. This is why most browsers already include a system to filter them and can decide if they will provide some privacy or not.

If you want to see a live example of how a cookie works, please visit this page and refresh it a few times. You should get an alert window telling you about how many times you visited the page.

Script source: javascriptkit.com

There could be other ways to use cookies but a server could do this with JavaScript. Below we have a simple script that can be used as many times we want, even for different purposes. Basically, what the following script does is to create three functions: the first one is to set a cookie, the second one is to read it, and the last one is to erase it. We can apply it in Blogger by accessing the template HTML and add it just before the </head> tag:

<script type='text/javascript'>
//<![CDATA[

// Set cookie
function setCookie(name, value, expires, path, domain, secure) {
document.cookie = name + "=" + escape(value) +
((expires == null) ? "" : "; expires=" + expires.toGMTString()) +
((path == null) ? "" : "; path=" + path) +
((domain == null) ? "" : "; domain=" + domain) +
((secure == null) ? "" : "; secure");
}

// Read cookie
function getCookie(name){
var cname = name + "=";
var dc = document.cookie;
if (dc.length > 0) {
begin = dc.indexOf(cname);
if (begin != -1) {
begin += cname.length;
end = dc.indexOf(";", begin);
if (end == -1) end = dc.length;
return unescape(dc.substring(begin, end));
}
}
return null;
}

//delete cookie
function eraseCookie (name,path,domain) {
if (getCookie(name)) {
document.cookie = name + "=" +
((path == null) ? "" : "; path=" + path) +
((domain == null) ? "" : "; domain=" + domain) +
"; expires=Thu, 01-Jan-70 00:00:01 GMT";
}
}

//]]>
</script>

Once done, in order to set a cookie, we only need to put the name and the value in quotes when we call the function. Additionally, we will set the expiry date by getting the current Time (in milliseconds) and add the required number of minutes (in milliseconds):

var expiration = new Date();
expiration.setTime(expiration.getTime() + 10000); //Expire after 10 seconds
setCookie("cookiename","hello",expiration);
}

The above code sets a cookie called cookiename, with the hello value and set its expiry date to 10 seconds after it has been set (10000 milliseconds = 10 seconds). If we want to restore the value of this cookie, then we should use the second function with the cookie name:

var checkCookie = getCookie("cookiename");

By adding this code below the <body> taag, we created a cookie with the value 'hello' which can be shown on the screen if we want to. The cookie will disappear after 10 seconds:

<script type='text/javascript'>
var expiration = new Date();
expiration.setTime(expiration.getTime() + 10000);
setCookie("cookiename","hello",expiration);
var checkCookie = getCookie("cookiename");
document.write(checkCookie);
</script>

The erase function is used in the same way as the one for reading just by clicking on the name of the cookie. The setCookie values for 'domain' and 'secure' are not used. Use 'domain' on the JavaScript cookie if you are using it on a subdomain, where the cookie is set on the widgets subdomain, but you need it to be accessible over the whole yoursite.com domain.

The combination of these three functions will allow us to handle cookies for specific purposes, as we will see in the near future.

How to Add CSS code To Blogger using Template Designer

If you are having difficulties adding the CSS codes in a Blogger template, here's a short guide that will show you a more practical and fast way to add CSS (Cascading Style Sheets) so that it will be easier for you to customize your blog.

Some users have complained that when they had to add the CSS codes to install some feature in Blogger, they found it difficult to locate the ]]></b:skin> tag. So, I decided to make this quick tutorial to show you another way of adding the CSS without having to access the Blogger HTML editor.

Adding CSS via the Blogger Template Designer

Step 1. Log in to your Blogger account and select the blog that you want to customize.

Step 2. From the Blogger dashboard, choose "Template" and click on the "Customize" button.

Step 3. Click on the "Advanced" tab.

Step 4. Now just add your CSS code inside the "Add CSS" tab (if you have more options, you may need to scroll down the list). Here you can add any CSS code each time you want to apply a new style to your template.

Step 5. Once added, click on the "Apply to blog" button to save the changes.

Following this method, you can't edit the existing CSS styles already added in your template which will require to access the template's HTML and make the modifications there. Here, you can only add new styles and edit the existing styles added through the Blogger Template Designer panel.

Please note that when adding the CSS styles, there's no need to put the <style type="text/css"> ... </style> style tags, which usually would go above the </head> tag in the template's HTML code. Adding these tags may result in an error.

If you change the template, the CSS added here will be removed. The same goes for any other additions or CSS customizations made ​​through the template HTML editor. So this is how we can easily add CSS code to Blogger using Template Designer without having to search the ></b:skin> tag.

How to add custom Variable definitions to Blogger

In this tutorial, we are going learn about the CSS Variable Definitions for Colors and Fonts that could be found at the top of the style sheet of a Blogger blog. The values for the Variable definitions can be modified directly through the Blogger Template Designer where are the settings for colors, backgrounds, fonts and font sizes.

Most default Blogger templates, such as the Minima Template, use these settings for the CSS, which makes it easier to modify the variables through the Blogger dashboard, using the Template Designer ("Template" > "Customize") editor and going to the "Advanced" section.

If the definitions are already added in the CSS, we'll be able to change the background colors, font colors, styles or sizes, directly from our Blogger dashboard without having to touch the HTML code of our template.

If these values ​​are not set, we can define them by creating our own variables. The more variables are created, the greater will be the ease of changing colors and fonts of the Page Elements by going to the "Template Designer" and click on the "Advanced" tab.

In some cases, we can't change the color or font of a custom template if the designer has not implemented the variables and didn't defined & specified a particular value directly into a property. And if there is no definition for these values​​, we may not be able to customize it through the Blogger's Template Designer.

There are two types of variables:

1) Color Variable:

<Variable name="body.background.color" description="Outer Background" type="color" default="#66bbdd" value="#66bbdd"/>

• In red is the variable name. Here you can put any name you want, however, it must not contain spaces, that's why we may see some variable names using a dot "." between each word.
• In green is the description that will appear in the Fonts and Colors panel (it can contain spaces).
• In blue is variable type, which in this case is "color".
• In purple is the default value, which runs in the absence of any other value.
• In orange is the value of the selected color.

2) Font Variable:

<Variable name="body.font" description="Font" type="font" default="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif" />

• In red the variable name without spaces.
• In green the description of the variable, may contain spaces.
• In blue is the type of the variable, which in this case is font.
• In purple the default font.
• In orange is the font that you choose.

Where Are Variable Definitions located

We can find the variables definitions in the <head> section of our Template by accessing the HTML code (click on the "Edit HTML" button). There we should see a pair of <b:skin>..</b:skin> tags. The CSS style declarations will go in between those tags, along with the variable names.

How to Create Variables with type Color

Now, let's see how we can create type="color" variables in our template.

Please copy the below snippet and replace the names and types as you like, then paste the code below this comment:

/* Variable definitions
   ====================

Code to copy:

 <Variable name="NAME" description="DESCRIPTION" type="color" default="#xxxxxx" value="#xxxxxx" />

For a better understanding, let's take a look at this example with variable of type "color":

<Variable name="variablecolor" description="Variable with light blue color" type="color" default="#DDF2FF" value="#DDF2FF" />

Here, I have created a variable of type "color", with the "variablecolor" name. The color values (#DDF2FF) can be applied to all the borders of my blog and whenever I want to apply color styles to a specific border, I will type it like this:

border: 1px solid $(variablecolor);

Note that I have added the "$" symbol before the variable's name and included the name inside the parentheses. These should be added every time you want to implement a new variable definition.

Once we have created the variable, we can apply it on any property (not only borders) of any selector (page element) where it is possible applying the chosen color.

For example, if I want to add this color in the main-inner background (sidebar and posts area), I will add it just after the "main-inner" class selector, like this:

.main-inner {
background-color: $(variablecolor);
}

Now that a new variable has been added, save and return back to the blogger dashboard by clicking on the "Customize" button, then the "Advanced" tab. You will notice that there is a new variable called "Variable with light blue color". In order to change the color, just use the color picker tool.

How to Create Variables of type Font

Now let's say that I want to create a new variable of type="font" which I want to apply on the title of the sidebar gadgets. I will add it this way:

<Variable name="gadgetstitlefont" description="Gadgets Title Font" type="font" default="normal normal 16px Arial,Verdana,'Trebuchet MS',Trebuchet,Sans-serif"  value="normal normal 20px Cambria"/>

In this variable that I just created, the default font to be searched by the web browser should be Arial, and in its absence, Verdana and so on. Otherwise, apply the Cambria font which is actually the font that we want and which can be easily changed by accessing the Blogger Template Designer.

Once the font variable has been implemented, we can add it to any property of any selector where we want to define this font style.

To define where this variable should be applied (which, in my example, is the title of the sidebar gadgets), I will need to include the values ​​directly in the "h2" property of the "sidebar" selector (sidebar-right-1), by creating the following CSS rule:

#sidebar-right-1 h2 {
font: $(gadgetstitlefont);
}

And I will add this above the ]]></b:skin> tag of the Template (don't forget to add the "$" symbol before the variable's name, also put the name between the parentheses, otherwise it won't work).

Now, that we have included a new variable, Save the template and return to the Blogger dashboard by clicking on the "Template" > "Customize" button and access the "Advanced" tab. Scroll down and we will see a new variable named "Gadgets Title Font" - if you want to change the font type or size, you can do it directly via this panel.

After you've decided what font style should be applied, click on the Apply to blog button on the right side.

As you work on your template design, you can add lots of color and font variable types, however, for other types of CSS attributes, it is not necessary to create variables. The other types, such as margin, padding, need to be included in the HTML of the template above the ]]></b:skin> tag. So that's how you can add custom variable definitions to Blogger. Enjoy!

Understanding the Page Elements of a Blogger Layout

When following a tutorial on how to add a gadget/widget or make some customizations in a Blogger blog, some new users may not know the meaning of certain terms, and it may be harder to locate them. As for the gadgets, usually it is required to access the blog's layout in order to add or arrange any of the page elements.

For a better understanding, here are some basic explanations about the Page Elements located in the Layout section of a Blogger dashboard.

What are the Page Elements?

Page Elements is, basically, the body of our blog. To access the Page Elements, we need to click on the "Layout" option in the Blogger dashboard.

Understanding the Page Elements sections

The Blogger Layout is made of sections and elements. The sections mark certain areas of a page. Every section is represented by the <b:section> tag and has an unique "ID" that names its element which is followed by a CSS "class" selector. Each section has some attributes and through these, we can determine the number of elements allowed in the section and if this section gives the option to add a "page element".

Let's take a look to an example of the default code related to the header section found in the HTML of a Blogger template:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<-- rest of the code -->
</b:section>

Breaking apart the code above:

1. <b:section is the opening tag of the section.
2. class='header' - describes the existing group inside the "header" element
3. id='header' - identifies and specifies the header as a single element.
4. maxwidgets='1' - determines the number of elements allowed in the "header"; here we have the number of gadgets that we can include in the header section. In this example, '1' means that this section allows us to add only a gadget.
5. showaddelement='no' - the 'no' attribute means that the header will not show the "Add a gadget" link or we won't be able to move any Page Elements. To activate this option so that we can add new Page Elements (Add a gadget), we should change 'no' to 'yes'. By setting the "showaddelement" attribute to 'yes', we'll be able to arrange the elements as we like, just click on the element that you want to move and drag & drop it wherever you want.

The spaces reserved for adding elements in the existing sections are called Gadgets (or Widgets). You can easily add various Page Elements by clicking on the "Add a Gadget" link. This will open a pop-up window for you to pick and choose which elements should be added. Just click on the Gadget's title or on the blue plus sign symbol to add it to your blog's layout.

After you have added a page element, gadgets can be moved up, down or sideways. You can put them wherever you want. Of all the existing gadgets, the most used is the "HTML/JavaScript". Inside this gadget (widget) you can insert any code, as long as it is in the HTML or JavaScript language.

Each time you decide to add a new gadget, click on the "Add a gadget" link in the area where you want to add it. For example, if you want to add a JavaScript code and want it to appear in the sidebar, you should click on the "Add a gadget" link in the "Sidebar" section, choose the "HTML/JavaScript" option and paste the code in there.

Once you have added new gadgets (widgets), it is recommended to check the changes by clicking on the Preview button before saving anything. So, if something went wrong, you simply click on "Clear" and everything that was not saved will return to its previous state. If the position of any Page Elements (Gadgets) has been rearranged, you will need to click on the Save arrangement button in order to see the changes.

How to Add an Admin Control Panel in Blogger

A while ago I posted some tutorials on how you can remove the Blogger Navbar or add a Peek A Boo Effect so that it would show only when we mouse over on top of our page.

However, customizing or removing the Blogger Navbar also has its downside because the admin links for "New post", "Customize" and "Log Out" will be no longer visible and navigating through the blog functions could be really frustrating sometimes. When the navbar is visible, blog administrators can easily create a new post or customize their template with just one click; however, when the navbar is hidden, many more clicks are required to access the Blogger dashboard panel again.

In this tutorial, we'll see how to add an "Admin Control Panel" menu with many cool additions such as:

• access to the Blogger's Homepage
• create a New Page or Post
• view all your posts
• read your comments
• access the Blog's layout to add or rearrange gadgets
• edit the HTML of your Template
• refresh current page or post
• open a new tab with your blog's homepage
• access the blog' settings
• view your stats
• log out

We will put all these options on the top of your page as a menu and we will make it visible only to the administrator of the blog, so our blog visitors will not be able to see it.

The result will look something like this:

Adding Admin Control Panel to Blogger template

The Admin Control Panel will only be visible when the blog author is logged in and will not display to blog readers, same with the Post Edit or widget pencil icons which are only visible to you while you are logged in.

To add the admin panel to Blogger, follow the steps below:

Step 1. Go to "Template" and click on the "Edit HTML" button:

Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the Blogger' search box

Step 3. Paste this line inside the search box then hit Enter to find it:

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

Note: if you can't find this line, try to find the <body> tag.

Step 4. Just below that line or tag, add the following code:

<span class='item-control blog-admin'>
<style>
.control-panel ul{z-index: 20; position: absolute; margin: 0px auto; background-color: #F6F6F6; width: 100%; }
.control-panel ul li{display: inline-block; float: left; padding: 7px 0px;}
.control-panel ul li a {color:#686868;padding: 7px 15px;border-right: 1px solid #E3E3E3;font-weight: bold;font-size: 13px;}
.control-panel a:hover {text-decoration:none; color:#FC8F44;}
</style>
<div class='control-panel'>
<ul>
<li><a href='http://www.blogger.com/home'>My Blogs</a></li>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#editor/src=sidebar&quot;' rel='nofollow'>New Post</a></li>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#editor/target=page&quot;' rel='nofollow'>New Page</a></li>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#posts&quot;' rel='nofollow'>All Posts</a></li>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#comments&quot;' rel='nofollow'>Comments</a></li>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#pageelements&quot;' rel='nofollow'>Layout</a></li>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#templatehtml&quot;' rel='nofollow'>Edit HTML</a></li>
<li><a href='#' onclick='location.reload(true); return false;'>Refresh</a></li>
<li><a href='/' target='_blank'>New Tab</a></li>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#basicsettings&quot;' rel='nofollow'>Settings</a></li>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#overviewstats&quot;' rel='nofollow'>Stats</a></li>
<li><a href='http://www.blogger.com/logout.g'>Logout</a></li>
</ul>
</div>
</span>

Step 4. Click on the "Save template" button to save the changes.

Now take a look on your blog. While you are logged in to Blogger, you should notice your control panel appear on top of your blog. Enjoy!

With this admin control panel for Blogger you can easily access the functions of the blog and you will not have to always open your blog page and the Blogger homepage at the same time.