Blogal - Free Minimalist WordPress Themes

Blogal is free minimalist WordPress theme which don't requires any type of additional framework, Blogal has very elegant look with lots of advance features, you can customize this theme without touching the code. This theme is based on  _s.

Live Demo Download

Sidebar With in-build Widgets

Advanced 404 Error Page

Key Features

• Free: This theme is totally free you don't need to spend single bucks from your pocket but remember that don't remove our credit link from footer of this theme otherwise it will redirect here.
• 404 Page: Whenever your user will click on some broken link then they will automatically land on 404 error page.
• Background: You can easily change the image in the background, I will suggest you to use some light fonts because header title color is #000.

Steps to design a nice Blogger Template

I created many Blogger template for our community. To day, I just want to share my steps to create a nice Blogger template for sell or for free.

STEPS

1. Get inspirations

I usually visit ThemeForest to find inspiration. Of course, you can go around the web world and feeling with some beautiful websites you visited. You can try to search on Google with your target keywords like: beautiful website, modern web layout, creative web color scheme, .etc.. Just think by yourself.

This can take you 0.5 day

2. Design graphic

I am using Fireworks CS5 to create template files as layout PNG graphic files.

In this step, you also image all features and functions for the template. And your files must contain: Home, Index, Page, Posts, 404, Features List, Mobile.

Please list all your template features in text file, so you can easy test them again in testing step.

This can take you more than 1 day.

3. Prepare Data

Mean you must prepare images for backgroud, icons, buttons, sliders, .etc.. (these images can upload to Picasa).

You also must write post for your testing blog. If the template is free, you can use “Lorem ipsum” text, but if it is premium for selling, please pay attention for your content with beautiful images, videos and funny text.

You can lost more than 0.5 day for this.

4. Make xHTML

I will go from header to footer of Blogger template xml file.

At header, you must take care about title and description tags. Also create some css variable you will use in skin tags with some basic framework (.clear, image, a…) and reset CSS. You must also prepare place to easy insert CSS for IE and jquery library here.

On body, imagine base on your design layout, and create wrapper, inner and sections elements with full properties (showaddelements, maxwidgets) and basic widgets (must have blog, navbar widget) with certain properties (lock=’true’ or ‘false’).

And footer, prepare place to easy add javascript.

I usually use self-hosted CSS and javascript files to design a template, then when finish, i copy their content to embed direct into the template xml code.

This step can take your about 1 day.

5. Create CSS

Now, it’s time to make your template fixed about 80% with your graphic design. Use Chrome with Inspect element function (F12) will help you very much.

You can spend about 1 day here.

6. Create Javascript

This step is for you creating built-in jquery and javascript application of the template likes: json apps, shortcodes, comments, drop-down, pagination, .etc..

This step can take more than 1 day.

7. Stress Test

You must test you you template base on your feature list. Please don’t afraid any errors, just try to test with strongest cases. Less errors, less time to spend for supporting.

You can list your common bugs that you got before on old templates, so you can save the time to think.

This can take your 1 day.

8. Create folders and files to release

You can follow my folder structure or create better one for you.

• main_files: you will compress as: template_name_versionxx.zip and upload
  • xml_files: release_template_versionxx.xml, testing_blog_data.xml
  • help: help.html, help.pdf

Please mind, you must separate the template_working.xml with release_template_versionxx.xml. A working file is for you easy developing, a release file must be the shortest file with compressed CSS, HTML and Javascript.

This can take just some minutes.

9. Create guide document

Yes, this is very important step if you want to sell your template as premium. Please write very clearly and easy navigate sections in your document. It’s better and easy to sell if you record videos for your guides.

You must prepare all images (and videos) before start writing text for your help files. If your template is free, you can combine this step to release step.

This step can take you more than 1 day.

10. Release

Prepare banner (usually 590×300 or 600×300), thumbnail icons (required if premium), screenshots (require if premium). Images for your item description.

If you template is free, the description may be written as help and guides. If premium one, the description is introduction about features, credits, support information and release notes.

You can lost about 0.5 day for this

Conclusion

The time you spend for a nice Blogger template can be at least 7.5 days.

Mean you lost about 60 hours of working. If an hour of your is $5, so the revenue must be $300+.

A nice template of Blogger can sell about 30+ sales, so if you want to earn $300+, the price for each sale must be $10.

But don’t be rushed, must go step by step, if you skip any thing, may be you destroyed your product and sometime must start again.

Wish you will have many best templates for Blogger.

Source : bloggeritems.com

Free Blogger TemplatesNice TemplatesProfessional Blogger TemplatesBlogger Templates 2014Responesive Blospot Templates How to design template for blogspot>bloggerblogspottemplatesSeo Blogger Templatessearch engine optimizationTutorial Blogger Free Blogger TemplatesNice TemplatesProfessional Blogger TemplatesBlogger Templates 2014Responesive Blospot Templates How to design template for blogspot>bloggerblogspottemplatesSeo Blogger Templatessearch engine optimizationTutorial Blogger

Blogger Templates 2014

News Blogger Template

Magazine Templates for blogspot

Google Released Widget of Contact Form for Blogger

This news must break all blogger fans’s hearts. An Official Contact Form for Blogger was released on day ago.
As you know, contact form for Blogger is a weak point of this platform, may be make you confuse before choose it to start a blog. Before this release, we must create an third party contact form for Blogger (common from google docs) and it always make use tired.
But now, all were gone. We are free to make our beautiful and truely contact form for Blogger with real HTML code. Love love love it

Add Contact form for Blogger by widget

Access your blog layout, click Add a Gadget link on any section. When “Add a Gadget” was shown, click More Gadgets, you will see the contact form widget (with yellow email icon) on the top.
Then click on the title “Contact form” (or on Plus button at right hand) to add Contact form for Blogger. May be you will be ask to input title for the gadget, just input one and click Save.

Add widget Contact form for Blogger

Now, turn to your blog home page and watch Contact form for Blogger in display

Contact form for Blogger in action

You can find the HTML code of contact form for Blogger as below, and try to use CSS to make it become more beautiful

