All in One SEO Pack 2013 for blogspot

All in One SEO Pack 2013 for blogspot



Hướng dẫn: đây là thu thuat blogspot giúp bạn SEO tốt hơn

Tìm trong template đoạn mã:
<head>
có dạng như thế này:

<head> <b:include data='blog' name='all-head-content'/> <b:if cond='data:blog.pageType == &quot;index&quot;'> <title><data:blog.pageTitle/></title> ....................... ....................... <b:skin><![CDATA[/*


và thay thế nó bằng đoạn mã dưới đây:
<pre>

<head>
<b:include data='blog' name='all-head-content'/> <b:if cond='data:blog.pageTitle == data:blog.title'> <title><data:blog.pageTitle/></title> <b:else/> <title><data:blog.pageName/> | <data:blog.title/></title> </b:if> <!-- / All In One Seo Pack by http://thegioixanh123.blogspot.com/ --> <b:if cond='data:blog.metaDescription != &quot;&quot;'> <meta expr:content='data:blog.metaDescription' name='description'/> <meta expr:content='data:blog.pageName' name='description'/> </b:if> <b:if cond='data:blog.pageType == &quot;archive&quot;'> <meta content='noindex, nofollow' name='robots'/> <b:else/> <b:if cond='data:blog.pageType == &quot;index&quot;'> <b:if cond='data:blog.url == data:blog.homepageUrl'> <meta expr:content='data:blog.metaDescription' name='keywords'/> <meta content='index, follow' name='robots'/> </b:if> <b:else/> <b:if cond='data:blog.pageTitle != data:blog.title'> <meta expr:content='data:blog.metaDescription' name='keywords'/> </b:if></b:if> <!-- / All In One Seo by http://thegioixanh123.blogspot.com/ --> <meta content='index, follow' name='robots'/> <meta content='global' name='distribution'/> <meta content='6 days' name='revisit'/> <meta content='6 days' name='revisit-after'/> <meta content='document' name='resource-type'/> <meta content='all' name='audience'/> <meta content='general' name='rating'/> <meta content='all' name='robots'/> <meta content='vi-vn' name='language'/> <meta content='VietNam' name='country'/> <link href='https://plus.google.com/ID/about' rel='author'/> <link href='https://plus.google.com/ID/posts' rel='publisher'/></b:if> <!-- / All In One Seo Pack Blogger SEO Plugin by http://thegioixanh123.blogspot.com/ -->
<b:skin><![CDATA[/*

Thay ID Google + bằng ID của bạn (VD: https://plus.google.com/u/0/104149727327910691320/about), chèn link Blog vào phần giới thiệu của bạn trên G+.
Kiểm tra kết quả ở đây: http://www.google.com/webmasters/tools/richsnippets
Lưu Templates

Tiện ích "Bài viết liên quan" theo nhãn có hiệu ứng mô tả khi rê chuột cho blogger

Nhân dịp thay đổi themes cho Thủ thuật blog, xin giới thiệu với các bạn một số thủ thuật mà mình đã chọn lọc để áp dụng cho blog này.
Trước tiên là thủ thuật tạo tiện ích bài viết liên quan cho blogspot, liệt kê theo từng nhãn và có hiệu ứng mô tả chi tiết khi rê chuột đến link bài viết, được hướng dẫn bởi Thủ thuật blog.

Bạn có thể xem trước hiệu ứng như hình dưới hoặc ngay trên blog này.
bai viet lien quan


Trình tự công việc như sau:
1 - Đăng nhập Blogger, vào Template → Edit HTML → Proceed → Expand Widget Templates.

2 - Tìm đến đoạn mã </head> và chèn đoạn code dưới đây vào ngay trước nó:
<style type='text/css'>    
.mota-desc{     
position: relative;     
z-index: 0;     
text-decoration:none;     
}     
.mota-desc:hover{     
background-color: transparent;     
z-index: 50;     
}     
.mota-desc span{     
position: absolute;     
background-color: #ffffff;     
padding: 5px;     
left: -1000px;     
border: 1px solid #666;     
visibility: hidden;     
color: black;     
text-decoration: none;     
}     
.mota-desc span img{     
border-width: 0;     
padding: 2px;     
}     
.mota-desc:hover span{     
padding:5px;     
visibility: visible;     
top: 20px;     
left:70px;     
width:250px;     
background:#ddd;     
text-align: justify;     
}     
#related-posts {     
padding-top:40px;     
}     
#related-posts a {     
text-decoration : none;     
}     
#related-posts a:hover {     
text-decoration : none;     
}     
</style>     
<script language='JavaScript'>     
imgr = new Array();     
imgr[0] = &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjh9MxulMYeR0smhzB1PhAlinky0F6WM2I6AU4zUsl-HCQaGTFQ3qWEX7FLJa9iC-Dbm5cygl8MQSb1ho2wgTyKkSlOyOrKJ857Cmrwo65Dl9KwNr_RAy4NTvvuB0ibtxRSh8t6IrmvSSk/s218/cuAnhcuEm_Logo_3D_218px.png&quot;;    
showRandomImg = true;     
imgwidth = 60;     
imgheight = 60;     
fntsize = 12;     
acolor = &quot;#555&quot;;     
aBold = true;     
motacolor = &quot;#f00&quot;;     
text = &quot;Nhận xét&quot;;     
showPostDate = true;     
summaryPost = 150;     
summaryFontsize = 12;     
summaryColor = &quot;#000&quot;;     
icon2 = &quot; &#187; &quot;;     
numposts = 5;     
home_page = &quot;http://thu-thuatblog.blogspot.com&quot;;    
</script>     
<script type='text/javascript'>     
//<![CDATA[     
function removeHtmlTag(strx,chop){     
    var s = strx.split("<");     
    for(var i=0;i<s.length;i++){     
        if(s[i].indexOf(">")!=-1){     
            s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);     
        }     
    }     
    s =  s.join("");     
    s = s.substring(0,chop-1);     
    return s;     
}     
function showrelatedposts(json) {     
    j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;     
    img  = new Array();     
      for (var i = 0; i < numposts; i++) {     
        var entry = json.feed.entry[i];     
        var posttitle = entry.title.$t;     
        var pcm;     
        var posturl;     
        if (i == json.feed.entry.length) break;     
        for (var k = 0; k < entry.link.length; k++) {     
              if (entry.link[k].rel == 'alternate') {     
                posturl = entry.link[k].href;     
                break;     
              }     
        }     
        for (var k = 0; k < entry.link.length; k++) {     
              if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {     
                pcm = entry.link[k].title.split(" ")[0];     
                break;     
              }     
        }     
        if ("content" in entry) {     
              var postcontent = entry.content.$t;}     
        else     
        if ("summary" in entry) {     
              var postcontent = entry.summary.$t;}     
        else var postcontent = "";     
        postdate = entry.published.$t;     
    if(j>imgr.length-1) j=0;     
    img[i] = imgr[j];     
   
 s = postcontent    ; a = s.indexOf("<img"); b = 
s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
     
    if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;     
    cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';     
    var month = [1,2,3,4,5,6,7,8,9,10,11,12];     
    var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];     
    var day = postdate.split("-")[2].substring(0,2);     
    var m = postdate.split("-")[1];     
    var y = postdate.split("-")[0];     
    for(var u2=0;u2<month.length;u2++){     
        if(parseInt(m)==month[u2]) {     
            m = month2[u2] ; break;     
        }     
    }     
   
 var daystr = (showPostDate) ? '<i><font color="'+acolor+'">
 - ('+day+ ' ' + m + ' ' + y + ')</font></i>' : "";     
posttitle = (aBold) ? "<b>"+posttitle+"</b>" : posttitle;     
   
 var trtd = '<img 
src="http://farm3.static.flickr.com/2426/3638176588_31366a6822_o.gif"/>
 <a class="mota-desc" href="'+posturl+'" style="color:'+acolor+'; 
font-size:'+fntsize+'px;">'+posttitle+'<span><div 
style="color:'+motacolor+';">'+posttitle+' </div>'+cmtext+ ' ' +
 daystr + ' <br/><img src="'+img[i]+'" style="float:left; 
border: #ccc 1px solid; padding:2px; margin-right:4px;" 
width="'+imgwidth+'" 
height="'+imgheight+'"/>'+icon2+removeHtmlTag(postcontent,summaryPost)+'...</span></a>
 <br/>';     
    document.write(trtd);     
    j++;     
}     
}     
//]]>     
</script>

Trong đoạn code này, lưu ý:
imgwidth = 60; , imgheight = 60; : kích thước ảnh thumbnail sẽ hiển thị trong phần mô tả
fntsize = 12; : size chữ của tiêu đề bài viết
acolor = "#555"; : màu của tiêu đề bài viết
motacolor = "#f00"; : màu của tiêu đề bài viết trong phần mô tả
summaryPost = 150; : số kí tự hiển thị trong phần mô tả bài viết
summaryFontsize = 12; : size chữ của phần mô tả
summaryColor = "#000"; : màu chữ của phần mô tả
numposts = 5; : số bài viết sẽ hiển thị trong list các bài liên quan của mỗi nhãn. Chú ý: giá trị này phải chỉnh bằng với giá trị max-results=5 ở bước 3.
home_page = "http://thu-thuatblog.blogspot.com"; : thay bằng địa chỉ URL của blog bạn

3 - Tiếp tục tìm đoạn code: <data:post.body/>. Nếu có nhiều hơn 1 code như thế thì chọn cái thứ nhất để chèn đoạn code dưới đây ngay sau nó:
<b:if cond='data:blog.pageType == &quot;item&quot;'>    
<div id='related-posts'>     
<font face='Arial' size='3'><b>Bài viết liên quan : </b></font><br/>     
<b:loop values='data:post.labels' var='label'><b>Thư mục : </b><font color='#FF0000'><data:label.name/></font><br/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>     
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?max-results=5&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrelatedposts&quot;'
 type='text/javascript'/>     
</b:if>     
</b:loop>     
</div>     
</b:if>

Tạo Slideshow bài viết mới nhất ngoài trang chủ Blogspot

Chúng ta thường thấy ngoài trang chủ các template blogspot hay có những slide bài viết đẹp và được trang trí với một thanh trượt nhằm mục đích làm đẹp và mượt blog.
 Hôm nay Thế giới xanh giới thiệu một dạng slide khá phổ biến mà các bạn thường thấy


Bắt đầu tiến hành thủ thuật (Nếu bạn nào chưa rành về blogspot thì nên Sao lưu template trước khi tiến hành thủ thuật)

Bước 1: 
  1. Đăng nhập vào blogger với tài khoản của bạn
  2. Sau đó nhấp vào Layout> Edit HTML, chọn kiểm tra mở rộng mẫu tiện ích con
  3. Đặt mã code sau đây trên ]]></b:skin>
 #featured{margin-bottom:8px}
.sliderwrapper{position: relative;overflow: hidden;height: 240px}
.sliderwrapper .contentdiv{visibility: hidden;position: absolute;left: 0;top: 0;padding: 0px;height: 100%;}
.pagination{text-align: left;padding:8px 0px}
.pagination a{font-size:11px;color:#fff;padding: 3px 6px;background:#1b75d6}
.pagination a:hover, .pagination a.selected{color:#dedde5;background-color:#535352}
.featuredPost{width:360px;padding:10px 10px 0;background:#191919;filter:alpha(opacity=75);-moz-opacity:.75;opacity:.75;color:#dedde5;position:absolute;bottom:0}
.featuredPost a{color:#fff}
.featuredPost a:hover{color:#dedde5}
.featuredPost h2{margin:0;font-size:12px;line-height:1}
.featuredPost span{font-size:10px}
.featuredPost p{font-size:11px}

Bước 2: Đặt mã code sau đây trên </head>
<script>
//<![CDATA[
/* Script from: http://www.share123.vn */
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG5xkbK7AgXLLNvU5P19S9FwfofWC-CUmuhstvw5W7QTNqnbqGWiQwd7YVPA9H-eeLDgqIXT5a6nfB0q_af1PLN6aL31Fo26b28CMA1mB59AQ7owFSMe0qhPMXHbslo7x3mSg4suItvtU/s1600/no+image.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 100;

numposts1 = 5;
label1 = "misteri";

function removeHtmlTag(strx,chop){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}s=s.join("");s=s.substring(0,chop-1);return s}

function showrecentposts1(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i<numposts1;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split("")[0];break}}

