2016

Thứ Sáu, 19 tháng 8, 2016

Làm sao để tạo button "Back to Top" cho Blogspot

By : mrtienhp97

Thứ Sáu, tháng 8 19, 2016 widget blogger

Button "Back to Top" sẽ rất hữu ích với blog của bạn. Thay vì phải rê chuôt nhiều lần, button này giúp người đọc dễ dàng di chuyền lên đầu trang một cách nhanh chóng.

Nếu bạn vẫn chưa biết cách tạo button "Back to Top" cho Blogspot thì bài viết này là dành cho bạn

Tạo button "Back to Top" cho Blogspot

Bước 1 : Thêm đoạn code dưới đây vào phía dưới <head>

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

Bước 2 : Tạo một Widget HTML/Javascript mới trong Bố cục và điền đoạn code dưới đây vào. Hoặc bạn cũng có thể chèn đoạn code này vào bất kì vị trí nào bạn muốn.

<a href="#" class="backtotop"><i class="fa fa-angle-up"></i></a>
<script>
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.backtotop).fadeIn(duration);
} else {
jQuery('.backtotop').fadeOut(duration);
}
});

jQuery('.backtotop').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>

Bước 3 : Thêm đoạn code dưới đây vào phía trên ]]></b:skin>

.backtotop {
z-index: 5;
width: 50px;
height: 50px;
font-size: 25px;
line-height: 50px;
-o-border-radius: 4px;
-ms-border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
position: fixed;
bottom: 10px;
right: 10px;
cursor: pointer;
background: #00A4E4;
text-align: center;
color: #FFF;
}
.backtotop i {
color:#FFF:
}
.backtotop:hover {
background: #464646;
color: #FFF;
}

các bạn có thể thay #00A4E4 bằng mã màu các bạn thích

Kết quả :

Chúc các bạn thành công

Thứ Hai, 13 tháng 6, 2016

Hướng dẫn các tạo phân trang có đánh số cho Blogger

By : mrtienhp97

Thứ Hai, tháng 6 13, 2016 widget blogger

Mặc định, Blogger cũng có tính năng phân trang bài viết đó là button Bài đăng cũ hơn và Bài đăng mới hơn. Song, mẫu phân trang mặc định của Blogger có vẻ không thân thiện với người dùng cho lắm, đặc biệt là với các Blog có số lượng bài viết lớn .Trong bài viết này, mình sẽ hướng dẫn các bạn tạo phân trang có đánh số cho Blogger. Đây là một trong những widget khá phổ biến, được sử dụng ở rất nhiều Blog, nó giúp bạn đọc có thể di chuyển giữa các trang một cách dễ dàng hơn

Bước 1 : Chèn đoạn code dưới đây vào trên thẻ đóng </body>

<script style='text/javascript'>
var postperpage=7;
var numshowpage=3;
var upPageWord="Prev";
var downPageWord="Next";
var home_page="/";
var urlactivepage=location.href;
</script>
<script style='text/javascript'/>
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('7 L;7 j;7 h;7 v;1A();H 1z(1d){7 6=\'\';M=K(12/2);5(M==12-M){12=M*2+1}C=h-M;5(C<1)C=1;e=K(1d/m)+1;5(e-1==1d/m)e=e-1;D=C+12-1;5(D>e)D=e;6+="<4 9=\'1M\'>1L "+h+\' 1Y \'+e+"</4>";7 17=K(h)-1;5(h>1){5(h==2){5(j=="u"){6+=\'<4 9="1Z"><a b="\'+B+\'">\'+S+\'</a></4>\'}c{6+=\'<4 9="g"><a b="/r/s/\'+v+\'?&d-l=\'+m+\'">\'+S+\'</a></4>\'}}c{5(j=="u"){6+=\'<4 9="g"><a b="#" y="N(\'+17+\');x w">\'+S+\'</a></4>\'}c{6+=\'<4 9="g"><a b="#" y="O(\'+17+\');x w">\'+S+\'</a></4>\'}}}5(C>1){5(j=="u"){6+=\'<4 9="g"><a b="\'+B+\'">1</a></4>\'}c{6+=\'<4 9="g"><a b="/r/s/\'+v+\'?&d-l=\'+m+\'">1</a></4>\'}}5(C>2){6+=\' ... \'}1s(7 k=C;k<=D;k++){5(h==k){6+=\'<4 9="24">\'+k+\'</4>\'}c 5(k==1){5(j=="u"){6+=\'<4 9="g"><a b="\'+B+\'">1</a></4>\'}c{6+=\'<4 9="g"><a b="/r/s/\'+v+\'?&d-l=\'+m+\'">1</a></4>\'}}c{5(j=="u"){6+=\'<4 9="g"><a b="#" y="N(\'+k+\');x w">\'+k+\'</a></4>\'}c{6+=\'<4 9="g"><a b="#" y="O(\'+k+\');x w">\'+k+\'</a></4>\'}}}5(D<e-1){6+=\'...\'}5(D<e){5(j=="u"){6+=\'<4 9="g"><a b="#" y="N(\'+e+\');x w">\'+e+\'</a></4>\'}c{6+=\'<4 9="g"><a b="#" y="O(\'+e+\');x w">\'+e+\'</a></4>\'}}7 16=K(h)+1;5(h<e){5(j=="u"){6+=\'<4 9="g"><a b="#" y="N(\'+16+\');x w">\'+1l+\'</a></4>\'}c{6+=\'<4 9="g"><a b="#" y="O(\'+16+\');x w">\'+1l+\'</a></4>\'}}6+=\'<1q><a b="1n://1O.1K.1m" 1R="1Q 1S" 1D="1E-1F: 1I; 1G: 1H; 1N: 2d;" 28="27"><1o 26="0" J="1n://2a.2b.1m/1o/2f.2e" 1T="3" 2c="3" /></a></1q>\';7 E=z.1W("E");7 18=z.1V("1U-1X");1s(7 p=0;p<E.Q;p++){E[p].1i=6}5(E&&E.Q>0){6=\'\'}5(18){18.1i=6}}H 1f(X){7 Y=X.Y;7 1C=K(Y.22$21.$t,10);1z(1C)}H 1A(){7 i=o;5(i.f("/r/s/")!=-1){5(i.f("?V-d")!=-1){v=i.I(i.f("/r/s/")+14,i.f("?V-d"))}c{v=i.I(i.f("/r/s/")+14,i.f("?&d"))}}5(i.f("?q=")==-1&&i.f(".6")==-1){5(i.f("/r/s/")==-1){j="u";5(o.f("#G=")!=-1){h=o.I(o.f("#G=")+8,o.Q)}c{h=1}z.1p("<n J=\\""+B+"P/R/U?d-l=1&13=15-Z-n&T=1f\\"><\\/n>")}c{j="s";5(i.f("&d-l=")==-1){m=20}5(o.f("#G=")!=-1){h=o.I(o.f("#G=")+8,o.Q)}c{h=1}z.1p(\'<n J="\'+B+\'P/R/U/-/\'+v+\'?13=15-Z-n&T=1f&d-l=1" ><\\/n>\')}}}H N(F){11=(F-1)*m;L=F;7 W=z.1r(\'1g\')[0];7 A=z.1w(\'n\');A.1t=\'1v/1u\';A.1y("J",B+"P/R/U?1B-1j="+11+"&d-l=1&13=15-Z-n&T=1e");W.1h(A)}H O(F){11=(F-1)*m;L=F;7 W=z.1r(\'1g\')[0];7 A=z.1w(\'n\');A.1t=\'1v/1u\';A.1y("J",B+"P/R/U/-/"+v+"?1B-1j="+11+"&d-l=1&13=15-Z-n&T=1e");W.1h(A)}H 1e(X){1c=X.Y.25[0];7 1x=1c.1k.$t.I(0,19)+1c.1k.$t.I(23,29);7 1a=1P(1x);5(j=="u"){7 1b="/r?V-d="+1a+"&d-l="+m+"#G="+L}c{7 1b="/r/s/"+v+"?V-d="+1a+"&d-l="+m+"#G="+L}1J.b=1b}',62,140,'||||span|if|html|var||class||href|else|max|maksimal|indexOf|showpageNum|nomerhal|thisUrl|jenis|jj|results|postperpage|script|urlactivepage|||search|label||page|lblname1|false|return|onclick|document|newInclude|home_page|mulai|akhir|pageArea|numberpage|PageNo|function|substring|src|parseInt|nopage|nomerkiri|redirectpage|redirectlabel|feeds|length|posts|upPageWord|callback|summary|updated|nBody|root|feed|in||jsonstart|numshowpage|alt||json|nextnomer|prevnomer|blogPager||timestamp|alamat|post|banyakdata|finddatepost|hitungtotaldata|head|appendChild|innerHTML|index|published|downPageWord|com|http|img|write|div|getElementsByTagName|for|type|javascript|text|createElement|timestamp1|setAttribute|loophalaman|halamanblogger|start|totaldata|style|font|size|float|right|7pt|location|blogspot|Page|showpageOf|padding|24work|encodeURIComponent|Blogger|title|Templates|width|blog|getElementById|getElementsByName|pager|of|showpage||totalResults|openSearch||showpagePoint|entry|border|_blank|target||img1|blogblog|height|2px|gif|blank'.split('|'),0,{}))
</script>