<form name="contact-form">
<p></p>Name
<br>
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="">
<p></p>
Email
<span style="font-weight: bolder;">*</span>
<br>
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="">
<p></p>Message
<span style="font-weight: bolder;">*</span>
<br>
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<p></p>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send">
<p></p>
<div style="text-align: center; max-width: 222px; width: 100%">
<p class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></p>
<p class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></p>
</div>
</form>

Contact Form for Blogger on Static Page with CSS only

We knew, Google released Contact Form for Blogger last week. And I received many requests to make a contact form for Blogger on Static page instead widget, because widget is on side bar and it’s not polite to contact or not friendly with visitors who usually contact us from a stand alone page.

Now, I have a workaround solution will help you display contact form for Blogger on static page with css only. I will release many tips to make contact form with js, jquery, but now, please enjoy with CSS first

Step 1: Add contact form gadget

Access your blog Layout. Click on any Add a Gadget link. An Add a Gadget window will be shown, click on More Gadgets, and choose add Contact Form.

Add Contact form for Blogger by gadget

Add contact form for Blogger window

On Configure Contact Form Widget window, click Save button.

Then just save your contact form

After added Contact form gadget, please drag and drop it below Blog Posts gadget, then click Save arrangement button.

Drag and Drop contact gadget under Blog Posts and Save arrangement

Step 2: Hide contact form widget

Access your blog Template, and click Edit HTML. In HTML editor, find

]]></b:skin>

Then, insert before with the code

.widget.ContactForm {
 display: none;
 }

Open template editor and paste the code

Step 3: Make contact page

Access Page, then create a blank page with a name mean “Contact” or any text you want.

Add Contact Page

In page editor, switch to HTML mode and paste the below code into content field

<style type="text/css">
 .widget.ContactForm {
 display: block;
 }
 .post-footer {
 display: none;
 }
 #blog-pager {
 display: none;
 }
 .blog-feeds {
 display: none;
 }
 .widget.ContactForm .title {
 display: none;
 }
 .widget.ContactForm * {
 max-width: 100%;
 }
 </style>

Then Publish the page.

Add code to static page

Now, you can access your new page and enjoy your contact form.

And Contact form for Blogger in action on static page

Contact Form for Blogger Static Page with jQuery

As you know, I posted a tip: Contact form for Blogger on static page with css before, and now, I will show you how to do that tip with jQuery.

What’s advantage of jQuery? Yes, right question. A big advantage of jQuery than CSS is that it allows you place Contact form any where you want. And this tip is base for my futures about Customize Contact form for Blogger.

Step 1: Add jQuery and Contact widget

Please read “Add jQuery to your Blogger blog“. Remember, if you already added the jQuery before, and now, you add it again, your blog will be broken with javascript error, so please check and follow exactly what I wrote in the above link.

Next, please read my Blog post to know how to Add Contact Widget to your blog.

Step 2: Add CSS and Javascript

Please access your blog dashboard, choose Template, then click Edit HTML button. Now, copy and paste the below code before ]]></b:skin>

.ContactForm {
 display: none;
}
.blogger-items-contact .ContactForm {
 display: block;
}
.widget.ContactForm .title {
 display: none;
}
.widget.ContactForm * {
 max-width: 100%;
}

Next, please copy and paste the below code before </body> tag:

<script type='text/javascript'>
//<![CDATA[
$('.ContactForm').appendTo('.blogger-items-contact');
//]]>
</script>

Now, you can click Save template.

Step 3: Add shortcode

Now, you can place below shortcode at any where you want to display contact form:

 <div class="blogger-items-contact"></div>

In this example, I will create a static page. Now, choose Pages menu on your blog dashboard, and click New page and choose Blank page.

Create static page to add Contact form for Blogger

In post editor, switch to HTML mode and paste the above code to content field. Then click Publish.

Contact Form for Blogger shotcode

Result of your contact form may be like below:

Result of Contact Form for Blogger

Floating Contact Form for Blogger

If you don’t want to create static page to insert contact form for Blogger as my tip, or also don’t want to place it at right sidebar. So this tip may be your perfect choice, create a floating box of contact form.

Screen shot

Video demo

How to create it

Add jQuery and Contact Form Gadget

If your blog has no jQuery before, just read my tutorial.
I also wrote an article to help you figure out how to add a Contact Form gadget for your blog. If you did not add one, please read the tutorial.

Add Css and Javascript

Please paste the below code before ]]></b:skin> in your blogger template

/*Floating Contact Form by BloggerItems.com*/
.ContactForm, .ContactForm .title {
 display: none;
}
.floating-ct {
 position: fixed;
 width: 250px;
 right: 0;
 bottom: 0;
 z-index: 999;
}
.floating-ct-head a {
 padding: 5px 10px;
 background: #09f;
 color: white;
 font-weight: bold;
 display: inline-block;
 *display: block;
 zoom: 1;
}
.floating-ct-body {
 height: 285px;
 background: white;
 border: 1px solid #09f;
 padding: 10px;
 display: none;
}
.floating-ct-head {
 text-align: right;
}
.floating-ct-body .ContactForm {
 margin: 0;
 display: block!important;
}

Then paste the below code before </body> tag in your template

<script type='text/javascript'>
//<![CDATA[
/*Floating Contact Form by BloggerItems.com*/
$('body').append('<div class="floating-ct"><div class="floating-ct-head"><a href="#no-move">Contact</a></div><div class="floating-ct-body"></div></div>');
$('.ContactForm').appendTo('.floating-ct-body');
var slide_up_ct = false;
$('.floating-ct-head a').click(function(){
 if (!slide_up_ct) {
 slide_up_ct = true;
 $('.floating-ct-body').slideDown();
 } else {
 slide_up_ct = false;
 $('.floating-ct-body').slideUp();
 }
});
//]]>
</script>

Like and Dislike Rating System for Blogger

Do you like a rating system similar with Youtube for your Blogger / Blogspot website? If yes, you found a right tip. This guide will help you install a like and dislike button for each post on your blog and support share button also.

Screen shots