if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
postdate = entry.published.$t;
if(j>imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;

var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["January","February","March","April","May","Juny","July","August","September","October","November","December"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break;
}}

var daystr = day+ ' ' + m + ' ' + y ;
var trtd = '<div class="contentdiv"><div class="sliderPostPhoto"><a href="'+posturl+'"><img width="370" height="240" class="alignnone" src="'+img[i]+'"/></a><div class="sliderPostInfo"></div></div><div class="featuredPost"><h2><a href="'+posturl+'">'+posttitle+'</a></h2><span>'+daystr+'</span><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div></div>';
document.write(trtd);
j++;
}}
//]]>
</script>

Trong label1 = "misteri"; thay nhãn misteri bằng nhãn của bạn

mã code img width = "370" height = "240" là các thanh trượt chiều rộng và chiều cao, điều chỉnh mẫu của bạn.

Bước 3: Đặt mã code sau đây trên </body>
<script src='http://dl.dropbox.com/u/12924430/contentslider.js'/>
<script>
//<![CDATA[
featuredcontentslider.init({
id: "slider1", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "#increment", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["Previous", "Next"], //labels for "prev" and "next" links. Set to "" to hide.
enablefade: [true, 0.5], //[true/false, fadedegree]
autorotate: [true, 6000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})
//]]>
</script>

Bước 4: Bước cuối cùng, mà là để gọi thanh trượt để nó xuất hiện trên trang đầu của id='main-wrapper'> <div tìm kiếm của bạn nếu bạn muốn có một thanh trượt xuất hiện trên wrapper chính như trong bản demo , và đặt đoạn code sau vào phía dưới:
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div id='featured'>
<div class='sliderwrapper' id='slider1'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/&quot;+label1+&quot;?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</div>
<div class='pagination' id='paginate-slider1'>
</div>
</div>
</b:if>

Bước 5: Bước cuối cùng Save / lưu mẫu, tạo ra thanh trượt hình ảnh dựa trên một danh mục cụ thể được hoàn tất.

Tạo Auto Readmore cho Blogger với Cutter.js

Khác với các thủ thuật auto readmore từ trước đến nay, Cutter.js giúp ta giữ lại được các thẻ HTML như in đậm, in nghiêng, màu chữ...
Tạo Auto Readmore
Cách đây mấy tháng thì tôi có đọc bài giới thiệu về thư viện Cutter.js ở hỗn tạp blog, nhận thấy nó khá là thú vị. 
Thế là vào một ngày Chủ nhật rãnh rỗi mới thử áp dụng Cutter.js trên Blogger, kết quả thu được là một thủ thuật tạo readmore tự động mới, bèn đăng lên đây để mọi người tham khảo.


Đầu tiên, bạn vào phần chỉnh sửa HTML của template, chọn mở rộng mẫu rồi chèn đoạn sau phía trên </head> :
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<style type='text/css'>
.post-body img { display:block; float:left; margin-right: 10px; width:100px; height:100px }
</style>
<script src='http://noctsvn.googlecode.com/svn/trunk/cutter.js'/>
</b:if>

Tiếp tục tìm đến đoạn <data:post.body/> và thay thế nó bằng đoạn sau:
<div class='post-body'>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<span expr:id='data:post.id'><data:post.body/></span>
<script type='text/javascript'>
var snippet = document.getElementById(&quot;<data:post.id/>&quot;);
Cutter.run(snippet, snippet, 40);
</script>
<b:else/><data:post.body/></b:if>
<div class='clear'/>
<b:if cond='data:post.hasJumpLink'>
<a class='jump-link' expr:href='data:post.url + &quot;#more&quot;'>Read More</a><b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<a class='jump-link' expr:href='data:post.url' rel='nofollow'>Read More</a>
</b:if></b:if>
</div>

Lưu lại và kiểm tra kết quả, bạn có thể thay đổi các giá trị như số kí tự (40) hoặc kích thước ảnh đại diện (100x100). Theo cơ chế hoạt động của Cutter.js thì nó sẽ cắt 40 kí tự đầu tiên trong bài đăng để hiển thị ra trang chủ và dĩ nhiên là giữ nguyên định dạng HTML. 
Cũng vì vậy nên nếu không có ảnh nào được chèn giữa 40 kí tự này thì sẽ không có ảnh thumbnail, bạn cần lưu ý điều này và nên đặt một tấm ảnh lên trên cùng của bài đăng để làm ảnh đại diện ở trang chủ.

Tệp Cutter.js trong bài này đã được lược bỏ một số thứ không cần thiết cho gọn bớt (4kb), bạn có thể upload sang host khác hoặc chèn thẳng vào template.

Top 21+ web cung cấp miễn phí Template Blogspot tốt nhất

Dưới đây là những website cung cấp Template(mẫu) Blogger/Blogspot đẹp,chất lượng nhất.

1. Premium Blogger Templates

Teamplate blogspotBlogger Templates từ Premium Blogger Templates.com. Một nơi tốt nhất để tải về miễn phí những mẫu blogger đẹp cho các blogspotter.Mẫu của chúng tôi cung cấp cho blog của bạn một cái nhìn chuyên nghiệp và độc đáo.



2. BTemplates

BTemplatesBlogger Templates từ BTemplates.com. 1 nơi cung cấp lớn nhất các mẫu blogger được phân loại theo từng chuyên mục

3. Blog Template 4u

Blog Template 4uBlogger Templates từ BlogTemplate4u.com. Blogger Templates: thư viện cung cấp hàng ngàn mẫu Blogger.

4. Zoom Template

Zoom TemplateBlogger Templates từ ZoomTemplate.com. Zoom Template Gallery là cách đơn giản và dễ dàng để tìm thấy nhiều Template Blogger miễn phí và  Wordpress Themes miễn phí.

5. Deluxe Templates

Deluxe TemplatesBlogger Templates từ DeluxeTemplates.net. Bộ sưu tầm các mẫu Blogger đơn giản và đẹp.

6. Best Theme

Best ThemeBlogger Templates từ BestTheme.net. Có thể tìm thấy bộ sưu tập những mẫu Blogger đẹp ở đây.

7. Blogger Themes

Blogger ThemesBlogger Templates từ BloggerThemes.net. 1 trang web chỉ cung cấp duy nhất những mẫu Blogger.

8. Blogcrowds

BlogcrowdsBlogger Templates từ Blogcrowds.com. Một bộ sư tập mẫu Blogger khác đơn giản mà đẹp.

9. Themecraft

ThemecraftBlogger Templates từ ThemeCraft.Net.

10. Blogger Templates Free

Blogger Templates FreeBlogger Templates từ BloggerTemplatesFree.com.

11. AllBlogTools

AllBlogToolsBlogger Templates từ AllBlogTools.com.

12. Blogger Styles


Blogger StylesBlogger Templates từ BloggerStyles.com.

13. Blogger Template Place

Blogger Template PlaceBlogger Templates từ BloggerTemplatePlace.com.

14. Blogger Theme

Blogger ThemeBlogger Templates từ BloggerTheme.Net.

15. Dhe Template

Dhe TemplateBlogger Templates từ DheTemplate.com.

16. Templates Block

Templates BlockBlogger Templates từ TemplatesBlock.com

17. AnshulDudeja.com

AnshulDudeja.comBlogger Templates từ AnshulDudeja.com.

18. Our Blogger Templates

Our Blogger TemplatesBlogger Templates từ OurBloggerTemplates.com.

19. Chicablogger

ChicabloggerBlogger Templates từ Chicablogger.com.

20. Buy My Themes

Buy My ThemesBlogger Templates từ BuyMyThemes.com.

21. Splashy Templates

Splashy TemplatesBlogger Templates từ SplashyTemplates.com.




 CHÚC CÁC BẠN LỰA CHỌN ĐƯỢC TEMPLATE PHÙ HỢP NHẤT !

Hướng dẫn Cách tạo popup like Facebook khi vào Blog, website

Khi các bạn vào 1 số trang web hay Blog hay thấy có những hộp box Like Fan book (giống Demo) bật popup ra . Cách này đã được nhiều bạn share trên mạng. Hôm nay share123.vn tổng hợp và chia sẻ lại các bạn một cách làm cho blogspot nhanh hơn và dễ tùy chỉnh hơn.
Cách tạo popup like Facebook khi vào Blog, website

Như mọi khi, nó là widget dựa trên jQuery, và blog của bạn phải có plugin jQuery. nếu blog của bạn đã có một plugin jQuery mới nhất, thì bỏ qua bước này và thực hiện theo các bước thứ hai.
Nếu blog của bạn chưa có thư viện JQuery thì thêm đoạn mã dưới đây trước thẻ </head> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></ script>

Tùy chỉnh các cài đặt của bạn như bạn cần
Click vào nút "Generate" ( Tạo tiện ích),
Click vào nút "Preview" (Xem trước )
Cuối cùng nhấn vào "Thêm vào Blogger" nút để thêm widget này vào blog của bạn ...

Sau khi Add widget các bạn có thể vào chỉnh sửa code, hoặc bạn nào muốn nhanh hơn thì có thể làm như sau:
Đăng nhập Blogger => Bố cục => Thêm tiện ích => Thêm widget HTML/Javascript => paste đoạn code bên dưới và thay Link Fanpage facebook của các bạn vào chỗ http://facebook.com/thegioixanh123 là dc<!--popup box like Facebook - up by http://facebook.com/thegioixanh123-->
   <div style='position: fixed; left: 0%; top: 0%;'>
<style type='text/css'>
#makingdifferentpopup{

border:10px solid rgba(82, 82, 82, 0.7);
-webkit-background-clip: padding-box; /* for Safari */
background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
-webkit-border-radius:8px 8px 8px 8px;
-moz-border-radius:8px 8px 8px 8px;
border-radius:8px 8px 8px 8px;
width:300px;
height:360px;
overflow:hidden;
}
#makingdifferentpopup span{
font-size:20px !important;
font-weight:bold !important;
}
#makingdifferentpopup h1{
background:#6d84b4 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2gD0ISqeDdjInfmO9m2e-32jP7uIR3X0U77IByopTXPQDTTlLfMdh1sy92MPiPltWFhG6Z6iMz1MXZPWlOPlO9kI_xxmjLnFB2yiRMlpRrSnG5WSpaf_JnF3jaHIJz6IkwcTds2BGfDM6/s1600/%255Bwww.gj37765.blogspot.com%255Dh1.png) 98% no-repeat;
border:1px solid #3b5998 !important;
color:#FFFFFF !important;
font-size:20px !important;
font-weight:700 !important;
padding:5px !important;
margin:0 !important;
font-family:&#39;&quot;lucida grande&quot;,tahoma,verdana,arial,sans-serif !important;
overflow:hidden !important;
}
.htmlarea{
font-size:12px !important;
font-weight:normal !important;
height:265px !important;
padding:1px !important;
background:#fff !important;
border-bottom:2px solid #ddd;
overflow:hidden !important;
}
#mdfooter{
text-align:left;
background:#F2F2F2 !important;
height:56px !important;
padding:10px 10px 10px 10px !important;
overflow:hidden !important;
}
#mdclose{
float:right;
background-color:#eee !important;
border:1px solid #ccc !important;
color:#111 !important;
font-weight:bold !important;
padding:5px 8px 5px 8px !important;
text-decoration:none !important;
display:inline-block !important;
font-family:&#39;&quot;lucida grande&quot;,tahoma,verdana,arial,sans-serif !important;
outline:none !important;
position:relative !important;
font-size:18px !important;
margin:1px !important;
}
#mdclose:active{
top:1px;
left:1px;
}
.grabthis{
bottom:80px;
font:8px &quot;lucida grande&quot;,tahoma,verdana,arial,sans-serif;
position:absolute;
right:6px;
text-align:right;
z-index: 99999;
}
.grabthis a{
color: #000;
text-decoration:none;
}
.grabthis a:hover{
text-decoration:underline;
}
</style>
<script type='text/javascript'>
jQuery(document).ready(function() {
function makingdifferent_ppopup()  {
var sec = 10
var timer = setInterval(function() {
   $(&quot;#mdfooter span&quot;).text(sec--);
   if (sec == 0) {
      $(&quot;#makingdifferentpopup&quot;).fadeOut(&quot;slow&quot;);
      clearInterval(timer);
   }
},1000);
  var mdwh = jQuery(window).height();
  var mdpph = jQuery(&quot;#makingdifferentpopup&quot;).height();
  var mdfromTop = jQuery(window).scrollTop()+50;
 jQuery(&quot;#makingdifferentpopup&quot;).css({&quot;top&quot;:mdfromTop});}
jQuery(window).fadeIn(makingdifferent_ppopup).resize(makingdifferent_ppopup)
 //alert(jQuery.cookie(&#39;sreqshown&#39;));
 //var mdww = jQuery(window).width();
 //var mdppw = jQuery(&quot;#makingdifferentpopup&quot;).width();
 //var mdleftm = (mdww-mdppw)/2;
   var mdleftm = 500;
 //var mdwh = jQuery(window).height();
 //var mdpph = jQuery(&quot;#makingdifferentpopup&quot;).height();
 //var mdfromTop = (jQuery(window).scrollTop()+mdwh-mdpph) / 2;
 jQuery(&quot;#makingdifferentpopup&quot;).animate({opacity: &quot;1&quot;, left: &quot;0&quot; , left:  mdleftm}, 0).show();
     jQuery(&quot;#mdclose&quot;).click(function() {
jQuery(&quot;#makingdifferentpopup&quot;).animate({opacity: &quot;0&quot;, left: &quot;-5000000&quot;}, 1000).show();});});
</script>
<div id='makingdifferentpopup'>
<h1>Like Fan Page Share123.vn</h1>
<div class='htmlarea'>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=https://facebook.com/thegioixanh123&amp;width=300&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23fff&amp;stream=false&amp;header=false&amp;height=250' style='border:none; overflow:hidden; width:300px; height:250px;'/>

</div>
<div id='mdfooter'>
Please wait..<span>10</span> Seconds
<a href='#' id='mdclose' onclick='return false;'>Close</a>
</div>
</div>
<!-- End popup -->
   </div>
 
Ở đây mình thêm đoạn :
<div style='position: fixed; left: 0%; top: 0%;'>Các bạn tùy chỉnh thông số cho phù hợp với vị trí bạn muốn hiển thị

Add trực tiếp vào Blog của bạn: 

Sau Khi add các bạn nhớ sửa Fanpage: http://facebook.com/thegioixanh123 thành FanPage facebook của các bạn nhé.

Đánh số thứ tự cho comment blogspot

Thread Comment cơ bản đã là trực quan, tuy nhiên một số bạn còn muốn thêm đánh số thứ tự cho nhận xét tạo sự khác biệt. Việc đánh số thứ tự cho nhận xét giúp chỉ đích danh nhận xét đó và bài viết này sẽ giúp bạn làm điều đó. Đánh số theo comment có quy luật:

Số thứ tự được ghi theo thời gian nhận xét, có nghĩa nhận xét nào có trước sẽ được đánh số trước, nhận xét nào có sau sẽ được đánh số sau.
Vì Thread Comment không sắp xếp theo thời gian nhận xét nên đương nhiên số thứ tự nhận xét cũng không xuất hiện tăng dần.


Bước 1: Thêm đoạn mã dưới đây vào trước thẻ ]]></b:skin> trong template của bạn.
.comments-number{position:absolute;top:55px;left:-44px;border-radius:10px;background:#d80556;width:20px;height:20px;font-size:10px;line-height:2em;color:#fff;text-align:center}
.comments .comment-thread.inline-thread .comments-number{top:44px;left:-38px}

Bước 2: Thay thế đoạn mã (function() { trong template của bạn bằng đoạn mã dưới đây:

 var items_copy=[];
(function() {

Bước 3: Thay thế đoạn mã var items = <data:post.commentJso/>; trong template của bạn bằng đoạn mã dưới đây: 

var items = <data:post.commentJso/>;
items_copy=items;

Bước 4: Thêm đoạn mã dưới đây vào sau thẻ <data:post.commentHtml/> trong template của bạn.

<script type='text/javascript'>
//<![CDATA[
for(i=0;i<items_copy.length;i++){a=document.getElementById('c'+items_copy[i].id);b=a.innerHTML+'<span class="comments-number">'+(i+1)+'</span>';a.innerHTML=b}
//]]>
</script>

Số thứ tự nhận xét có thể khiến khung nhận xét của bạn trở nên rối mắt, hãy cân nhắc trước khi sử dụng.