Trỏ tên miền: News Pro Blogger Template

Hiển thị các bài đăng có nhãn News Pro Blogger Template. Hiển thị tất cả bài đăng

Thứ Ba, 31 tháng 12, 2013

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.

Right way to embedded direct javascript code to Blogger template

I just usually forgot how to embedded javascript code to my Blogger templates. So I just want to share with you as a short quote and also help me each time I need add Js to a template. This tip always helps me prevent XML error when save template code.

At first, Access your blog dashboard, choose Template. Then click Edit HTML. Not, insert before </head> tag or </body> tag with your javascript wrapper code like below:

<script type='text/javascript'>
//<![CDATA[
// Place your javascript code here
//]]>
</script>

Then click Save template

Blogger host and direct embedded CSS / Javascript comparison

Blogger has no hosting for us to host css and javascript files. So we always find a free or cheap hosting to host our files. But before host them, we must compare the page speed to sure that way we host css / javascript files is faster than the way we embed them direct to our template HTML.

In this comparison, I will use Google Drive as free host for our files. At first, you must know how to upload your css / javascript files to your Google Drive.

Uploading files to Google drive

Of course, you need a Gmail account to login to your Google Drive. After logged in, click Upload button to upload your css / javascript files. In this test, I will upload two files: bloggeritems.com.css (100KB) and bloggeritems.com.js (500K)

After uploaded, you will see Upload Complete window. Click Share link of the file you had just uploaded to show Sharing settings window.

You can also click a file name and then click Share button to show Sharing settings window.

In Sharing settings window, at Who has access, click Change… link of Private – Only the people listed below can access option.

In next window, check to choose Public on the web option, then click Save.

After that, the window will come back the Sharing Settings window that allows you copy Link to share url. We will use this url for next section.

Add uploaded files to template code

Before you can use the link that copied above, you must replace “docs.google.com/file/d” to “googledrive.com/host” and remove “/edit?usp=sharing” in the link. Below is an example:

From this: https://docs.google.com/file/d/0B6J4nBUXfVekel9xZ0JrZ25zT28/edit?usp=sharing

To this: https://googledrive.com/host/0B6J4nBUXfVekel9xZ0JrZ25zT28

Use the replaced link to embedded to your template code.

With css:

<link rel="stylesheet" type="text/css" href="https://googledrive.com/host/0B

With javascript:

<script type="text/javascript" src="https://googledrive.com/host/0B6J4nBUXfVekel9xZ0JrZ25zT28"></script>

Comparing host and direct embedded code speed

After I used PageSpeed Insights to test, the result surprised me. Below is the result when we host 2 files on Google Drive:

PageSpeed Insights Result with hosted files from Google Drive

The below is with direct embedded:

PageSpeed Insights with Direct embedded code

Yes, the result is too different. With hosted files from Google Drive, the speed is only47/100. But if you use direct code embedded to template, the speed will be 84/100, too fast.

We are talking about Google Drive hosting, one of fastest and stable hosting of World, but as you see, the test showed us that the Blogger hosting is better than. So, that’s why I always embedded javascript and css direct in template code, and may be your customers also love that way (many customers used PageSpeed Insights to test my templates, so I must sure they satisfy with result).

Conclusion

Never use Google Drive to host css or javascript files, it’s slow. Just host your files in case you can not embedded it direct in Blogger template code, example: flash, media files, …

Wish you always enjoy your blog as the best way!

Add jQuery to your Blogger/Blogspot blog template

JQuery is the very important thing to make effects, animation and cool functions for your blog. Many Blogger plugins are also using jQuery. Just embed jQuery into our blog template, it will help us save the time to develop and also provide us many option to make beautiful effects on our designs.

A jQuery file is only about 100KB and available to cached, so don’t wory about the speed of your page after embedded it.

To embed jQuery, please access your blog Template and click Edit HTML

Open template editor

Before insert jQuery, you must check that is it alreay installed in your template?Please find “https://ajax.googleapis.com/ajax/libs/jquery” if you found nothing, mean you need to continue, if yes, just stop and do nothing because your template had a jQuery library.

In template Editor window, find the tag </head> and insert before it with the below line:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jq

Then click Save template.

Enable search preferences to begin SEO with Blogger

SEO (search engine optimize) is very important thing with your blog, this point will help your visitor easy know about your blog by searching on Google, Bing, or Yahoo, etc….

It’s lucky when you used Blogger because this platform support very good for SEO. But as default, when you create a blog, it is not set up for SEO, and you need enable it manually.

Access your blog dashboard, choose Settings > Search preferences. In Meta tagssection, click Edit link on Description field.

Enable Blogger search preference

When you see question “Enable search description?“, just choose Yes option and a box will show to help you input your blog description. It’s better if the description is shorter than 150 characters. After done, click Save changes to apply.

Input blog description in search preference

Discovery to success my friends

Enable Search References for Better Blogger SEO

Blogger (Blogspot) upgraded their SEO features, and one of them allows you enable search references for better SEO effect on your blog.

Enable Search References for Blogger

At first, access your blog Settings, and choose Search preferences. At Descriptionoption. If you see [Disabled] mean your blog had not enabled Search Reference. You must click Edit link on this option.

access-to-enable-search-references-blogger

Access Blogger Search References

Then check Yes, and input description for your homepage (maximum 150 characters and better contains your main keywords). When done, click Save Changes.

input-description-to-enable-search-references-blogger

Input Home Page Description for Blogger

Now, the search references function was enabled, so, each time you create a new post, you will see an option called “Search Description” at right sidebar. Before publish new post, please input your post description (snippet) in this option and click Done.

input-description-for-post-after-enable-search-references-blogger

Input Post Description before Publish

Checking Header Code for SEO

Your search references function will not be affected if your header code is not right. So, please make sure your template code before <b:skin> must similar as below:

<b:include data='blog' name='all-head-content'/>
 <title>
  <b:if cond='data:blog.pageType == &quot;index&quot;'>
   <data:blog.pageTitle/>
  <b:else/>
   <b:if cond='data:blog.pageType != &quot;error_page&quot;'>
    <data:blog.pageName/> | <data:blog.title/>
   <b:else/>
    404 | <data:blog.title/> 
   </b:if>
  </b:if>
    </title>
 <b:if cond='data:blog.metaDescription == &quot;&quot;'>
  <meta expr:content='data:blog.pageName + &quot; - &quot; + data:blog.title' name='description'/>
 <b:else/>
  <meta expr:content='data:blog.metaDescription' name='description'/>   
 </b:if>

Thứ Hai, 30 tháng 12, 2013

Installing News Pro Blogger Template

DownLoad Blogger Template

Getting Started - top

Hello, Lets start with installation process for these you need a account on blogger.com where you can create a free blog, In this guide I'm not going to tell you that how you can create a blog on blogger, I assume that you have a blogger account with a blogger blog, so let's get started!

Installing Blogger Template

Follow Below Steps To Install Blogger Template -

On Blogger Dashboard Click

Template

Now Click On Backup/Restore button (Top Right).

Click Choose File button. Find where the NewsPro-theme.xml” file location.

Now Click On Upload Button.

Customizing Menu - top

To customize the drop down menu located above header follow below steps-