Like / Dislike and Share button in action

How to install

To install this rating system, please follow below step

Step 1: Install jQuery

You can read “Add jQuery to your Blogger/Blogspot blog template“.

Step 2: Install post hook

Access your dashboard, choose Template then click Edit HTML.
Click into code editor and find <data:post.body/> (Win: Ctrl+F). Then insert after each found result with below code:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
 <div id='bi-tip-rating-2546'/>
 </b:if>

Step 3: Install script

Also in code editor, find </body> and insert before it with below code:

<!-- BI-TIP-2546-START --><style type="text/css">
#bi-tip-rating-2546 {
 margin: 0.5em 0;
 font-size: 12px!important;
}
#bi-tip-rating-2546 * {
 line-height: 1.3em!important;
}
#bi-tip-rating-2546 .button {
 float: left;
 width: 95px;
 overflow: hidden;
 border: 1px solid #C6C6C6;
 filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#fff8f8f8,EndColorStr=#ffeeeeee);
 background-image: -moz-linear-gradient(top,#F8F8F8 0,#EEE 100%);
 background-image: -ms-linear-gradient(top,#F8F8F8 0,#EEE 100%);
 background-image: -o-linear-gradient(top,#F8F8F8 0,#EEE 100%);
 background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#F8F8F8),color-stop(100%,#EEE));
 background-image: -webkit-linear-gradient(top,#F8F8F8 0,#EEE 100%);
 background-image: linear-gradient(to bottom,#F8F8F8 0,#EEE 100%);
 -moz-border-radius: 2px;
 -webkit-border-radius: 2px;
 border-radius: 2px;
 margin: 0 0.5em 0 0;
 padding: 2px 0;
 filter: alpha(opacity=60);
 opacity: 0.6;
}
#bi-tip-rating-2546 .button:hover {
 filter: alpha(opacity=100);
 opacity: 1;
}
#bi-tip-rating-2546 .button iframe {
 height: 20px;
 margin: 1px 0 0 0;
 position: relative;
 z-index: 9999;
}
#bi-tip-rating-2546 .like.button iframe {
 margin-left: -104px;
}
#bi-tip-rating-2546 .dislike.button iframe {
 margin-left: -92px;
}
#bi-tip-rating-2546 .button div.icon {
 background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRCa9QvsTLEfvqyCgChj1P6ZJatL4vG4ltFvEswvgtpjekJbTXkyJIP9Ep47JPlFMr2sBiPq2L7jYt4TizZ8U5EME3OM305Un17rH-z6fXT1Adlq4qie8f3U_Pc1xHuqovobEqOQ5b9kI/s1600/ui-icons.png);
 background-repeat: no-repeat;
 height: 20px;
 width: 20px;
 position: absolute;
 z-index: 1;
}
#bi-tip-rating-2546 .like.button div.icon {
 background-position: -252px -26px;
}
#bi-tip-rating-2546 .dislike.button div.icon {
 background-position: -320px -138px;
}
#bi-tip-rating-2546 .like.button {
 width: 85px;
}
#bi-tip-rating-2546 .share.button {
 width: 50px;
 text-align: center;
 padding: 8px;
 color: black;
 font-weight: bold;
 font-size: 12px;
 line-height: 12px!important;
}
#bi-tip-rating-2546 .button div.label {
 position: absolute;
 margin: 4px 0 0 22px;
 color: black;
 font-size: 12px;
 z-index:1;
}
#bi-tip-rating-2546 .button:active {
 border-color: #C6C6C6;
 background-color: #E9E9E9;
 background-image: none;
 -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);
 -ms-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);
 -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);
 box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);
}
#bi-tip-rating-2546 .share-box {
 margin: 0.5em 0;
 display: none;
}
#bi-tip-rating-2546 input.share-url {
 display:block;
 -moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, .1);
 -ms-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, .1);
 -webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, .1);
 box-shadow: inset 0px 1px 1px rgba(0, 0, 0, .1);
 -webkit-border-radius: 2px;
 -moz-border-radius: 2px;
 border-radius: 2px;
 border: 1px solid #ccc;
 padding: 5px;
 width: 50%;
}
#bi-tip-rating-2546 input.share-url:hover {
 -moz-box-shadow: inset 0px 1px 2px rgba(0,0,0,.15);
 -ms-box-shadow: inset 0px 1px 2px rgba(0,0,0,.15);
 -webkit-box-shadow: inset 0px 1px 2px rgba(0, 0, 0, .15);
 box-shadow: inset 0px 1px 2px rgba(0, 0, 0, .15);
}
#bi-tip-rating-2546 .bi-share-button:hover {
 filter: alpha(opacity=90);
 opacity: 0.9;
}
#bi-tip-rating-2546 .bi-share-button {
 display: block;
 float: left;
 width: 32px;
 height: 32px;
 margin: 1% 3% 0 0;
 background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr2_RH426nMaE9D7IO6qcXO8udBYHSsuUui8LLBv8cCM9skQKB6sAoLF8FaCCPIWZjgdwJeGCdYuPBHRULaHZXyAoxsw-_Asxo94IXVHI_7fGY0koqdJ-1VSiJvPBVwFyC-_JKu2-7TDw/s1600/social-icons.png);
 background-repeat: no-repeat;
}
#bi-tip-rating-2546 .bi-share-facebook {background-position: 0 -652px;}
#bi-tip-rating-2546 .bi-share-twitter {background-position: 0 -1104px;}
#bi-tip-rating-2546 .bi-share-gplus {background-position: 0 -488px;}
#bi-tip-rating-2546 .bi-share-tumblr {background-position: 0 -380px;}
#bi-tip-rating-2546 .bi-share-pinterest {background-position: 0 0;}
#bi-tip-rating-2546 .bi-share-blogger {background-position: 0 -688px;}
#bi-tip-rating-2546 a.copyright-button:hover {
 text-decoration: underline;
}
#bi-tip-rating-2546 a.copyright-button {
 display: block;
 float: left;
 width: 1em;
 height: 1em;
 background: red;
 color: white;
 text-align: center;
 color: white;
 padding: 0.2em;
 font-size: 10px;
 font-weight: bold;
 margin: 3% 0 0 0;
}
</style><!-- bi-tip-2546-easy-guide-01 -->

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