trong đó

var postperpage : Số bài viết trên một trang
var numshowpage : Số trang sẽ hiển thị
var upPageWord : Kí tự trở về trang trước
var downPageWord : Kí tự sang trang sau

Bước 2 : Thêm đoạn code dưới đây vào phía dưới <head>

<link href='https://fonts.googleapis.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css'/>

Chúng ta sẽ thêm đoạn code trên vì mình sẽ sử dụng font Roboto trong mẫu này. Nếu các bạn muốn sử dụng font chữ mặc định của giao diện thì không cần thêm

Bước 3 : Chèn đoạn code sau vào phía trên ]]></b:skin>. Các bạn có thể chọn một trong các mẫu sau để sử dụng cho Blog

.blog-pager,#blog-pager{display:inline-block;margin:0;overflow:inherit;color:#fff;height:40px;font-family:Roboto;border:1px solid #CED9EE;border-right:none;color:#617083}
#blog-pager a,.showpagePoint,.showpageOf{text-decoration:none;display:block;padding:0 18px;color:#55A8FD}
.showpageOf,.showpagePoint,.showpageNum,.showpage{line-height:40px;float:left;font-size:14px;border-right:1px solid #CED9EE}

.blog-pager,#blog-pager{display:inline-block;margin:0;overflow:inherit;color:#fff;height:30px;font-family:Roboto}
#blog-pager a,.showpagePoint,.showpageOf{color:#fff;text-decoration:none;display:block;padding:0 18px}
.showpageOf,.showpagePoint,.showpageNum,.showpage{line-height:30px;float:left;background-color:#ea5745;margin-right:10px;border-radius:2px;font-size:14px;-webkit-transition:all .2s;-moz-transition:all .2s;transition:all .2s}
.showpagePoint:hover,.showpageNum:hover,.showpage:hover{background-color:#ed8477;-moz-box-shadow:inset 0 0 1px #ea5745;-webkit-box-shadow:inset 0 0 1px #ea5745;box-shadow:inset 0 0 1px #ea5745}

.blog-pager,#blog-pager{display:inline-block;margin:0;overflow:inherit;color:#fff;height:30px;font-family:Roboto}
#blog-pager a,.showpagePoint,.showpageOf{color:#fff;text-decoration:none;display:block;padding:0 18px}
.showpageOf,.showpagePoint,.showpageNum,.showpage{line-height:30px;display:inline-block;background:#A1D0DD;margin-right:10px;border-radius:4px;-webkit-box-shadow:0 4px 0 #7FAFBC;-moz-box-shadow:0 4px 0 #7FAFBC;box-shadow:0 4px 0 #7FAFBC;font-size:14px;-webkit-transition:all .2s;-moz-transition:all .2s;transition:all .2s}
.showpagePoint:hover,.showpageNum:hover,.showpage:hover{position:relative;top:2px;-webkit-box-shadow:0 2px 0 #7FAFBC;-moz-box-shadow:0 2px 0 #7FAFBC;box-shadow:0 2px 0 #7FAFBC}

Chúc các bạn thành công.

Chủ Nhật, 5 tháng 6, 2016

Hướng dẫn cách SEO cho Blogspot toàn tập ( Cập nhật )

By : mrtienhp97

Chủ Nhật, tháng 6 05, 2016 blogger seo

Ngày nay, khi mà có vô số những website, blog được tạo mới mỗi ngày thì việc đạt thứ hạng cao trên các công cụ tìm kiếm là khá khó khăn. Mình xin nhấn mạnh là khá khó khăn chứ không phải không thể. Nếu bạn biết tối ưu hóa Blog của mình một cách đúng đắn, hiệu quả thì hoàn toàn có thể đạt được thứ hạng như bạn mong muốn

Trong bài viết này, mình xin hướng dẫn một cách cơ bản nhất và tương đối đầy đủ để ngay cả các bạn mới cũng có thể làm SEO cho Blogspot

SEO là gì ? SEO để làm gì ?

SEO là tập hợp những phương pháp nhằm nâng cao vị trí của website trên công cụ tìm kiếm. Người làm SEO phải tối ưu hóa website của mình thân thiện nhất có thể với các công cụ tìm kiếm.

SEO giúp chúng ta tăng lượt truy cập vào website thông qua từ khóa được tìm kiếm. Đồng thời, SEO giúp cho người dùng dễ dàng tiếp cận đến website của bạn hơn. Nếu SEO tốt, bạn hoàn toàn có thể tiết kiếm được một khoản không nhỏ tiền quảng cáo, từ đó làm tăng thêm thu nhập

Bạn đã sẵn sàng chưa ? Chúng ta bắt đầu nhé

1. SEO Onpage

SEO Onpage là quá trình cài đặt, tối ưu hóa các yếu tố trên Blog thân thiện với bộ máy tìm kiếm. Đây là một công việc cực kì quan trọng nếu như các bạn muốn phát triển Blog của mình. Dưới đây, mình sẽ cung cấp một số yếu tố các bạn cần lưu ý trong quá trình SEO Onpage cho Blogger, bên cạnh đó mình sẽ cung cấp một số hướng dẫn để các bạn tối ưu hóa thêm cho Blog của mình

Title Tag

Title Tag chính là phần tiêu đề khi bạn lập mới Blog. Tiêu đề Blog cần liền mạch, ngắn gọn ( không quá 70 ký tự ), không nên lặp lại từ khóa >2 lần. Sau khi tạo Blog, bạn có thể thiết lập lại tiêu đề bằng cách vào Cài đặt ( Setting ) => Cơ bản => Tiêu đề

Mặc định, trên trang xem bài viết, Blogger đặt tiêu đề Blog phía trước tiêu đề bài viết. Điều này thật sự không hề tốt cho SEO. Để khắc phục lỗi này, các bạn vào Mẫu ( Template ) => Chỉnh sửa HTML và tìm đoạn code sau

<title><data:blog.pageTitle/></title>

và thay thế nó bằng đoạn code sau, rồi Lưu

<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title> </b:if>

Meta Description

Meta Description là một đoạn mô tả ngắn, cung cấp cho bộ máy tìm kiếm và người dùng thông tin giới thiệu về Blog, bài viết của bạn

Bạn có thể thêm Meta Description cho blogger bằng cách vào Cài đặt >> Tùy chọn tìm kiếm >> Điền mô tả tìm kiếm vào

Khi viết mô tả cho Blog, bạn cần lưu ý, mô tả phải chứa từ khóa, chỉ nên dài khoảng 140 – 160 kí tự và khái quát thật chính xác nội dung Blog. Và lưu ý, đừng chèn có nhiều từ khóa vào đây bởi như vậy vừa khiến người dùng cảm thấy khó chịu vừa khiến bot đánh giá bạn đang spam từ khóa

Xem thêm : Tối ưu hóa tiêu đề và meta description cho Blogger

Meta Tag nâng cao

Meta Tag thì có rất nhiều, quan trọng nhất và Title Tag và Meta Description ( mình đã trình bày ở trên ). Bên cạnh có, bạn cũng nên thêm một số thẻ Meta dưới đây để cung cấp thêm thông tin cho bộ máy tìm kiếm

Các bạn vào Mẫu ( Template ) => Chỉnh sửa HTML => Thêm đoạn code sau phía dưới thẻ <head>

<meta name='author' content='author's name'/>
<meta name='email' content='author's email'/>
<meta name='language' content='author's language'/>
<meta name='country' content='author's country'/>
<meta name='generator' content='blogger'/>
<meta name='robots' content='noodp,noydir'/>

các bạn nhớ chỉnh sửa lại nội dung trong phần content

Tạo Sitemap và submit lên Google Webmastertool

Sitemap giống như một bản đồ của Blog, giúp cho bot có thể dễ dàng tìm kiếm đường link và index nó nhanh hơn.

Bạn cần phải Submit sitemap của blogger lên Google thông qua Google Webmasters Tools để bot Google bắt đầu hoạt động. Để làm điều này bạn vào Google Webmasters Tools = Sơ đồ trang web >> Thêm/kiểm tra sơ đồ trang web và điền đoạn code này vào

atom.xml?redirect=false&start-index=1&max-results=500

Xem thêm : Cách tạo Sitemap cho Blogger và submit lên Google Webmaster Tool

Tạo file Robot.txt

Robot.txt là 1 file text đặc biệt giúp bot của công cụ tìm kiếm nhận biết phần nội dung cần Index. Sau đây là cách tạo robot.txt chuẩn seo cho blogger

- Đăng nhập vào Blog

- Cài đặt >> Tùy chọn tìm kiếm >> Trình thu thập thông tin và lập chỉ mục >> Robots.txt tùy chỉnh

- Bật nội dung robots.txt tùy chỉnh, điền đoạn code dưới đây và lưu lại

User-agent: Mediapartners-Google
Disallow:
User-agent: *
Allow: /
Disallow: /search
Disallow: /*?updated-max=*
Disallow: *archive.html
Sitemap: http://diachiblogcuaban/feeds/posts/default?orderby=UPDATED

Xem thêm : Tối ưu hóa file robots.txt cho Blogger chuẩn SEO

Tối ưu hóa các thẻ Heading

Tối ưu hóa heading là công việc cực kì quan trọng trong seo onpage. Thẻ Heading trong SEO gồm 6 loại ( H1, H2, H3, H4, H5, H6 ), tầm quan trong sẽ giảm dần tư H1 - H6. Khi sử dụng các thẻ heading, bot sẽ nhận biết được đâu là phần quan trọng nhất. Bạn không nên lạm dụng, sử dụng quá nhiều các thẻ heading bởi nó không hề tốt một chút nào.

Mặc định, các thể Heading trong Blogger sẽ được sử dụng như sau

+ Đối với trang chủ

<h1>Tiêu đề Blog</h1>
<h3>Tiêu đề bài viết 1</h3>
<h3>Tiêu đề bài viết 2</h3>
<h2>Tiêu đề Widget</h2>

Chúng ta cần chuyển nó thành như sau

<h1>Tiêu đề Blog</h1>
<h2>Tiêu đề bài viết 1</h2>
<h2>Tiêu đề bài viết 1</h2>
<h4>Tiêu đề Widget</h4>

+ Đối với trang bài viết

<h1>Tiêu đề Blog</h1>
<h3>Tiêu đề bài viết </h3>
<h2>Tiêu đề Widget</h2>

Chúng ta cần chuyển nó thành như sau

<h2>Tiêu đề Blog</h2>
<h1>Tiêu đề bài viết </h1>
<h4>Tiêu đề Widget</h4>

Xem thêm : Hướng dẫn tối ưu hóa thẻ Heading cho Blogger

Tạo trang Archive ( Lưu trữ ), 404

Bên trên, mình đã nói về Sitemap nhưng Sitemap đó là cho bot còn để người đọc có thể theo dõi, chúng ta sẽ tạo một trang Sitemap riêng, gọi là Archive

Trong trang Archive chúng ta sẽ chia bài viết theo từng chuyên mục, liệt kê các chuyên mục hiện có. Trong Archive sẽ giúp người đọc có cái nhìn tổng quan nhất về Blog của bạn

Bên cạnh đó,chúng ta cũng cần tạo một trang 404 ( trang báo lỗi ). Trang này sẽ tự động chuyển link lỗi sang link khác hoặc đơn giản là một trang thông báo cho người đọc rằng : Link này bị lỗi. Trang 404 khá là cần thiết vì nó sẽ khiến người đọc cảm thấy dễ chịu hơn khi truy cập vào link bị lỗi trên blog của bạn

Xem thêm : Hướng dẫn cách tạo trang 404 cho Blogger

Lựa chọn Template chuẩn SEO

Một template chuẩn SEO sẽ giúp công việc SEO cho Blogspot trở nên dễ dàng, thuận tiện, đạt hiệu quả cao. Template tốt cho SEO sẽ có cấu trúc phù hợp để bot dễ dàng truy cập, xác định, index nội dung trên blog của bạn. Và một yếu tố nữa mà theo mình rất rất quan trọng khi lựa chọn template chính là Responsive ( phù hợp với các kích thước màn hình ) bởi vì ngày nay lượng truy cập đến từ smartphone, máy tính bảng là cực kì lớn.

Để có thể lựa chọn được giao diện tốt cho blog, mình khuyên các bạn nên tìm kiếm ở các trang chia sẻ template blogger uy tín hoặc bỏ tiền thuê, mua lại template của một ai đó. Lưu ý : Đợt tới, mình sẽ chia sẻ với các bạn các template do mình tự thiết kế, chuẩn SEO, load nhanh và Responsive. Heheheh

Lựa chọn tên miền

Để SEO cho Blogger đạt hiệu quả cao nhất, đầu tiên, bạn cần lựa chọn tên miền phụ hợp. Sau đây là một số yêu cầu của một tên miền tốt cho SEO

Ngắn gọn, dễ nhớ, dễ viết, không nên có các kí hiệu đặc biệt và số
Tên miền nên chứa từ khóa chính cần SEO
Lựa chọn các đuôi tên miền phổ biến như .com, .net, .org.........

Đặc biệt, đối với Blogspot, Google sẽ cung cấp cho các bạn tên miền abcxyz.blogspot.com. Mình lướt qua các forum thì thấy nhiều người tranh cãi về việc " tên miền .blogspot.com có tốt cho SEO không ? ", tên miền .blogspot.com có lên top được không?"....... và các câu hỏi tương tự. Theo cá nhân mình thì đuôi tên miền không ảnh hưởng quá lớn đên việc làm SEO của bạn, quan trọng là cách bạn tối ưu hóa Blog và phát triển nội dung ( nhiều Blog không cần làm SEO mà vẫn đạt thứ hạng cao và lượng truy cập lớn, bởi nội dung độc đáo, hấp dẫn )

Tăng tốc Blog

Có thể các bạn sẽ thắc mắc tại sao mình lại nhắc đến vấn đề này trong bài viết về SEO nhưng theo mình, tăng tốc Blog thực sự rất cần thiết khi làm SEO. Nếu để ý, các bạn sẽ thấy Google đã tạo ra riêng một công cụ đánh giá tốc độ website, điều này chứng tỏ Google cũng không ngó lơ với vấn đề tốc độ tải trang. Bên cạnh đó, tăng tốc Blog còn giúp người dùng cảm thấy thích thú hơn với việc truy cập vào Blog của bạn, từ đó giảm tỉ lệ thoát, tăng lượt truy cập đáng kể

Một số cách các bạn có thể áp dụng để tăng tốc Blog là :

Javascript : hạn chế sử dụng JS, nén JS, ẩn file JS mặc định....
CSS : nén CSS, ẩn file CSS mặc định, tránh chèn code inline
Hình ảnh : giảm kích thước ảnh, sử dụng Base64 để mã hóa hình ảnh

Xem thêm : Hướng dẫn tăng tốc Blogger toàn tập

2. Viết bài chuẩn SEO và chất lượng

Viết bài chuẩn SEO là viết bài sao cho Bot của công cụ tìm kiếm có thể dễ dàng phân tích nội dung bài viết và index nó

Một bài viết chuẩn SEO cần đạt những yêu cầu sau

Từ khóa cần xuất hiện trong tiêu đề và mô tả
Sử dụng các thẻ Heading một cách phù hợp, vừa đủ
Bài viết tự nhiên, tránh nhồi nhét từ khóa, độ dài >3000 từ
Bài viết gốc, tự viết, không copy 100% từ website khác
Bài viết cần có các liên kết nội bộ tới các bài viết khác

Bên cạnh đó, mình xin nhấn mạnh rằng, nội dung chất lượng chính là yếu tốc cực kì cực kì quan trọng nếu như bạn muốn phát triển Blog. Cho dù, bạn SEO cực tốt, chạy ads, thứ hạng 1 nhưng nội dung không chất lượng thì làm tăng tỉ lệ thoát mà thôi, người đọc sẽ chủ động quay lại Blog của bạn để tìm kiếm nội dung. Vì vậy, bên cạnh SEO, hãy tập trung xây dựng nội dung thật chất lương để thu hút, giữ chân độc giả

3. SEO Offpage

Trái với SEO Onpage thì SEO Offpage là bạn sẽ tối ưu hóa các yếu tố bên ngoài Blog của bạn như backlink, mạng xã hội

Xây dựng Backlink cho Blog

Backlink đơn giản là những liên kết trỏ về website của bạn từ các website khác. Backlink rất quan trọng trong việc SEO cho Blogger cũng như SEO cho các website khác, bởi vì Backlink giống như các phiếu bầu để blog của bạn có thể đạt thứ hạng cao trên công cụ tìm kiếm

Một số cách kiếm Backlink

Viết bài quảng cáo trên diễn đàn, blog, website có thứ hạng cao
Sử dụng mạng xã hội để tạo Backlink
Backlink từ video
Xây dựng các Blog vệ tinh
Mua Backlink từ các website khác
..........

Xây dựng link nội bộ trên Blog

Trái với Backlink, link nội bộ là link trỏ từ các liên kết trên chính Blog của bạn. Link nội bộ có tầm quan trọng to lớn trong việc tối ưu hóa Blogger bởi vì nó không những cải thiện thứ hạng của Blog mà còn giảm đáng kể tỉ lệ thoát từ người đọc

Đối với Blogger, chúng ta có thể sử dụng một số cách sau đây để tạo link nội bộ

Chèn liên kết nội bộ vào bài viết
Thêm widget bài viết liên quan

Xem thêm : Tiện ích bài đăng liên quan cho Blogger

Lời kết :

Trên đây là một số công việc mà theo mình rất cơ bản để làm SEO cho Blogger. Thế nhưng, việc làm SEO cho Blogspot không chỉ bao gồm những công việc mình liệt kê ở trên mà còn rất nhiều công việc khác.

Cuối cùng, mình xin nhấn mạnh một lần nữa, các bạn phải xây dựng nội dung trên Blog thật chất lượng, hữu ích để quá trình SEO đạt hiệu quả cao hơn. Chúc các bạn thành công

Thứ Tư, 25 tháng 5, 2016

Seri hướng dẫn Blogger cơ bản cho người mới

By : mrtienhp97

Thứ Tư, tháng 5 25, 2016 seri co ban, thủ thuật blogger

Hiện nay, chúng ta có khá nhiều lựa chọn để xây dựng một Blog cho riêng mình. Trong đó, có hai CMS ( Content Management System ) đang rất được ưa chuộng đó là Wordpress và Blogger. Cả hai nền tảng đều có ưu và nhược điểm riêng song thực sự cả Wordpress và Blogger đều rất đáng để sử dụng.

Tuy Blogger khó có thể so sánh được với Wordpress nhưng Blogger vẫn có những lợi thế hơn hẳn như : miễn phí, dễ dàng cài đặt và sử dụng........ Chính vì thế, tại sao bạn không thử lựa chọn Blogger để xây dựng một Blog cho mình ?

Trong Seri bài viết này, mình sẽ hướng dẫn chi tiết nhất có thể để ngay cả những bạn chưa biết gì cũng có thể sử dụng được Blogger thuần thục. Tuy nhiên, mình cũng xin nhấn mạnh đây chỉ là seri hướng dẫn cơ bản mà thôi, còn để nâng cao hơn nữa hay theo dõi các bài viết thủ thuật khác trên Blog.

Bạn sẽ học được gì trong seri này ?

Minh tin rằng, sau khi theo dõi loạt bài viết này, các bạn sẽ có cái nhìn tổng quan nhất về Blogger cũng như lợi ích, tiềm năng của nó. Bên cạnh đó, bạn sẽ nắm bắt được cách sử dụng các chức năng có sẵn của Blogger

Những ai nên theo dõi seri này ?

Tất cả mọi người. Seri này mình hướng dẫn khá chi tiết để những bạn hoàn toàn chưa biết gì về Blogger cũng có thể nắm bắt được. Chỉ cần bạn có niềm đam mê, chịu khó tìm tòi, học hỏi thì chắc chắn không gì là không thể

Bạn cần chuẩn bị gì trước khi theo dõi seri này ?

Để bắt đầu sử dụng Blogger, có một số điều bạn cần chuẩn bị như sau

1 tài khoản Gmail
1 số kiến thức cơ bản về HTML và CSS ( Không bắt buộc )

Seri này gồm những nội dung gì ?

Đây là nội dung mình sẽ viết trong seri này, các bạn nên xem qua để nắm bắt đươc

1. Blogger là gì ? Ưu, nhược điểm của Blogger ?
2. Tạo một Blog mới trên Blogger

3. Tổng quan về giao diện làm việc của Blogger

4. Phân biệt Post và Page trong Blogger

5. Tạo bài viết mới cho Blog

6. Tạo Page mới trong Blogger

7. Tùy chỉnh Bố cục cho Blogger

8. Thay đổi giao diện cho Blogger

Thứ Hai, 23 tháng 5, 2016

Hướng dẫn cách tạo trang 404 cho Blogger

By : mrtienhp97

Thứ Hai, tháng 5 23, 2016 thủ thuật blogger

404 là lỗi rất hay gặp, lỗi này xảy ra khi bạn truy cập vào một đường link không còn tồn tại ( do nội dung cũ hoặc lí do nào đó bị xóa ) trên website đó.

Thông thường, để giải quyết lỗi này, các blogger hay tạo trang 404 ( 404 Eror Page ) để thông báo cho người đọc biết rằng liên kết này đã hỏng và điều hướng người dùng đến trang chủ hoặc một liên kết khác.

Hướng dẫn cách tạo trang 404 cho Blogger

Để tạo trang 404 cho Blogger, chúng ta sẽ sử dụng thẻ điều kiện <b:if> , một ít HTML và CSS. Các bạn thêm đoạn code sau vào dưới thẻ <body>

<b:if cond='data:blog.pageType == "error_page"'>
.........
</b:if>

trong đó ..... là nội dung bạn muốn hiển thị trên trang 404, có thể là một đoạn text, hoặc một đoạn HTML và CSS

Nếu các bạn không rõ lắm về HTML vs CSS thì có thể sử dụng luôn mẫu mình giới thiệu sau đây

Bước 1 : Chèn đoạn code phía trên thẻ </head>

<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,600&subset=latin,vietnamese' rel='stylesheet' type='text/css'/>

Mình sẽ sử dụng font Open Sans, nếu như các bạn thích sử dụng font này thì sử dụng font khác nhé.

Bước 2 : Chèn đoạn code sau dưới thẻ <body>

<b:if cond='data:blog.pageType == "error_page"'>
<div id='error404'>
<div id='error-text'>
<span>404</span>
<p>Sorry, the page you are looking for could not be found</P>
<p><a href="http://www.abcxyz.blogspot.com">HOME PAGE</a></p>
</div>
</div>
</b:if>

trong đó abcxyz.blogspot.com là đường dẫn blog của bnaj

Bước 3 : Chèn đoạn code sau phía trên thẻ ]]></b:skin>

#error404{font-family:'Open Sans';text-align:center;font-weight:700;font-size:20px;position:fixed;width:100%;height:100%;line-height:1.5em;z-index:9999;background:#039BE6}
#error-text{top:30%;position:relative;font-size:20px;color:#eee}
#error-text span{position:relative;color:#fff;font-size:200px;padding:0 20px;border-radius:5px;font-weight:700;letter-spacing:3px;transition:all .5s}
#error404 p{margin-top:50px;color:#6CC5F1}
#error-text a{padding:15px 20px;border-radius:20px;border:1px solid #fff;color:#fff;text-decoration:none;font-weight:400}

Bước 4 : Save template lại và test

Chúc các bạn thành công

Thứ Bảy, 21 tháng 5, 2016

The One Template Blogger - Template Blogger đơn giản, responsive

By : mrtienhp97

Thứ Bảy, tháng 5 21, 2016 template blogger

Đây là mẫu template mình lấy ý tưởng từ một theme wordpress của 7uptheme. Mẫu template nhìn chung cũng khá đơn giản, phù hợp cho các blog chia sẻ thủ thuât, game, phim....

Demo - Download

Một số tính năng

Responsive
Tối ưu hóa SEO
Ads Ready
Breadcrumb
Mobile Friendly
Bài viết liên quan
Button mạng xã hội, chia sẻ bài viết
Bài viết mới nhất
Author Box
.......

Hướng dẫn cài đặt

1. Thay Logo

<a href='/'><img src='https://lh3.googleusercontent.com/-15Ye4ooxcdY/VyBW0rhImwI/AAAAAAAAC2c/vQ0SV7aO6DoXlLrmmez0WYJ5YIn9ekalgCCo/s240/logo.png'/></a>

2. Chỉnh sửa Menu

<ul id='menu'>
<li><a href='/'>Home</a></li>
<li><a href='#'>Featured</a>
<ul class='sub-menu'>
<li><a href='#'>Sub Menu 1</a></li>
<li><a href='#'>Sub Menu 2</a></li>
<li><a href='#'>Sub Menu 3</a></li>
</ul>
</li>
<li><a href='#'>Business</a>
<ul class='sub-menu'>
<li><a href='#'>Sub Menu 1</a>
</li>
<li><a href='#'>Sub Menu 2</a></li>
<li><a href='#'>Sub Menu 3</a></li>
</ul>
</li>
<li><a href='#'>Mobile</a></li>
<li><a href='/'>Fashion</a></li>
<li><a href='/'>Shop</a></li>
<li><a href='/'>Travel</a></li>
<li><a href='/'>Spot</a></li>
</ul>

Menu ở Footer

<ul>
<li><a href='#'>SUBSCRIBE</a></li>
<li><a href='#'>ADVERTISE</a></li>
<li><a href='#'>SITE MAP</a></li>
<li><a href='#'>PRESS CENTER</a></li>
<li><a href='#'>CUSTOMER CARE</a></li>
<li><a href='#'>CONTACT US</a></li>
<li><a href='#'>NEWSLETTER</a></li>
<li><a href='#'>WIRED STAFF</a></li>
<li><a href='#'>JOBS</a></li>
<li><a href='#'>RSS</a></li>
</ul>

3. Chỉnh sửa button mạng xã hội

<ul>
<li><a class='s1' href='#'><i class='fa fa-facebook'/></a></li>
<li><a class='s2' href='#'><i class='fa fa-twitter'/></a></li>
<li><a class='s3' href='#'><i class='fa fa-google-plus'/></a></li>
<li><a class='s4' href='#'><i class='fa fa-youtube'/></a></li>
<li><a class='s5' href='#'><i class='fa fa-pinterest'/></a></li>
<li><a class='s6' href='#'><i class='fa fa-instagram'/></a></li>
</ul>

4. Chỉnh sửa Author Box

<div class='author-name'>
ABOUT AUTHOR / The One
</div>
<div class='author-content'>
<div class='author-ava'>
<a href='#'><img alt='' class='avatar avatar-96 photo avatar-default' height='96' src='http://0.gravatar.com/avatar/?s=96&d=mm&r=g' srcset='http://0.gravatar.com/avatar/?s=192&d=mm&r=g 2x' width='96'/> </a>
</div>
<div class='author-info'>
<p>Suspendisse potenti. Maecenas tristique condimentum lectus, a convallis nulla pellentesque a. Quisque ut est vitae leo finibus pharetra quis id sem. Integer quis eleifend felis, lacinia blandit dolor. Integer fringilla posuere dictum. Fusce lobortis eu mi id mattis. Nunc eu metus mi. Sed ac elementum tellus.</p>
<ul class='author-social'>
<li><a href='#'><i class='fa fa-google-plus'/></a></li>
<li><a href='#'><i class='fa fa-facebook'/></a></li>
<li><a href='#'><i class='fa fa-twitter'/></a></li>
<li><a href='#'><i class='fa fa-linkedin'/></a></li>
<li><a href='#'><i class='fa fa-youtube'/></a></li>
<li><a href='#'><i class='fa fa-vimeo'/></a></li>
</ul>
</div>
</div>

5. Thiết lập xem Blog trên Mobile

Chúc các bạn thành công

Thứ Hai, 16 tháng 5, 2016

Tối ưu hóa file robots.txt cho Blogger chuẩn SEO

By : mrtienhp97

Thứ Hai, tháng 5 16, 2016 blogger seo, thủ thuật blogger

Trong quá trình tối ưu hóa, làm SEO cho Blogspot, chắc chắn các bạn đã nghe đến file robots.txt. Vậy, robots.txt là gì ? Tác dụng của nó là gì ? Tối ưu hóa ra sao ? Bài viết này sẽ giúp bạn trả lời tất cả nhưng câu hỏi trên

Robots.txt là gì ? Tác dụng của nó là gì ?

Robots.txt là một file txt đơn giản có thể được tạo bởi Notepad và chỉ chứa một vài dòng code bên trong đó. Robots.txt được sử dụng để hướng công cụ tìm kiếm đến những trang bạn cần index, đồng thời không cho phép bot index những trang bạn không muốn index. Do đó robots.txt có vai trò khá trong khi làm SEO cho Blogger

Tối ưu hóa file robots.txt cho Blogger chuẩn SEO

Bước 1 : Đăng nhập vào Blogger => Cài đặt

Bước 2 : Chọn Tùy chọn tìm kiếm sau đó để ý phần Trình thu thập thông tin và lập chỉ mục

Bước 3 : Nhấn Chỉnh sửa ở phần Robots.txt tùy chỉnh sau đó chọn Có

Bước 4 : Chèn đoạn code dưới đây vào và ấn Lưu thay đổi

User-agent: Mediapartners-Google
Disallow:
User-agent: *
Allow: /
Disallow: /search
Disallow: /*?updated-max=*
Disallow: *archive.html
Sitemap: http://abcxyz.blogspot/feeds/posts/default?orderby=UPDATED

Thay abcxyz.blogspot bằng đường link blog của bạn

Chúc các bạn thành công

Thứ Ba, 10 tháng 5, 2016

Cách tạo Sitemap cho Blogger và submit lên Google Webmaster Tool

By : mrtienhp97

Thứ Ba, tháng 5 10, 2016 thủ thuật blogger

Trong bài viết hướng dẫn SEO cho Blogspot, mình có đề cập đến vấn đề tạo sitemap và submit lên Webmaster nhưng chưa cụ thể, chi tiết. Bài viết này, mình xin đề cập cụ thể, chi tiết hơn để tất cả các bạn nắm bắt được

Xem thêm : Hướng dẫn cách SEO cho Blogspot toàn tập ( Cập nhật )

Sitemap hay XML Sitemap là gì

"Site" là website, "map" là bản đồ. Như vậy Sitemap chính là một bản đồ thu nhỏ của Blog, nó liệt kê tất cả các liên kết có trên Blog

Tại sao cần tạo và submit sitemap lên Google Webmastertool

Sau khi bạn submit sitemap , các bot tìm kiếm sẽ dễ dàng hoạt động, lần theo các liên kết trong sitemap và đưa nó vào hệ thống lưu trữ của Google. Bên cạnh đó, việc này giúp bot dễ dàng cập nhật các liên kết, từ đó giúp index bài viết nhanh hơn.

Cách tạo Sitemap cho Blogger và submit lên Google

Bước 1 : Các bạn truy cập vào https://www.google.com/webmasters/tools, đăng nhập và lựa chọn website cần submit sitemap

Giao diện làm việc

Bước 2 : Tại cột phía bên trái, chọn Thu nhập dữ liệu => Sơ đồ trang Web => Thêm/Kiểm tra sơ đồ trang Web

Bước 3 : Chèn đoạn code sau đây vào và nhấn Gửi

atom.xml?redirect=false&start-index=1&max-results=500

Như vậy là đã hoàn thành. Công việc của bạn là đợi Google cập nhật các liên kết trên Blog và thường xuyên vào Webmaster Tool để kiếm tra. Chúc các bạn thành công

Thứ Năm, 5 tháng 5, 2016

Thêm tiện ích Email Subscribe cho Blogger

By : mrtienhp97

Thứ Năm, tháng 5 05, 2016 widget blogger

Tiện ích Email Subscribe là một tiện ích khá quan trọng đối với các Blog. Tiện ích này có thể đem lại một lượng truy cập ( traffic ) khá lớn, đều đặn thông qua việc gửi email thông báo bài viết mới tới độc giả. Cụ thể, khi một độc giả Subscribe trên Blog của bạn tức là đồng ý theo dõi Blog, họ sẽ nhận được email thông báo mỗi khi bạn update bài viết mới.

Demo

Tiện ích Email Subscribe mình giới thiệu trong bài viết này sẽ sử dụng Feedburner. Feedburner là một dịch vụ tạo nguồn cấp RSS cho website với một số chức năng như tự động gửi bài viết qua email, thống kê người đọc RSS....

Để tạo nguồn cấp RSS cho Blog, các bạn vào feedburner.google.com sau đó đăng kí với email và địa chỉ Blog của mình. Cuối cùng, copy phần username để sử dụng về sau

Thêm tiện ích Email Subscribe cho Blogger

Bước 1 : Thêm đoạn code dưới đây vào phía dưới <head>

<link href='https://fonts.googleapis.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css'/>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

Do mình sử dụng font Roboto và icon từ Font Awesome nên mới thêm đoạn code trên, bạn nào am hiểu thì có thể tự tùy chỉnh lại

Bước 2 : Thêm đoạn code dưới đây vào phía trên ]]></b:skin>

#subscribe-box {width: 355px;max-width: 100%;margin: 0 auto;background: url('https://lh3.googleusercontent.com/-L0_icbQHvEE/VytOKAzj1KI/AAAAAAAAC94/pnK13TfWtmckvfXrlrwm8qiR28KTCwz7ACCo/s355/header.png') no-repeat #fff;background-size: 100% 10px;height: auto;padding-top: 10px;padding-bottom: 20px;font-family: 'Roboto';border-radius: 8px;border: 1px solid #e3e3e3;}
.subscribe-text {background: #f7f7f7;padding: 30px 50px;tet-align: center;color: #b8b8b8;font-size: 30px;font-weight: 300;}
.emailfield {padding: 4%;padding-bottom: 0;}
#subscribe-box .emailfield input {background: #f9f9f9;color: #b8b8b8;padding: 15px 10px;margin-top: 10px;font-size: 13px;border: 2px solid #EBEBEB;border-bottom: 4px solid #EBEBEB;border-radius: 8px;width: 92%;transition: all 0.4s ease-in-out;font-family: 'Roboto';}
#subscribe-box .emailfield input:focus {background: #fff;outline: none;color: #888;}
#subscribe-box .emailfield .submitbutton {background: #F27669;font-family: 'Roboto';color: #fff;font-weight: 700;font-size: 18px;border: none;border-radius: 8px;border-bottom: 4px solid #D96A5D;outline: none;width: 100%;cursor: pointer;transition: all 0.4s ease-in-out;margin-bottom: 10px;}
#subscribe-box .emailfield .submitbutton:active {outline: none;border: none;background: #D96A5D;color: #fff;}
#subscribe-box .emailfield .submitbutton:hover {background: #D96A5D;color: #fff;}
.subscribe-social {color: #b8b8b8}
.subscribe-social {display: block;text-align: center;}
.subscribe-social p {margin-bottom: 30px;}
.icon-button {padding: 10px 15px;color: #fff;text-decoration: none;border-radius: 8px;}
.icon-button i {margin-right: 3px;}
.twitter {background: #5DC2E6;}
.facebook {background: #578EE8;}

Bước 3 : Tạo một Widget HTML/Javascript mới trong Bố cục và điền đoạn code dưới đây vào

<div id="subscribe-box">
<div class='subscribe-text'>Sign up in seconds</div>
<div class="emailfield">
<form action="http://feedburner.google.com/fb/a/mailverify?uri=USER-NAME" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=USER-NAME, 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="name" onblur="if (this.value == "") {this.value = "Your Name";}" onfocus="if (this.value == "Your Name") {this.value = "";}" type="text" value="Your Name" />
<input name="email" onblur="if (this.value == "") {this.value = "Your Email";}" onfocus="if (this.value == "Your Email") {this.value = "";}" type="text" value="Your Email" />
<input name="uri" type="hidden" value="USER-NAME" />
<input name="loc" type="hidden" value="en_US" />
<input class="submitbutton" type="submit" value="Sign me up!" />
</form>
</div>
<div class='subscribe-social'>
<p>..or you can skip that and sign up via</p>
<a class="icon-button twitter" href="#" rel="nofollow" target="_blank" title="Twitter Tweet"><i class="fa fa-twitter"></i><span>Twitter</span></a>
<a class="icon-button facebook" href="#" rel="nofollow" target="_blank" title="Facebook Share"><i class="fa fa-facebook"></i><span>Facebook</span></a>
</div>
</div>

thay toàn bộ USER-NAME bằng username bạn lấy ở trên và đường dẫn của icon Facebook, Twitter

Chúc các bạn thành công

Simple Fast Seo - Template Blogger Responsive, thân thiện SEO

By : mrtienhp97

Thứ Năm, tháng 5 05, 2016 template blogger

Simple Fast SEO là mẫu template blogger có thiết kế khá đơn giản nhưng tương đối đầy đủ các tính năng cần thiết cho một Blog. Template này có thể hiển thị tốt trên các kích thước màn hình khác nhau Desktop, Table, Mobile...

Demo - Download

Một số tính năng

Responsive
Tốc độ Load nhanh
Tối ưu hóa SEO
Hỗ trợ đặt Ads
Bài viết liên quan
Button mạng xã hội, chia sẻ bài viết
Bài viết mới nhất
Breadcrumb
Mobile Friendly
....

Hướng dẫn cài đặt

1. Thiết lập Menu

Menu trên cùng + Button mạng xã hội

<ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>Contact</a></li>
<li><a href='#'>404</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Sitemap</a></li>
<li class='social'><a href='#'><i class='fa fa-rss'/></a></li>
<li class='social'><a href='#'><i class='fa fa-instagram'/></a></li>
<li class='social'><a href='#'><i class='fa fa-google'/></a></li>
<li class='social'><a href='#'><i class='fa fa-twitter'/></a></li>
<li class='social'><a href='#'><i class='fa fa-facebook'/></a></li>
</ul>

Menu trên cùng khi hiển thị trên Mobile

<select class='sfs-menu-1-mobile' id='sfs-menu-1-mobile'>
<option value='#'>Home</option>
<option value='#'>About</option>
<option value='#'>Contact</option>
<option value='#'>404</option>
<option value='#'>About</option>
<option value='#'>Sitemap</option>
</select>

Menu chính

<ul id='menu'>
<li><a href='/'>Home</a></li>
<li><a href='#'>Menu 1</a>
<ul class='sub-menu'>
<li><a href='#'>Sub Menu 1</a></li>
<li><a href='#'>Sub Menu 2</a></li>
<li><a href='#'>Sub Menu 3</a></li>
</ul>
</li>
<li><a href='#'>Menu 2</a>
<ul class='sub-menu'>
<li><a href='#'>Sub Menu 1</a>
</li>
<li><a href='#'>Sub Menu 2</a></li>
<li><a href='#'>Sub Menu 3</a></li>
</ul>
</li>
<li><a href='#'>Menu 3</a></li>
</ul>

2. Thiết lập Subscribe Box

<div class='subscribebox'>
<h4>Subscribe via Email</h4>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open("https://feedburner.google.com/fb/a/mailverify?uri=nguyentien", "popupwindow", "scrollbars=yes,width=550,height=520"); return true' target='popupwindow'>
<input id='subscribe-input' name='email' placeholder='Email Address..' type='text'/>
<input name='uri' type='hidden' value='nguyentien'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='subscribe-button' type='submit' value='Subscribe Now'/>
</form>
</div>

3. Thiết lập Logo

Các bạn vào Bố cục, chỉnh Widget giống trong hình

4. Thiết lập quảng cáo

<div class='sfs-head-ads'><a href='#'><img src='https://lh3.googleusercontent.com/-x-ZbkHe1_q4/VyoC6qWluwI/AAAAAAAAC88/9GYixFNwcugpHn_qTWskb3Q3BIkk7HZKACCo/s1024/top-ad.jpg'/></a> </div>

5. Thiết lập xem Blog trên Mobile

Chúc các bạn thành công

Thứ Tư, 4 tháng 5, 2016

Hướng dẫn tạo tiện ích Breaking New cho Blogger

By : mrtienhp97

Thứ Tư, tháng 5 04, 2016 widget blogger

Tiện ích Breaking New là tiện ích khá phổ biến ở các trang báo chí, tin tức... được dùng để hiển thị các bài viết mới trên Blog. Có thể thấy, tiện ích này có tính năng khá giống với tiện ích Recent Post mình đã giới thiệu nhưng có ít tính năng, giao diện đơn giản hơn.

Bước 1 : Thêm đoạn CSS dưới đây vào phía trên thẻ ]]></b:skin>

#breaking-new {display: block;float: left;height: 40px;line-height: 20px;overflow: hidden;width: 100%;border:1px solid #e3e3e3;}
.breaking-new-title {background: #66cc99; color: #fff;display: block;float: left; font: bold 12px/22px;padding: 9px;position: absolute;}
#breaking-new-post {float: left; margin-left: 100px;}
#breaking-new-post ul,
#breaking-new-post li {list-style: none; margin: 0; padding: 0;}
#breaking-new-post li {height:40px;}
#breaking-new-post li a {background: none !important;color: #333 !important;font: bold 12px/22px;text-decoration: none;line-height:40px;display:block;}

Bước 2 : Thêm đoạn Script vào trên thẻ </body>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
var url_blog = 'http://simplefastseo-nt.blogspot.com', // Replace With your Blog Url
numpostx = 20; // Maximum Post
$.ajax({
url: '' + url_blog + '/feeds/posts/default?alt=json-in-script&max-results=' + numpostx + '',
type: 'get',
dataType: "jsonp",
success: function(data) {
var posturl, posttitle, skeleton = '',
entry = data.feed.entry;
if (entry !== undefined) {
skeleton = "<ul>";
for (var i = 0; i < entry.length; i++) {
for (var j = 0; j < entry[i].link.length; j++) {
if (entry[i].link[j].rel == "alternate") {
posturl = entry[i].link[j].href;
break;
}
}
posttitle = entry[i].title.$t;
skeleton += '<li><a href="' + posturl + '" target="_blank">' + posttitle + '</a></li>';
}
skeleton += '</ul>';
$('#breaking-new-post').html(skeleton);
function tick() {
$('#breaking-new-post li:first').slideUp(function() {
$(this).appendTo($('#breaking-new-post ul')).slideDown();
});
}
setInterval(function() {
tick()
}, 5000);
} else {
$('#breaking-new-post').html('<span>No result!</span>');
}
},
error: function() {
$('#breaking-new-post').html('<strong>Error Loading Feed!</strong>');
}
});
});
//]]>
</script>

Thay http://simplefastseo-nt.blogspot.com bằng link blog của bạn

Bước 3 : Thêm đoạn code này vào vị trí muốn hiển thị Breaking New

<div id='breaking-new'><span class='breaking-new-title'>Latest Post</span>
<div id='breaking-new-post'>Loading...</div>
</div>

Bước 4 : Save Template

Chúc các bạn thành công

Thứ Bảy, 30 tháng 4, 2016

Simple Blog 1 - Template Blogger nhẹ, load nhanh

By : mrtienhp97

Thứ Bảy, tháng 4 30, 2016 template blogger

Simple Blog 1 là mẫu giao diện đơn giản, 2 cột, màu sắc tươi sáng. Mẫu template này mình đã tối ưu hóa một số chỗ để đặt được tốc độc load khá nhanh tuy nhiên vẫn đầy đủ các tính năng cần thiết

Demo - Download

Điểm nổi bật

Tộc độ Load nhanh - Kiểm tra
Responsive - Kiểm tra
Tối ưu hóa SEO
Hỗ trợ đặt Ads
Bài viết liên quan
Button mạng xã hội, chia sẻ bài viết
Trang 404
....

Hướng dẫn cài đặt

1. Thiết lập Logo

....
<img alt='Simple Blog1' src='https://lh3.googleusercontent.com/-6CNRtpDd6tE/VyV7B8qKRyI/AAAAAAAAC70/P4J8jvCsUyI8gwzvgIt1gcKuaaCwBTXZgCCo/s534/logo.png'/>
....

2. Thiết lập Menu

....
<ul id='menu'>
<li><a href='/'>Home</a></li>
<li><a href='#'>Menu 1</a>
<ul class='sub-menu'>
<li><a href='#'>Sub Menu 1</a></li>
<li><a href='#'>Sub Menu 2</a></li>
<li><a href='#'>Sub Menu 3</a></li>
</ul>
</li>
<li><a href='#'>Menu 2</a>
<ul class='sub-menu'>
<li><a href='#'>Sub Menu 1</a>
</li>
<li><a href='#'>Sub Menu 2</a></li>
<li><a href='#'>Sub Menu 3</a></li>
</ul>
</li>
<li><a href='#'>Menu 3</a></li>
</ul>
....

3. Thiết lập Button mạng xã hội

<li class='social'><a href='#'><i class='fa fa-rss'/></a></li>
<li class='social'><a href='#'><i class='fa fa-instagram'/></a></li>
<li class='social'><a href='#'><i class='fa fa-google'/></a></li>
<li class='social'><a href='#'><i class='fa fa-twitter'/></a></li>
<li class='social'><a href='#'><i class='fa fa-facebook'/></a></li>

4. Thiết lập xem Blog trên Mobile

5. Thiết lập quảng cáo

<div class='post-ads'>
<a href='#'><img src='https://lh3.googleusercontent.com/-ADueFXWoFUg/VyQeIDqb5rI/AAAAAAAAC5A/EhY0KFFVkowMveWrwG0xgQ1qkndSTOmtACCo/s400/ads-head.png'/></a>
</div>

Lời kết : Đây là template đầu tiên mình thiết kế và chia sẻ, mong được sự góp ý của các bạn

Mẫu bài đăng liên quan này là do một Blogger người Châu Á ( 90% là người Indonesia ) viết ra và được sử dụng ở rất nhiều Blog. Ưu điểm của tiện ích này so với một số mẫu Related Post khác chính là tính năng. Tiện ích này hỗ trợ các bạn hiển thị hình ảnh thu nhỏ ( thumbnail ), tiêu đề, tóm tắt nội dung, đường dẫn đọc thêm ( read more ), tooltip.... Các bạn có thể xem qua demo tại đây

Tiện ích bài đăng liên quan cho Blogger

Bước 1 : Chèn đoạn code dưới đây vào trên thẻ đóng </body>

<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
/*! Related Post Widget for Blogger by Taufik Nurrohman => http://gplus.to/tovic */
var randomRelatedIndex, showRelatedPost;
(function(n, m, k) {
var d = {
widgetTitle: "<h4>Artikel Terkait:</h4>",
widgetStyle: 1,
homePage: "http://www.dte.web.id",
numPosts: 7,
summaryLength: 370,
titleLength: "auto",
thumbnailSize: 72,
noImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",
containerId: "related-post",
newTabLink: false,
moreText: "Baca Selengkapnya",
callBack: function() {}
};
for (var f in relatedPostConfig) {
d[f] = (relatedPostConfig[f] == "undefined") ? d[f] : relatedPostConfig[f]
}
var j = function(a) {
var b = m.createElement("script");
b.type = "text/javascript";
b.src = a;
k.appendChild(b)
},
o = function(b, a) {
return Math.floor(Math.random() * (a - b + 1)) + b
},
l = function(a) {
var p = a.length,
c, b;
if (p === 0) {
return false
}
while (--p) {
c = Math.floor(Math.random() * (p + 1));
b = a[p];
a[p] = a[c];
a[c] = b
}
return a
},
e = (typeof labelArray == "object" && labelArray.length > 0) ? "/-/" + l(labelArray)[0] : "",
h = function(b) {
var c = b.feed.openSearch$totalResults.$t - d.numPosts,
a = o(1, (c > 0 ? c : 1));
j(d.homePage.replace(/\/$/, "") + "/feeds/posts/summary" + e + "?alt=json-in-script&orderby=updated&start-index=" + a + "&max-results=" + d.numPosts + "&callback=showRelatedPost")
},
g = function(z) {
var s = document.getElementById(d.containerId),
x = l(z.feed.entry),
A = d.widgetStyle,
c = d.widgetTitle + '<ul class="related-post-style-' + A + '">',
b = d.newTabLink ? ' target="_blank"' : "",
y = '<span style="display:block;clear:both;"></span>',
v, t, w, r, u;
if (!s) {
return
}
for (var q = 0; q < d.numPosts; q++) {
if (q == x.length) {
break
}
t = x[q].title.$t;
w = (d.titleLength !== "auto" && d.titleLength < t.length) ? t.substring(0, d.titleLength) + "…" : t;
r = ("media$thumbnail" in x[q] && d.thumbnailSize !== false) ? x[q].media$thumbnail.url.replace(/\/s[0-9]+(\-c)?/, "/s" + d.thumbnailSize + "-c") : d.noImage;
u = ("summary" in x[q] && d.summaryLength > 0) ? x[q].summary.$t.replace(/<br ?\/?>/g, " ").replace(/<.*?>/g, "").replace(/[<>]/g, "").substring(0, d.summaryLength) + "…" : "";
for (var p = 0, a = x[q].link.length; p < a; p++) {
v = (x[q].link[p].rel == "alternate") ? x[q].link[p].href : "#"
}
if (A == 2) {
c += '<li><img alt="" class="related-post-item-thumbnail" src="' + r + '" width="' + d.thumbnailSize + '" height="' + d.thumbnailSize + '"><a class="related-post-item-title" title="' + t + '" href="' + v + '"' + b + ">" + w + '</a><span class="related-post-item-summary"><span class="related-post-item-summary-text">' + u + '</span> <a href="' + v + '" class="related-post-item-more"' + b + ">" + d.moreText + "</a></span>" + y + "</li>"
} else {
if (A == 3 || A == 4) {
c += '<li class="related-post-item" tabindex="0"><a class="related-post-item-title" href="' + v + '"' + b + '><img alt="" class="related-post-item-thumbnail" src="' + r + '" width="' + d.thumbnailSize + '" height="' + d.thumbnailSize + '"></a><div class="related-post-item-tooltip"><a class="related-post-item-title" title="' + t + '" href="' + v + '"' + b + ">" + w + "</a></div>" + y + "</li>"
} else {
if (A == 5) {
c += '<li class="related-post-item" tabindex="0"><a class="related-post-item-wrapper" href="' + v + '" title="' + t + '"' + b + '><img alt="" class="related-post-item-thumbnail" src="' + r + '" width="' + d.thumbnailSize + '" height="' + d.thumbnailSize + '"><span class="related-post-item-tooltip">' + w + "</span></a>" + y + "</li>"
} else {
if (A == 6) {
c += '<li><a class="related-post-item-title" title="' + t + '" href="' + v + '"' + b + ">" + w + '</a><div class="related-post-item-tooltip"><img alt="" class="related-post-item-thumbnail" src="' + r + '" width="' + d.thumbnailSize + '" height="' + d.thumbnailSize + '"><span class="related-post-item-summary"><span class="related-post-item-summary-text">' + u + "</span></span>" + y + "</div></li>"
} else {
c += '<li><a title="' + t + '" href="' + v + '"' + b + ">" + w + "</a></li>"
}
}
}
}
}
s.innerHTML = c += "</ul>" + y;
d.callBack()
};
randomRelatedIndex = h;
showRelatedPost = g;
j(d.homePage.replace(/\/$/, "") + "/feeds/posts/summary" + e + "?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex")
})(window, document, document.getElementsByTagName("head")[0]);
//]]>
</script>
</b:if>

Bước 2 : Chèn đoạn code dưới đây vào vị trí bạn muốn hiển thị tiện ích. Theo mình vị trí hợp lí là ở phía dưới bài viết, tức là chèn vào phía dưới thẻ <div class='post-footer'>

<div class='related-post' id='related-post'/>
  <script type='text/javascript'>
  var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
  "<data:label.name/>"<b:if cond='data:label.isLast != "true"'>,</b:if>
  </b:loop></b:if>];
  var relatedPostConfig = {
  homePage: "<data:blog.homepageUrl/>",
  widgetTitle: "<h4>Related Posts :</h4>",
  numPosts: 5,
  summaryLength: 100,
  titleLength: "auto",
  thumbnailSize: 60,
  noImage: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1NksjHamBO2GWnEYmJo4uTieqyseH-XPGjPnOwc-aP2QfjIfYp1596kqUx8PrC0lkkBLBJGrCUEVl7jhchUAaOdT6rdBEmpMRnYvM1Auftt-6BvFKaN6CHlvYnUnPM_SFNKFY_zA7xPmT/w60-c-h60/no-image.png",
  containerId: "related-post",
  newTabLink: false,
  moreText: "Read More...",
  widgetStyle: 2,
  callBack: function() {}
  };
  </script>

Điều chỉnh :

numPosts : Số bài viết hiển thị
summaryLength : Số kí tự của nội dung trích dẫn
titleLength : Chiều dài tiêu đề ( không khuyến kích điều chỉnh )
thumbnailSize : Kích thước hình ảnh
noImage : Hình ảnh mặc định khi bài viết không có hình ảnh
moreText : Đường link đọc thêm. Thay Read More bằng Đọc thêm, Đọc tiếp hay gì gì đó

Bước 3: Tùy chỉnh giao diện của tiện ích bằng cách thêm đoạn code CSS dưới đây vào trên thẻ ]]></b:skin>. Đây là đoạn CSS mình sử dụng trong Demo phía bên trên, các bạn hoàn toàn có thể chỉnh sửa lại nếu không thích

.related-post {
padding-bottom: 10px;
margin-top: 10px;
border-bottom: 1px solid #e3e3e3;
}
.related-post ul {
padding: 0;
}
.related-post-item-thumbnail {
float: left;
margin-right: 8px;
}
.related-post-item-title {
display: block;
font-weight: 700;
color: #111;
font-size: 14px;
margin-bottom: 4px;
}

Bước 4 : Save template lại.

Lời kết : Tiện ích bài đăng liên quan không những góp phần giúp bạn SEO tốt cho Blog mà còn tăng đáng kể lượt xem bài viết trên Blog. Chính vì những ưu điểm đó, các bạn nên thêm ngay tiện ích này vào Blog của mình. Bài viết trên đây chưa khai thác hết toàn bộ các tính năng của mẫu tiện ích này, mà chỉ khai thác các tính năng cơ bản. Bạn nào có khả năng thì có thể tự nghiên cứu thêm. Chúc các bạn thành công

Chủ Nhật, 10 tháng 4, 2016

Hướng dẫn tạo khung thông tin tác giả ( Author Box ) cho Blogger

By : mrtienhp97

Chủ Nhật, tháng 4 10, 2016 thủ thuật blogger

Khung thông tin tác giả ( Author Box ) là một widget nhỏ nhưng khá hữu ích, nó giúp người đọc có thể dễ dàng tìm thấy thông tin về tác giả bài viết.

Một số đặc điểm nổi bật

Dễ dàng sử dụng
Responsive.
Button mạng xã hội.
Giao diện đơn giản.

Hướng dẫn tạo khung thông tin tác giả ( Author Box ) cho Blogger

Bước 1 : Thêm đoạn code sau vào phía trên thẻ </head>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

Mình sẽ sử dụng FontAwesome để tạo icon cho mạng xã hội, nên nếu bạn nào chưa thêm FontAwesome vào Blog thì thêm vào nhé.

Bước 2 : Thêm đoạn code dưới đây vào phía sau thẻ <div class='post-footer'> hoặc bất kì chỗ nào bạn muốn để khung tác giả

<div class="post-author-box">
<div class='post-author-box-content'>
<div class="post-author-box-image">
<img alt="" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidrrla5wRDXfwde8nhGRz2nCZfIywOmJJ-NGyDrsc4b-XTEH0JUwuBPKQecAIEG1S8XPK1a2f5_IYDhOMsFdD4ag75i0hlwteQR3W1-ltaU-hfiXb9gzVMBgve7oaIz_bQE7MTLacPGdXD/s1600/business_Fotolia-Subscription-Monthly_145K.jpg" width="100">
</div>
<div class="post-author-box-name">
<h4>Nguyễn Quang Tiến</h4>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
</div>
</div>
<div class='post-author-box-social'>
<a href='#'><i class="fa fa-facebook"></i></a>
<a href='#'> <i class="fa fa-twitter"></i></a>
<a href='#'> <i class="fa fa-google-plus"></i></a>
<a href='#'> <i class="fa fa-linkedin"></i></a>
<a href='#'><i class="fa fa-pinterest"></i></a>
</div>
</div>

Các bạn chỉnh sửa lại các thông tin về tác giả và đường link mạng xã hội cho đúng

Bước 3 : Thêm đoạn code dưới đây vào trên thẻ ]]></b:skin>

