How to Add Numbered Page Navigation Widget for Blogger

In Blogger, we have the option to set the number of posts we want to display per page by going to the Settings menu > Posts and comments > Show at most ? posts. Once the number of total posts in our blog exceeds this number, we will see "Older Posts" and "Newer Posts" navigation links in our home page and archive pages footer as Blogger doesn't have any built-in function on page numbering. But page numbers instead of older and newer posts links could help our blog visitors to navigate quicker (jump from one page to another page or click on a specific page) and know the total number of posts published. Here's a tutorial on how to add numbered page navigation using Javascript to a Blogger/ blogspot blog. You can select any one of 3 different styles that I have mentioned below.

numbered page navigation widget

Adding Numbered Page Navigation to Blogger

You can add this widget in just two steps.
1. Adding The CSS.
2. Adding The Script.

Now let's see how to add the CSS style for page navigation.

1. Adding The CSS

Step 1. Go to Blogger Dashboard > Template > click on the Edit HTML button:

blogger template html

Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the Blogger search box. Type or paste ]]></b:skin> tag inside the search box and hit Enter to find it.

Step 3. Now choose one of the following numbered page navigation styles and copy the code just below it. Just above ]]></b:skin> paste the code of the style that you want to use:

Style 1

numbered page navigation style 1
.page-navigation{clear:both;margin:30px auto;text-align:center;}
.page-navigation span,.page-navigation a{padding: 3px 7px;margin-right:5px;background:#E9E9E9;color: #888;border:1px solid #E9E9E9;}
.page-navigation a:hover,.page-navigation .current{background:#CECECE;text-decoration:none;color: #000;}
.page-navigation .pages,.page-navigation .current{font-weight:bold;color: #888;}
.page-navigation .pages{border:none;}

Style 2:

numbered page navigation style 2
.page-navigation{clear:both;margin:30px auto;text-align:center;}
.page-navigation span,.page-navigation a{padding: 5px 10px;margin-right:5px; color: #F4F4F4; background-color:#404042;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}
.page-navigation a:hover,.page-navigation .current{background:#EC8D04;text-decoration:none;color: #fff;}
.page-navigation .pages,.page-navigation .current{font-weight:bold;color: #fff;-webkit-box-shadow: inset 0px -1px 2px 0px rgba(50, 50, 50, 0.69);-moz-box-shadow:inset 0px -1px 2px 0px rgba(50, 50, 50, 0.69);box-shadow:inset 0px -1px 2px 0px rgba(50, 50, 50, 0.69);}
.page-navigation .pages{border:none;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}

Style 3:

numbered page navigation style 3
.page-navigation{clear:both;margin:30px auto;text-align:center;font-size: 11px;background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #000000),color-stop(1, #292929));background-image: -o-linear-gradient(top, #000000 0%, #292929 100%);background-image: -moz-linear-gradient(top, #000000 0%, #292929 100%);background-image: -webkit-linear-gradient(top, #000000 0%, #292929 100%);background-image: -ms-linear-gradient(top, #000000 0%, #292929 100%);background-image: linear-gradient(to top, #000000 0%, #292929 100%); padding: 6px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
.page-navigation span,.page-navigation a{padding: 3px 10px;margin-right:5px; color: #fff;}
.page-navigation a:hover,.page-navigation .current{background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #59A2CF),color-stop(1, #D9EAFF));background-image: -o-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -moz-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -webkit-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -ms-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: linear-gradient(to top, #59A2CF 0%, #D9EAFF 100%);text-decoration: none;color: #000;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
.page-navigation .pages{border:none;background: none;}

2. Adding The Script


Step 4. Now find (CTRL + F) this line:
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
Step 5. Add the following script just below it:
<b:includable id='page-navi'>
<div class='page-navigation'>
<script type='text/javascript'>
var pgNavigConf = {
perPage: 7,
numPages: 6,
firstText: &quot;First&quot;,
lastText: &quot;Last&quot;,
nextText: &quot;Next&quot;,
prevText: &quot;Prev&quot;
}
</script>
<script src='http://helplogger.googlecode.com/svn/trunk/page-navigation.js' type='text/javascript'/>
<div class='clear'/>
</div>
</b:includable>
Step 6. Now we need to put the page navigation where it has to be shown (posts footer). Find the code below (if you can't find it, try to find only the first line):
<!-- navigation -->
<b:include name='nextprev'/>
Step 7. Replace it with this one:
<b:if cond='data:blog.pageType == "index"'>
<b:include name='page-navi' />
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<b:include name='page-navi' />
</b:if>
</b:if>
If you can't find the old page navigation code, then find this section of code:
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
...
<b:includable id='main' var='top'>
...
</b:includable>
</b:widget>
</b:section>
Insert this code immediately above the </b:includable> tag:
<b:if cond='data:blog.pageType == "index"'>
<b:include name='page-navi' />
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<b:include name='page-navi' />
</b:if>
</b:if>

Configuration

After installing, you might want to change some default settings. All the settings are in the script of step 5 above:
var pgNavigConf = {
perPage: 7,
numPages: 6,
firstText: "First",
lastText: "Last",
nextText: "Next",
prevText: "Prev"
}
- perPage: number of posts are shown in each page (7)
- numPages: number of pages are shown in page navigation (6)
- you can change the text by replacing the "First", "Last", "Next" and "Prev" texts.

Step 8. Click on the Save Template button and that's it! Enjoy!

5 Easy Ways to Improve the SEO of a blog & Boost Traffic

5 easy ways to improve the SEO of a blog 

improve seo, seo tips, boost traffic
SEO tips for a better search engine ranking
A blogger needs to know at least the minimum on SEO. For it, you don't need to be an SEO expert but you need to know the minimum so that your posts are well indexed in search engines.

The phrase "content is king" is one of the widest spread Internet memes and is used by many bloggers, with the idea that you should focus on having quality content, while the rest don't matter much. This is not true. Quality content is important, but that shouldn't be the only concern of a blogger today. In addition to producing quality content, your text needs to be optimized for search engines.

5 easy ways to improve the SEO of a blog

In this post, I will talk about of what would be the basics that any blogger needs to learn about SEO and other simple SEO knowledge. Below are 5 tips to improve the SEO of your blog:

1. Define the keyword

When you write a post, it is necessary to choose the keyword (or term) suitable for your text. What you want is that this keyword or term to be searched on Google and then get your post among the top. For this, it is necessary to use this keyword a few times in the text.

For example, here the keyword could be SEO, but this term is too generic and I could hardly get in the top for this search. Then I'll work with a term or a long tail keyword, so that this post will rank for the term "easy ways to improve the SEO of a blog". I will use this term a few times, but without exaggeration.

2. Use the keyword in the post title

Now that I have defined the keyword, I will use it in the post title. This step is very important and certainly will help you to get a better rank in search engines. As you can see, what I have in my title is the easy ways to improve the SEO of a blog keyword, along with other words to form an attractive and optimized title for SEO.

3. Use the keyword in the H2 tags

You must also use heading tags (h2, h3) in your posts. In this post, I am using the keyword "easy ways to improve the SEO of a blog" in a H2 header. Do this always, because it also helps to become well positioned in the search results. If you don't know or don't understand what are the header tags, I would suggest to do a further research on this subject.

4. Use the keyword in the text

You must use your keywords throughout the text. Especially in the first paragraph (please note that I have repeated the title in italics on the first line). But be careful when doing this, there is a maximum and minimum limit for that. Your text needs to be between 1 and 4.5% of occurrences of the keyword. Less than that will have no effect and more than that can alert the search engines and your text might be considered spam.

5. Write posts with more than 300 words

Posts under 300 words have little chance to be among the top results in search engines. Of course, you will be able to rank for multiple keywords that are less popular with less than 300 words text, but for the most competitive keywords that have the potential to bring a greater number of visits, it will be nearly impossible.

Thus, it is recommended to write posts with more than 300 words. It's not hard when you really understand the subject you're talking about.

Conclusion

As you can see, with some simple SEO techniques you can improve traffic coming to your blog from search engines. I hope you enjoyed these 5 easy ways to improve the SEO of a blog.

If you have any questions, leave a comment below.
Read more »

What is the difference between padding and margins?

For those who would like to know more about HTML and CSS, today we will see about the difference between margin and padding CSS properties which allow us to add blank space between the HTML elements, preventing the elements from getting 'stuck' together.

Although both possess similar functions, each has its particularity. 
  1. Padding determines the inner margins, being responsible for determining the distance between the content of a given element and its border.
  2. Margin is applied to the outside of an element affecting how far the element is away from other elements.
For more info, please take a look at the picture below:

padding and margin, css proprieties
Difference between margin and padding

Just as you have the option to define the borders for each side of your HTML elements (eg. borders in 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​​.
These values ​​that you can select include: pixels (px), centimeters (cm), millimeters (mm). em units (em), x-height (ex), inches (in), picas (pc) and point sizes (pt).

By using margin and padding, you should add each value set in the four corners, as follows: top, right, bottom, left and each value must refer to 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 5px 
- right padding is 15px 
- bottom padding is 5px 
- left padding is 15px  

margin: 10px 5px 10px 5px;
- top margin is 10px
- right margin is 5px
- bottom margin is 10px
- left margin is 5px

If you define a single value, the distance applies to all sides, so it will be applied to 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 to do it 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) and 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 the "space" after the border (outside the element = margin) or before the border (inside the element = padding).
Read more »

Add a Custom jQuery Lightbox To Blogger

If you are not satisfied with the default lightbox set up by Blogger, here's another amazing way to show off your images. I have already shown you in one of my previous tutorials how to customize the Blogger lightbox by changing the background color, borders or text color, but this tutorial will show you how to replace it entirely with a really cool jQuery Lightbox plugin that is very popular among bloggers.

What this lightbox does is to display larger versions of the images that will pop up into a larger box when we click on them and lets us to easily navigate through a set of images using the previous and next buttons.

jquery lightbox, blogger plugins

To see a demo of it, please visit this page and click on any image to enlarge.

Adding jQuery Lightbox to Blogger

Step 1. From your Blogger Dashboard, click on Template > Edit HTML 

blogger edit html

Step 2. Click anywhere on the code area and press the CTRL + F keys to open the search box.
Paste the following tag inside the search box and hit Enter to find it:
]]></b:skin>
Step 3. Choose a style from below and just above the ]]></b:skin> tag, paste the CSS code:

Lightbox with white background:

jquery lightbox white
#jquery-overlay{position:absolute;top:0;left:0;z-index:90;width:100%;height:500px;}
#jquery-lightbox{position:absolute;top:10%;left:0;width:100%;z-index:100;text-align:center;line-height:0;}
#jquery-lightbox a,#jquery-lightbox a:hover{border:none;}
#jquery-lightbox a img{border:none;}
#lightbox-container-image-box{position:relative;background-color:#fff;max-width: 960px;max-height: 560px;margin:0 auto;}
#lightbox-container-image{padding:10px;}
img#lightbox-image {max-height: 540px;max-width: 940px;}
#lightbox-loading{position:absolute;top:40%;left:0%;height:25%;width:100%;text-align:center;line-height:0;}
#lightbox-nav{position:absolute;top:0;left:0;height:100%;width: 100%;z-index:10;}
#lightbox-container-image-box > #lightbox-nav{left:0;}
#lightbox-nav a{outline:none;}
#lightbox-nav-btnPrev,#lightbox-nav-btnNext{width:49%;height:100%;zoom:1;display:block;}
#lightbox-nav-btnPrev{left:10%;float:left;}
#lightbox-nav-btnNext{right:10%;float:right;}
#lightbox-container-image-data-box{font:10px Verdana,Helvetica,sans-serif;background-color:#fff;margin:0 auto;line-height:1.4em;overflow:auto;max-width: 940px;;padding:0 10px 0;}
#lightbox-container-image-data{padding:0 10px;color:#555;}
#lightbox-container-image-data #lightbox-image-details{width:70%;float:left;text-align:left;}
#lightbox-image-details-caption{font-weight:bold;}
#lightbox-image-details-currentNumber{display:block;clear:left;padding-bottom:1.0em;}
#lightbox-secNav-btnClose{width:66px;float:right;padding-bottom:0.7em;}
Lightbox with dark background:

jquery lightbox dark
#jquery-overlay{position:absolute;top:0;left:0;z-index:90;width:100%;height:500px;}
#jquery-lightbox{position:absolute;top:10%;left:0;width:100%;z-index:100;text-align:center;line-height:0}
#jquery-lightbox a,#jquery-lightbox a:hover{border:none}
#jquery-lightbox a img{border:none;}
#lightbox-container-image-box{position:relative;background-color:#000;max-width: 960px;max-height: 560px;margin:0 auto}
#lightbox-container-image{padding:10px;}
img#lightbox-image {max-height: 540px;max-width: 940px;}
#lightbox-loading{position:absolute;top:40%;left:0%;height:25%;width:100%;text-align:center;line-height:0}
#lightbox-nav{position:absolute;top:0;left:0;height:100%;width: 100%;z-index:10}
#lightbox-container-image-box > #lightbox-nav{left:0;}
#lightbox-nav a{outline:none}
#lightbox-nav-btnPrev,#lightbox-nav-btnNext{width:49%;height:100%;zoom:1;display:block}
#lightbox-nav-btnPrev{left:10%;float:left}
#lightbox-nav-btnNext{right:10%;float:right}
#lightbox-container-image-data-box{font:10px Verdana,Helvetica,sans-serif;background-color:#000;margin:0 auto;line-height:1.4em;overflow:auto;max-width: 940px;;padding:0 10px 0}
#lightbox-container-image-data{padding:0 10px;color:#fff}
#lightbox-container-image-data #lightbox-image-details{width:70%;float:left;text-align:left}
#lightbox-image-details-caption{font-weight:bold}
#lightbox-image-details-currentNumber{display:block;clear:left;padding-bottom:1.0em}
#lightbox-secNav-btnClose{width:66px;float:right;padding-bottom:0.7em}
Step 4. Now find the </head> tag and just above it, add the following scripts:

Lightbox with white background:
   <script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
    <script src='http://helplogger.googlecode.com/svn/trunk/custom-lightbox-for-blogger.js' type='text/javascript'/>
Lightbox with dark background:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
    <script src='http://helplogger.googlecode.com/svn/trunk/custom-lightbox-for-blogger-black.js' type='text/javascript'/>
Step 5. Click on the Save template button.

Now we need to disable the original Blogger lightbox so that it doesn't interfere with this one that we just added. Go to Settings > Posts and comments and on the right side you will see the "Showcase images with Lightbox" section. Select "No" and click on the Save settings button on the upper right side.

disable blogger lightbox

Now view your blog and click on any image to see the lightbox in action.
Read more »

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 recorded 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.
cookies with javascript, blogger tricks

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 <body>, 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 utilized. 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.
Read more »

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 readers 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 right field, located in the "Add CSS" tab (if you have more options, you may need to scroll down the list). Here you can add any CSS code when 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 Template Designer panel.

It is also important to mention that when adding the CSS styles, it isn't required to put the <style type="text/css"> ... </style> style tags, which normally would go above the </head> tag of the template html. Adding those 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.
Read more »

How to add custom Variable definitions to Blogger

In this post 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.
blogger variable definitions

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

blogger template designer, variable definitions

If the definitions are already established 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 accessing the "Advanced" tab.
In some cases, we can't change the color or font of a particular template if the designer has not implemented the variables in the template and didn't defined and 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.

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.

variable definitions

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" />
color variable type

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 which should be added everytime 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;
}
variable type color, variable definitions

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

blogger template designer

How to Create Variables of type Font:

Now let's say 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" (sidebar-right-1) selector, 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, otherwise it won't work).

variable font type

Now that we have given 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 you will notice that there is a new variable named "Gadgets Title Font" - if you want to change the font type or size, you can do it directly by using this panel.

variable font type advanced

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

apply to blog button

As you work on your template design, you can add lots of variables for different colors and fonts, however, for other types of CSS attributes, there's not necessary to create variables. The other types (such as margin, padding) can be included in the HTML of the template (above ]]></b:skin>) just as they normally would be.
Read more »