/* ############################################
Like / Dislike rating system plugin for Blogger
Author: Tien Nguyen
Copyright: http://bloggeritems.com
############################################### */
//bi-tip-2546-easy-guide-02 
var default_share_description = 'Love it';//default share description when your site has no one
var default_share_title = 'This is it';//default title share when your site has no one
var text_likes = 'Likes';//text use in "like" button
var text_dislikes = 'Dislikes';//text use in dislike button

var _0xaeb7=["\x32\x20\x6A\x3D\x5A\x2E\x31\x30\x2E\x65\x3B\x79\x3D\x6A\x2E\x31\x64\x28\x27\x23\x27\x29\x3B\x6B\x28\x79\x21\x3D\x2D\x31\x29\x7B\x6A\x3D\x6A\x2E\x31\x63\x28\x30\x2C\x79\x29\x7D\x79\x3D\x6A\x2E\x31\x64\x28\x27\x3F\x27\x29\x3B\x6B\x28\x79\x21\x3D\x2D\x31\x29\x7B\x6A\x3D\x6A\x2E\x31\x63\x28\x30\x2C\x79\x29\x7D\x32\x20\x54\x3D\x27\x27\x3B\x56\x28\x69\x3D\x30\x3B\x69\x3C\x32\x39\x3B\x69\x2B\x2B\x29\x7B\x54\x2B\x3D\x27\x25\x31\x4E\x25\x31\x4F\x27\x7D\x42\x20\x4B\x28\x31\x65\x29\x7B\x36\x3D\x27\x3C\x31\x6D\x20\x31\x50\x3D\x22\x30\x22\x20\x31\x51\x3D\x22\x31\x4D\x22\x20\x31\x4C\x3D\x22\x31\x48\x22\x20\x4E\x3D\x22\x71\x3A\x2F\x2F\x48\x2E\x45\x2E\x6C\x2F\x31\x69\x2D\x31\x49\x2D\x31\x4A\x2E\x67\x3F\x31\x4B\x3D\x25\x31\x52\x27\x2B\x54\x2B\x27\x25\x31\x53\x26\x31\x5A\x3D\x25\x32\x30\x23\x27\x2B\x6A\x2B\x31\x65\x2B\x27\x22\x3E\x3C\x5C\x2F\x31\x6D\x3E\x27\x3B\x32\x31\x20\x36\x7D\x32\x20\x31\x67\x3D\x27\x23\x38\x2D\x4C\x2D\x49\x2D\x4F\x27\x3B\x32\x20\x64\x3D\x24\x28\x27\x64\x27\x29\x2E\x44\x28\x29\x3B\x6B\x28\x28\x64\x3D\x3D\x27\x27\x29\x7C\x7C\x7A\x28\x64\x29\x3D\x3D\x27\x41\x27\x29\x7B\x64\x3D\x24\x28\x27\x32\x33\x27\x29\x2E\x44\x28\x29\x7D\x6B\x28\x28\x64\x3D\x3D\x27\x27\x29\x7C\x7C\x7A\x28\x64\x29\x3D\x3D\x27\x41\x27\x29\x7B\x64\x3D\x31\x59\x7D\x32\x20\x66\x3D\x24\x28\x27\x31\x73\x5B\x31\x72\x3D\x22\x66\x22\x5D\x27\x29\x2E\x43\x28\x27\x31\x6E\x27\x29\x3B\x6B\x28\x66\x3D\x3D\x27\x27\x7C\x7C\x7A\x28\x66\x29\x3D\x3D\x27\x41\x27\x29\x7B\x66\x3D\x24\x28\x27\x31\x73\x5B\x31\x72\x3D\x22\x31\x58\x22\x5D\x27\x29\x2E\x43\x28\x27\x31\x6E\x27\x29\x7D\x6B\x28\x66\x3D\x3D\x27\x27\x7C\x7C\x7A\x28\x66\x29\x3D\x3D\x27\x41\x27\x29\x7B\x66\x3D\x31\x54\x7D\x32\x20\x6D\x3D\x27\x27\x3B\x32\x20\x53\x3D\x30\x3B\x32\x20\x51\x3D\x30\x3B\x24\x28\x27\x31\x55\x27\x29\x2E\x31\x47\x28\x42\x28\x29\x7B\x77\x3D\x24\x28\x78\x29\x2E\x31\x71\x28\x29\x3B\x68\x3D\x24\x28\x78\x29\x2E\x31\x70\x28\x29\x3B\x6B\x28\x6D\x3D\x3D\x27\x27\x29\x7B\x6D\x3D\x3D\x24\x28\x78\x29\x2E\x43\x28\x27\x4E\x27\x29\x7D\x6B\x28\x77\x3E\x3D\x53\x26\x26\x68\x3E\x3D\x51\x29\x7B\x53\x3D\x77\x3B\x51\x3D\x68\x3B\x6D\x3D\x3D\x24\x28\x78\x29\x2E\x43\x28\x27\x4E\x27\x29\x7D\x7D\x29\x3B\x6B\x28\x6D\x3D\x3D\x27\x27\x7C\x7C\x7A\x28\x6D\x29\x3D\x3D\x27\x41\x27\x29\x7B\x6D\x3D\x27\x71\x3A\x2F\x2F\x27\x2B\x5A\x2E\x31\x30\x2E\x31\x57\x2B\x27\x2F\x32\x34\x2E\x31\x7A\x27\x7D\x32\x20\x6F\x3D\x47\x28\x6A\x29\x3B\x32\x20\x73\x3D\x47\x28\x64\x29\x3B\x32\x20\x31\x78\x3D\x47\x28\x66\x29\x3B\x32\x20\x50\x3D\x47\x28\x6D\x29\x3B\x32\x20\x59\x3D\x27\x71\x3A\x2F\x2F\x48\x2E\x58\x2E\x6C\x2F\x31\x74\x2F\x31\x74\x2E\x31\x41\x3F\x75\x3D\x27\x2B\x6F\x3B\x32\x20\x31\x32\x3D\x27\x31\x62\x3A\x2F\x2F\x57\x2E\x6C\x2F\x31\x79\x2F\x31\x42\x3F\x46\x3D\x27\x2B\x6F\x2B\x27\x26\x44\x3D\x27\x2B\x73\x3B\x32\x20\x31\x33\x3D\x27\x31\x62\x3A\x2F\x2F\x31\x43\x2E\x31\x45\x2E\x6C\x2F\x75\x2F\x30\x2F\x34\x3F\x46\x3D\x27\x2B\x6F\x3B\x32\x20\x31\x36\x3D\x27\x71\x3A\x2F\x2F\x48\x2E\x31\x37\x2E\x6C\x2F\x34\x3F\x76\x3D\x33\x26\x74\x3D\x27\x2B\x73\x2B\x27\x26\x75\x3D\x27\x2B\x6F\x3B\x32\x20\x31\x34\x3D\x27\x71\x3A\x2F\x2F\x31\x35\x2E\x6C\x2F\x31\x44\x2F\x31\x46\x2F\x31\x56\x2F\x3F\x46\x3D\x27\x2B\x6F\x2B\x27\x26\x64\x3D\x27\x2B\x73\x2B\x27\x26\x66\x3D\x27\x2B\x31\x78\x2B\x27\x26\x32\x65\x3D\x27\x2B\x50\x3B\x32\x20\x31\x38\x3D\x27\x71\x3A\x2F\x2F\x48\x2E\x45\x2E\x6C\x2F\x31\x69\x2D\x78\x2E\x67\x3F\x6E\x3D\x27\x2B\x73\x2B\x27\x26\x62\x3D\x25\x32\x45\x2B\x65\x25\x32\x46\x25\x32\x32\x27\x2B\x6F\x2B\x27\x25\x32\x32\x2B\x25\x31\x75\x27\x2B\x73\x2B\x27\x25\x32\x47\x25\x32\x44\x25\x31\x75\x26\x32\x43\x3D\x27\x2B\x50\x3B\x32\x20\x36\x3D\x27\x27\x3B\x36\x2B\x3D\x27\x3C\x35\x20\x37\x3D\x22\x52\x20\x63\x22\x3E\x3C\x35\x20\x37\x3D\x22\x31\x31\x22\x3E\x3C\x2F\x35\x3E\x3C\x35\x20\x37\x3D\x22\x31\x76\x22\x3E\x27\x2B\x32\x7A\x2B\x27\x3C\x2F\x35\x3E\x27\x2B\x4B\x28\x27\x32\x41\x27\x29\x2B\x27\x3C\x2F\x35\x3E\x27\x3B\x36\x2B\x3D\x27\x3C\x35\x20\x37\x3D\x22\x55\x20\x63\x22\x3E\x3C\x35\x20\x37\x3D\x22\x31\x31\x22\x3E\x3C\x2F\x35\x3E\x3C\x35\x20\x37\x3D\x22\x31\x76\x22\x3E\x27\x2B\x32\x49\x2B\x27\x3C\x2F\x35\x3E\x27\x2B\x4B\x28\x27\x32\x42\x27\x29\x2B\x27\x3C\x2F\x35\x3E\x27\x3B\x36\x2B\x3D\x27\x3C\x61\x20\x37\x3D\x22\x34\x20\x63\x22\x20\x65\x3D\x22\x23\x32\x48\x22\x3E\x32\x35\x3C\x2F\x61\x3E\x27\x3B\x36\x2B\x3D\x27\x3C\x35\x20\x4A\x3D\x22\x31\x68\x3A\x31\x6A\x3B\x4D\x3A\x31\x6B\x3B\x22\x3E\x3C\x2F\x35\x3E\x3C\x35\x20\x37\x3D\x22\x34\x2D\x31\x61\x22\x3E\x27\x3B\x36\x2B\x3D\x27\x3C\x32\x4D\x20\x37\x3D\x22\x34\x2D\x46\x22\x20\x32\x4F\x3D\x22\x27\x2B\x6A\x2B\x27\x22\x2F\x3E\x27\x3B\x36\x2B\x3D\x27\x3C\x61\x20\x70\x3D\x22\x72\x22\x20\x37\x3D\x22\x38\x2D\x34\x2D\x58\x20\x38\x2D\x34\x2D\x63\x22\x20\x65\x3D\x22\x27\x2B\x59\x2B\x27\x22\x3E\x3C\x2F\x61\x3E\x27\x3B\x36\x2B\x3D\x27\x3C\x61\x20\x70\x3D\x22\x72\x22\x20\x37\x3D\x22\x38\x2D\x34\x2D\x57\x20\x38\x2D\x34\x2D\x63\x22\x20\x65\x3D\x22\x27\x2B\x31\x32\x2B\x27\x22\x3E\x3C\x2F\x61\x3E\x27\x3B\x36\x2B\x3D\x27\x3C\x61\x20\x70\x3D\x22\x72\x22\x20\x37\x3D\x22\x38\x2D\x34\x2D\x32\x50\x20\x38\x2D\x34\x2D\x63\x22\x20\x65\x3D\x22\x27\x2B\x31\x33\x2B\x27\x22\x3E\x3C\x2F\x61\x3E\x27\x3B\x36\x2B\x3D\x27\x3C\x61\x20\x70\x3D\x22\x72\x22\x20\x37\x3D\x22\x38\x2D\x34\x2D\x31\x37\x20\x38\x2D\x34\x2D\x63\x22\x20\x65\x3D\x22\x27\x2B\x31\x36\x2B\x27\x22\x3E\x3C\x2F\x61\x3E\x27\x3B\x36\x2B\x3D\x27\x3C\x61\x20\x70\x3D\x22\x72\x22\x20\x37\x3D\x22\x38\x2D\x34\x2D\x31\x35\x20\x38\x2D\x34\x2D\x63\x22\x20\x65\x3D\x22\x27\x2B\x31\x34\x2B\x27\x22\x3E\x3C\x2F\x61\x3E\x27\x3B\x36\x2B\x3D\x27\x3C\x61\x20\x70\x3D\x22\x72\x22\x20\x37\x3D\x22\x38\x2D\x34\x2D\x45\x20\x38\x2D\x34\x2D\x63\x22\x20\x65\x3D\x22\x27\x2B\x31\x38\x2B\x27\x22\x3E\x3C\x2F\x61\x3E\x27\x3B\x36\x2B\x3D\x27\x3C\x61\x20\x70\x3D\x22\x72\x22\x20\x37\x3D\x22\x32\x4E\x2D\x63\x22\x20\x65\x3D\x22\x71\x3A\x2F\x2F\x32\x4A\x2E\x6C\x2F\x32\x4B\x2F\x52\x2D\x32\x4C\x2D\x55\x2D\x49\x2D\x32\x78\x2D\x56\x2D\x45\x22\x20\x4A\x3D\x22\x32\x66\x3A\x20\x32\x79\x21\x39\x3B\x4D\x3A\x20\x32\x67\x21\x39\x3B\x31\x71\x3A\x20\x31\x6F\x21\x39\x3B\x31\x70\x3A\x20\x31\x6F\x21\x39\x3B\x32\x68\x3A\x20\x32\x69\x21\x39\x3B\x31\x77\x3A\x20\x31\x39\x21\x39\x3B\x44\x2D\x32\x64\x3A\x20\x32\x63\x21\x39\x3B\x31\x77\x3A\x20\x31\x39\x21\x39\x3B\x32\x37\x3A\x20\x30\x2E\x32\x36\x21\x39\x3B\x31\x6C\x2D\x32\x38\x3A\x20\x32\x61\x21\x39\x3B\x31\x6C\x2D\x32\x62\x3A\x20\x32\x6A\x21\x39\x3B\x32\x6B\x3A\x20\x33\x25\x20\x30\x20\x30\x20\x30\x3B\x32\x74\x3A\x20\x32\x73\x28\x31\x66\x3D\x32\x75\x29\x21\x39\x3B\x31\x66\x3A\x20\x31\x21\x39\x3B\x32\x76\x3A\x32\x77\x21\x39\x3B\x32\x72\x3A\x32\x71\x21\x39\x22\x20\x64\x3D\x22\x32\x6D\x20\x32\x6C\x20\x52\x20\x78\x3F\x22\x3E\x3F\x3C\x2F\x61\x3E\x27\x3B\x36\x2B\x3D\x27\x3C\x35\x20\x4A\x3D\x22\x31\x68\x3A\x31\x6A\x3B\x4D\x3A\x31\x6B\x3B\x22\x3E\x3C\x2F\x35\x3E\x3C\x2F\x35\x3E\x27\x3B\x24\x28\x31\x67\x29\x2E\x36\x28\x36\x29\x3B\x24\x28\x27\x23\x38\x2D\x4C\x2D\x49\x2D\x4F\x20\x2E\x34\x2E\x63\x27\x29\x2E\x32\x6E\x28\x42\x28\x29\x7B\x24\x28\x27\x23\x38\x2D\x4C\x2D\x49\x2D\x4F\x20\x2E\x34\x2D\x31\x61\x27\x29\x2E\x32\x6F\x28\x27\x32\x70\x27\x2C\x42\x28\x29\x7B\x7D\x29\x7D\x29\x3B","\x7C","\x73\x70\x6C\x69\x74","\x7C\x7C\x76\x61\x72\x7C\x7C\x73\x68\x61\x72\x65\x7C\x64\x69\x76\x7C\x68\x74\x6D\x6C\x7C\x63\x6C\x61\x73\x73\x7C\x62\x69\x7C\x69\x6D\x70\x6F\x72\x74\x61\x6E\x74\x7C\x7C\x7C\x62\x75\x74\x74\x6F\x6E\x7C\x74\x69\x74\x6C\x65\x7C\x68\x72\x65\x66\x7C\x64\x65\x73\x63\x72\x69\x70\x74\x69\x6F\x6E\x7C\x7C\x7C\x7C\x6E\x61\x6B\x65\x5F\x75\x72\x6C\x7C\x69\x66\x7C\x63\x6F\x6D\x7C\x6D\x65\x64\x69\x61\x5F\x75\x72\x6C\x7C\x7C\x65\x6E\x63\x6F\x64\x65\x5F\x75\x72\x6C\x7C\x74\x61\x72\x67\x65\x74\x7C\x68\x74\x74\x70\x7C\x5F\x62\x6C\x61\x6E\x6B\x7C\x65\x6E\x63\x6F\x64\x65\x5F\x74\x69\x74\x6C\x65\x7C\x7C\x7C\x7C\x7C\x74\x68\x69\x73\x7C\x69\x6E\x64\x65\x78\x7C\x74\x79\x70\x65\x6F\x66\x7C\x75\x6E\x64\x65\x66\x69\x6E\x65\x64\x7C\x66\x75\x6E\x63\x74\x69\x6F\x6E\x7C\x61\x74\x74\x72\x7C\x74\x65\x78\x74\x7C\x62\x6C\x6F\x67\x67\x65\x72\x7C\x75\x72\x6C\x7C\x65\x6E\x63\x6F\x64\x65\x55\x52\x49\x43\x6F\x6D\x70\x6F\x6E\x65\x6E\x74\x7C\x77\x77\x77\x7C\x72\x61\x74\x69\x6E\x67\x7C\x73\x74\x79\x6C\x65\x7C\x72\x61\x74\x65\x5F\x69\x74\x65\x6D\x5F\x68\x74\x6D\x6C\x7C\x74\x69\x70\x7C\x66\x6C\x6F\x61\x74\x7C\x73\x72\x63\x7C\x32\x35\x34\x36\x7C\x65\x6E\x63\x6F\x64\x65\x5F\x6D\x65\x64\x69\x61\x5F\x75\x72\x6C\x7C\x63\x68\x7C\x6C\x69\x6B\x65\x7C\x63\x77\x7C\x6C\x61\x62\x65\x6C\x5F\x73\x70\x61\x63\x65\x7C\x64\x69\x73\x6C\x69\x6B\x65\x7C\x66\x6F\x72\x7C\x74\x77\x69\x74\x74\x65\x72\x7C\x66\x61\x63\x65\x62\x6F\x6F\x6B\x7C\x73\x6C\x5F\x66\x61\x63\x65\x62\x6F\x6F\x6B\x7C\x77\x69\x6E\x64\x6F\x77\x7C\x6C\x6F\x63\x61\x74\x69\x6F\x6E\x7C\x69\x63\x6F\x6E\x7C\x73\x6C\x5F\x74\x77\x69\x74\x74\x65\x72\x7C\x73\x6C\x5F\x67\x70\x6C\x75\x73\x7C\x73\x6C\x5F\x70\x69\x6E\x74\x65\x72\x65\x73\x74\x7C\x70\x69\x6E\x74\x65\x72\x65\x73\x74\x7C\x73\x6C\x5F\x74\x75\x6D\x62\x6C\x72\x7C\x74\x75\x6D\x62\x6C\x72\x7C\x73\x6C\x5F\x62\x6C\x6F\x67\x67\x65\x72\x7C\x77\x68\x69\x74\x65\x7C\x62\x6F\x78\x7C\x68\x74\x74\x70\x73\x7C\x73\x75\x62\x73\x74\x72\x69\x6E\x67\x7C\x69\x6E\x64\x65\x78\x4F\x66\x7C\x6D\x65\x74\x68\x6F\x64\x7C\x6F\x70\x61\x63\x69\x74\x79\x7C\x68\x6F\x6C\x64\x65\x72\x7C\x63\x6C\x65\x61\x72\x7C\x62\x6C\x6F\x67\x7C\x62\x6F\x74\x68\x7C\x6E\x6F\x6E\x65\x7C\x66\x6F\x6E\x74\x7C\x69\x66\x72\x61\x6D\x65\x7C\x63\x6F\x6E\x74\x65\x6E\x74\x7C\x31\x65\x6D\x7C\x68\x65\x69\x67\x68\x74\x7C\x77\x69\x64\x74\x68\x7C\x6E\x61\x6D\x65\x7C\x6D\x65\x74\x61\x7C\x73\x68\x61\x72\x65\x72\x7C\x33\x45\x7C\x6C\x61\x62\x65\x6C\x7C\x63\x6F\x6C\x6F\x72\x7C\x65\x6E\x63\x6F\x64\x65\x5F\x64\x65\x73\x63\x72\x69\x70\x74\x69\x6F\x6E\x7C\x69\x6E\x74\x65\x6E\x74\x7C\x69\x63\x6F\x7C\x70\x68\x70\x7C\x74\x77\x65\x65\x74\x7C\x70\x6C\x75\x73\x7C\x70\x69\x6E\x7C\x67\x6F\x6F\x67\x6C\x65\x7C\x63\x72\x65\x61\x74\x65\x7C\x65\x61\x63\x68\x7C\x6E\x6F\x7C\x70\x6F\x73\x74\x7C\x72\x65\x61\x63\x74\x69\x6F\x6E\x73\x7C\x6F\x70\x74\x69\x6F\x6E\x73\x7C\x73\x63\x72\x6F\x6C\x6C\x69\x6E\x67\x7C\x74\x72\x75\x65\x7C\x32\x36\x6E\x62\x73\x70\x7C\x33\x42\x7C\x66\x72\x61\x6D\x65\x62\x6F\x72\x64\x65\x72\x7C\x61\x6C\x6C\x6F\x77\x74\x72\x61\x6E\x73\x70\x61\x72\x65\x6E\x63\x79\x7C\x35\x42\x61\x7C\x35\x44\x7C\x64\x65\x66\x61\x75\x6C\x74\x5F\x73\x68\x61\x72\x65\x5F\x64\x65\x73\x63\x72\x69\x70\x74\x69\x6F\x6E\x7C\x69\x6D\x67\x7C\x62\x6F\x6F\x6B\x6D\x61\x72\x6B\x6C\x65\x74\x7C\x68\x6F\x73\x74\x6E\x61\x6D\x65\x7C\x44\x65\x73\x63\x72\x69\x70\x74\x69\x6F\x6E\x7C\x64\x65\x66\x61\x75\x6C\x74\x5F\x73\x68\x61\x72\x65\x5F\x74\x69\x74\x6C\x65\x7C\x74\x65\x78\x74\x43\x6F\x6C\x6F\x72\x7C\x32\x33\x30\x30\x30\x30\x30\x30\x7C\x72\x65\x74\x75\x72\x6E\x7C\x7C\x68\x31\x7C\x66\x61\x76\x69\x63\x6F\x6E\x7C\x53\x68\x61\x72\x65\x7C\x32\x65\x6D\x7C\x70\x61\x64\x64\x69\x6E\x67\x7C\x73\x69\x7A\x65\x7C\x7C\x31\x30\x70\x78\x7C\x77\x65\x69\x67\x68\x74\x7C\x63\x65\x6E\x74\x65\x72\x7C\x61\x6C\x69\x67\x6E\x7C\x6D\x65\x64\x69\x61\x7C\x64\x69\x73\x70\x6C\x61\x79\x7C\x6C\x65\x66\x74\x7C\x62\x61\x63\x6B\x67\x72\x6F\x75\x6E\x64\x7C\x72\x65\x64\x7C\x62\x6F\x6C\x64\x7C\x6D\x61\x72\x67\x69\x6E\x7C\x6F\x6E\x65\x7C\x57\x61\x6E\x74\x7C\x63\x6C\x69\x63\x6B\x7C\x74\x6F\x67\x67\x6C\x65\x7C\x66\x61\x73\x74\x7C\x73\x74\x61\x74\x69\x63\x7C\x70\x6F\x73\x69\x74\x69\x6F\x6E\x7C\x61\x6C\x70\x68\x61\x7C\x66\x69\x6C\x74\x65\x72\x7C\x31\x30\x30\x7C\x76\x69\x73\x69\x62\x69\x6C\x69\x74\x79\x7C\x76\x69\x73\x69\x62\x6C\x65\x7C\x73\x79\x73\x74\x65\x6D\x7C\x62\x6C\x6F\x63\x6B\x7C\x74\x65\x78\x74\x5F\x6C\x69\x6B\x65\x73\x7C\x30\x32\x30\x31\x7C\x30\x32\x30\x32\x7C\x65\x75\x72\x6C\x7C\x32\x46\x61\x7C\x33\x43\x61\x7C\x33\x44\x7C\x33\x43\x7C\x73\x68\x61\x72\x65\x74\x68\x69\x73\x7C\x74\x65\x78\x74\x5F\x64\x69\x73\x6C\x69\x6B\x65\x73\x7C\x62\x6C\x6F\x67\x67\x65\x72\x69\x74\x65\x6D\x73\x7C\x74\x69\x70\x73\x7C\x61\x6E\x64\x7C\x69\x6E\x70\x75\x74\x7C\x63\x6F\x70\x79\x72\x69\x67\x68\x74\x7C\x76\x61\x6C\x75\x65\x7C\x67\x70\x6C\x75\x73","","\x66\x72\x6F\x6D\x43\x68\x61\x72\x43\x6F\x64\x65","\x72\x65\x70\x6C\x61\x63\x65","\x5C\x77\x2B","\x5C\x62","\x67"];eval(function (_0x9c61x1,_0x9c61x2,_0x9c61x3,_0x9c61x4,_0x9c61x5,_0x9c61x6){_0x9c61x5=function (_0x9c61x3){return (_0x9c61x3<_0x9c61x2?_0xaeb7[4]:_0x9c61x5(parseInt(_0x9c61x3/_0x9c61x2)))+((_0x9c61x3=_0x9c61x3%_0x9c61x2)>35?String[_0xaeb7[5]](_0x9c61x3+29):_0x9c61x3.toString(36));} ;if(!_0xaeb7[4][_0xaeb7[6]](/^/,String)){while(_0x9c61x3--){_0x9c61x6[_0x9c61x5(_0x9c61x3)]=_0x9c61x4[_0x9c61x3]||_0x9c61x5(_0x9c61x3);} ;_0x9c61x4=[function (_0x9c61x5){return _0x9c61x6[_0x9c61x5];} ];_0x9c61x5=function (){return _0xaeb7[7];} ;_0x9c61x3=1;} ;while(_0x9c61x3--){if(_0x9c61x4[_0x9c61x3]){_0x9c61x1=_0x9c61x1[_0xaeb7[6]]( new RegExp(_0xaeb7[8]+_0x9c61x5(_0x9c61x3)+_0xaeb7[8],_0xaeb7[9]),_0x9c61x4[_0x9c61x3]);} ;} ;return _0x9c61x1;} (_0xaeb7[0],62,176,_0xaeb7[3][_0xaeb7[2]](_0xaeb7[1]),0,{}));
//]]>
</script><!-- BI-TIP-2546-END -->