.post-author-box-content {border : 1px solid #11A3D4;min-height:100px;padding:15px;border-bottom:none;color:#2D3438;}
.post-author-box-image img {float:left;border-radius:50%;margin-right:35px;width:100px;height:100px;}
.post-author-box-name h4 {color:#11A3D4;font-wight:bold;font-size:20px;margin-top:10px;margin-bottom:0;}
.post-author-box-social {clear:both;background-color:#11A3D4;padding:10px 15px;color:#fff;font-size:20px;}
.post-author-box-social a {margin-right:10px;color:#fff;}
@media screen and (max-width:640px) {
.post-author-box {text-align:center;}
.post-author-box-image img {float:none;margin:0 auto;}
}

Cuối cùng Save template lại. Chúc các bạn thành công

Thứ Sáu, 8 tháng 4, 2016

Cách thêm button chia sẻ mạng xã hội cho Blogger

By : mrtienhp97

Thứ Sáu, tháng 4 08, 2016 thủ thuật blogger

Button chia sẻ mạng xã hội ( Social Share Button ) là một widget cần thiết mà mọi Blog nên có. Đây là một cách thức hiệu quả và miễn phí để tăng truy cập cho Blog. Khi người đọc tìm được một thông tin, một bài viết hữu ích trên Blog của bạn, họ sẽ muốn chia sẻ nó lên mạng xã hội và đã gián tiếp quảng bá cho Blog của bạn.

Bài viết này mình sẽ hướng dẫn các bạn cách thêm button chia sẻ mạng xã hội vào Blogger cụ thể, là vào phần bài viết.

Demo

Bước 1 : Thêm đoạn code sau vào phía trên thẻ </head>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

Mục đích của việc này là chúng ta sẽ sử dụng Font Awesome để tạo các icon, biểu tưởng mạng xã hội

Bước 2 : Thêm đoạn code dưới đây vào vị trí bạn muốn hiển thị button

<a expr:href='"http://twitter.com/share?url=" + data:post.url' rel='nofollow' target='_blank' title='Twitter Tweet' class="icon-button twitter"><i class="fa fa-twitter"></i><span></span></a>

<a expr:href='"http://www.facebook.com/sharer.php?u=" + data:blog.url' rel='nofollow' target='_blank' title='Facebook Share' class="icon-button facebook"><i class="fa fa-facebook"></i><span></span></a>

<a expr:href='"http://plus.google.com/share?url=" + data:blog.url' rel='nofollow' target='_blank' title='Google Plus Share' class="icon-button google-plus"><i class="fa fa-google-plus"></i><span></span></a>

<a expr:href='"http://www.linkedin.com/shareArticle?mini=true&amp;url=" + data:post.url + "&amp;title=" + data:post.title + "&amp;summary=" + data:post.snippets' target='_blank' class="icon-button linkedin "><i class="fa fa-linkedin"></i><span></span></a>

<a expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&amp;media=" + data:post.thumbnailUrl + "&amp;description= + data:post.title"' target='_blank' class="icon-button pinterest "><i class="fa fa-pinterest-p"></i><span></span></a>

Nếu bạn muốn hiển thị phía dưới tiêu đề bài viết thì thêm đoạn code trên vào sau thẻ <div class='post-header'>
Nếu bạn muốn hiển thị phía cuối bài viết thì thêm đoạn code trên vào sau thẻ <div class='post-footer'>

Bước 3 : Thêm đoạn code vào trên thẻ ]]></b:skin> để thấy hiệu ứng

.icon-button{background-color:#fff;border-radius:40px;cursor:pointer;display:inline-block;font-size:26px;height:40px;line-height:40px;margin:0 5px;position:relative;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:40px}

.icon-button span{border-radius:0;display:block;height:0;left:50%;margin:0;position:absolute;top:50%;-webkit-transition:all 0.4s;-moz-transition:all 0.4s;-o-transition:all 0.4s;transition:all 0.4s;width:0}

.icon-button:hover span{width:40px;height:40px;border-radius:40px;margin:-20px}

.icon-button:hover i{transform:rotate(360deg)}

.twitter span{background-color:#4099ff}

.facebook span{background-color:#3B5998}

.google-plus span{background-color:#db5a3c}

.linkedin span{background-color:#0976b4}

.pinterest span{background-color:#cc2127}

.icon-button i{background:none;color:white;height:40px;left:0;line-height:40px;position:absolute;top:0;-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s;width:40px;z-index:10}

.icon-button .fa-twitter{color:#4099ff;border:1px solid #4099ff;border-radius:40px}

.icon-button .fa-facebook{color:#3B5998;border:1px solid #3B5998;border-radius:40px}

.icon-button .fa-google-plus{color:#db5a3c;border:1px solid #db5a3c;border-radius:40px}

.icon-button .fa-linkedin{color:#0976b4;border:1px solid #0976b4;border-radius:40px}

.icon-button .fa-pinterest-p{color:#cc2127;border:1px solid #cc2127;border-radius:40px}

.icon-button:hover i{color:white;border:none}

Lưu lại

Vậy là OK, giờ các bạn F5 lại Blog để xem thành quả, nếu có vướng mắc gì hãy để lại comment để được giúp đỡ. Chúc các bạn thành công

Thứ Sáu, 19 tháng 8, 2016

Tạo button "Back to Top" cho Blogspot

Thứ Hai, 13 tháng 6, 2016

Chủ Nhật, 5 tháng 6, 2016

1. SEO Onpage

2. Viết bài chuẩn SEO và chất lượng

3. SEO Offpage

Thứ Tư, 25 tháng 5, 2016

Thứ Hai, 23 tháng 5, 2016

Hướng dẫn cách tạo trang 404 cho Blogger

Thứ Bảy, 21 tháng 5, 2016

Thứ Hai, 16 tháng 5, 2016

Tối ưu hóa file robots.txt cho Blogger chuẩn SEO

Thứ Ba, 10 tháng 5, 2016

Cách tạo Sitemap cho Blogger và submit lên Google

Thứ Năm, 5 tháng 5, 2016

Thêm tiện ích Email Subscribe cho Blogger

Thứ Tư, 4 tháng 5, 2016

Thứ Bảy, 30 tháng 4, 2016

Recent Post có thumbnail cho Blogger

Thứ Sáu, 29 tháng 4, 2016

Tiện ích bài đăng liên quan cho Blogger

Chủ Nhật, 10 tháng 4, 2016

Hướng dẫn tạo khung thông tin tác giả ( Author Box ) cho Blogger

Thứ Sáu, 8 tháng 4, 2016

Liên kết hữu ích

Bài đăng phổ biến

Archive