Video guide

Blogger Global Layout Data Tags Codex

I usually create many templates for Blogger Items. I write this tip to help myself save the time each time need to find a right data tag. Hope also help you.

List of Global Layout Data Tags

Blog Title

<data:blog.pageTitle/>

This tag will show your Blog Title. You can change value of this tag by access: Settings/ Basic / click Edit link on Title field, type the title you want and click Save changes.

Page name

<data:blog.pageName/>

This tag will show your Page Title, in general, it’s your post title or page title you typed when publish.

Page type

<data:blog.pageType/>

This tag will show the type of current page. This tag has below values

• index - mean the current page is home, label or search page.
• static_page – mean the current page is a static page
• item – mean the current page is a post.
• archive – mean the current page is time archive page
• error_page – mean the current page is 404 page.

Blog Description

<data:blog.metaDescription/>

This tag will show the description of your blog if the current page is home page, or show the description of post if its type is static_page or item
To change the description for home page, access Settings / Search preferences. one Meta tags section, click Edit link on Description field, check Yes at Enable search description? option. Then input your blog description and click Save changes.
To input the description for your post, before publish a post, look on right side, you will see Search Description option, click and input the snippet for the post.

BLOG URL

<data:blog.url/>

This tag will show the canonical URL of the current page. Canonical is current URI of the page without extend paramenters. Example: http://bloggeritems.com?id=100 => canonical URL = http://bloggeritems.com

Home URL

<data:blog.homepageUrl/>

This tag will show the home URL of your blog.

Blog encode

<data:blog.encoding/>

This tag will show the encoding that’s using in your blog, common is “UTF-8″.
LANGUAGE DIRECTION

<data:blog.languageDirection/>

This tag will show either “ltr” or “rtl” for left-to-right and right-to-left languages, respectively. This tag value will change base on the language that you set up for your blog.

Feed links

<data:blog.feedLinks/>

This tag is only effect on header of page (before </head> tag). The result of this code will like below:

<link rel="alternate" type="application/atom+xml" title="Blogger Items - Atom" href="http://bloggeritems.com/feeds/posts/default" />
<link rel="alternate" type="application/rss+xml" title="Blogger Items - RSS" href="http://bloggeritems.com/feeds/posts/default?alt=rss" />
<link rel="service.post" type="application/atom+xml" title="Blogger Items - Atom" href="http://www.blogger.com/feeds/5248366312679450270/posts/default" />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www.blogger.com/rsd.g?blogID=5248366312679450270" />

Usage

Global Layout Data tags are xml codes that’re available to use in all place in a Blogger template code.
You can you a tag as direct out to HTML code:

<data:blog.pageTitle/>

Or use in if condition like this

<b:if cond="data:blog.pageType == &quot;index&quot;>Your stuff of code here</b:if>

Or use as an attribute of HTML element with expr: before the attribute name

<body exrp:class='data:blog.pageType'>

Note: the preview page will work similar as homepage URL but has type is item.