Hướng dẫn hiển thị bài viết ra trang chủ blogspot chuẩn AMP

AMP HTML là một loại chuẩn của Google dành cho các trang web để hiển thị tốt hơn và có tốc độ load trang cực kỳ nhanh nhẹn trên thiết bị di động. Các website được khuyến nghị đi theo hướng AMP HTML để có một thứ hạng kết quả tìm kiếm tốt hơn, dự trong tương lai gần mọi website đều sẽ đi theo chuẩn này.
Các bạn Blogger thì sao ? Chúng ta đã có những template blogger chuẩn AMP sơ khai nhưng theo chuẩn này thì các thẻ "script" không được xuất hiện, vấn đề ở đây là làm sao để hiển thị bài viết theo label ở trang chủ blogger mà không bị báo lỗi đúng chuẩn AMP?

Công cụ cần thiết:

  • Một tài khoản ở Github
  • Một trang trang blogspot có sẵn chuẩn amp

Đầu tiên đăng ký một tài khoản tại Github.com, sau khi đăng ký và đăng nhập ta được như hình dưới:

Sau đó click vào New repository để tạo mới một chuyên mục, sau đó đặt tên theo ý thích (dễ nhớ), chọn Public và nhấn Create Repository. Đợi một tý hiện ra trang mới như hình dưới:

Các bạn click đại một cái nào đó giữa README và LISENSE tạo một văn bản đại gì đó cũng được, sau đó viết lung tung cũng được và lưu nó lại. Tiếp đến nhấn Create new file và dán code dưới vào:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Label</title> <meta content='width=device-width, initial-scale=1' name='viewport'> <style> /* post label amp by cuocsong.org */ body{background: #fdfdfd;margin: 0;padding: 0} @import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i'); img.label_thumb{ float:left; margin-right:10px !important; height:72px; /* Thumbnail height */ width:72px; /* Thumbnail width */ } .xt { background-repeat: no-repeat; border: medium none; bottom: 20px; cursor: pointer; display: none; height: 40px; outline: medium none; padding: 0; position: fixed; right: 20px; width: 100px; z-index: 9999; } .xemthem{ background-color : #fdfdfd; margin: 0px; padding-top : 10px; text-align: center; z-index:9999999999; } #label_with_thumbs { background:#ffffff; text-align: justify; font: normal; float: left; margin: 0; padding: 3px 3px 0 3px; border: 1px solid #e2e5eb; } ul#label_with_thumbs li { padding:8px 0; min-height:75px; background:#ffffff; margin:0; border-bottom: 1px solid #e2e5eb; } #label_with_thumbs li{ background:#ffffff; list-style: none ; padding:0 !important; } #label_with_thumbs a:visited { text-decoration: none; color: black;} #label_with_thumbs a:link { text-decoration: none; color: black;} #label_with_thumbs a { text-transform: none;} #label_with_thumbs a:hover { text-decoration: underline;padding:2px;} #label_with_thumbs strong {padding:2px;}</style> </head> <body> <script type='text/javascript'> //<![CDATA[ function labelthumbs(json){document.write('<ul id="label_with_thumbs">');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;} if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error) {s=entry.content.$t;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!="")){thumburl=d;}else thumburl='http://3.bp.blogspot.com/-zP87C2q9yog/UVopoHY30SI/AAAAAAAAE5k/AIyPvrpGLn8/s1600/picture_not_available.png';} var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Jan";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Apr";monthnames[5]="May";monthnames[6]="June";monthnames[7]="July";monthnames[8]="Aug";monthnames[9]="Sept";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";document.write('<li class="clearfix" >');if(showpostthumbnails==true) document.write('<a href="'+posturl+'" target ="_top"><img class="label_thumb" src="'+thumburl+'"/></a>');document.write('<strong><a href="'+posturl+'" target ="_top">'+posttitle+'</a></strong><br>');if("content"in entry){var postcontent=entry.content.$t;} else if("summary"in entry){var postcontent=entry.summary.$t;} else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==true){if(postcontent.length<numchars){document.write('');document.write(postcontent);document.write('');} else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('');}} var towrite='';var flag=0;document.write('<br>');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;} if(showcommentnum==true) {if(flag==1){towrite=towrite+' | ';} if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext='<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;} if(displaymore==true) {if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">More »</a>';flag=1;;} document.write(towrite);document.write('</li>');if(displayseparator==true) if(i!=(numposts-1)) document.write('');}document.write('</ul>');} //]]> </script> <script type='text/javascript'>var numposts = 5;var showpostthumbnails = true;var displaymore = false;var displayseparator = true;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 100;</script> <script type="text/javascript" src="https://www.cuocsong.org/feeds/posts/default/-/Tin%20tức?published&alt=json-in-script&callback=labelthumbs"></script> <div class="xemthem"><a href="https://www.cuocsong.org/search/label/Tin%20t%E1%BB%A9c?max-results=10" title="Xem thêm Tin tức" target="_top">Xem thêm...</a></div> </body> </html>

Thay lại cuocsong.org bằng link blog của bạn https://www.cuocsong.org/search/label/Tin%20t%E1%BB%A9c?max-results=10 thành link blog và tên Label của bạn. Nhấn lưu lại với tên gì cũng được và có .html. Sau đó nó lại về trang cũ, chọn file bạn vừa create bấm vào và chọn raw. Copy link raw.
Tiếp nữa chúng ta quay về trang bố cục blogger chọn nơi mà bạn muốn đặt code dưới:
<amp-iframe frameborder='0' layout='responsive' resizable='resizable' sandbox='allow-scripts allow-same-origin allow-modals allow-popups' src='Link bạn vừa copy sau khi nhấn raw' height="700" width="300"> </amp-iframe>

XONG ! quay trở lại trang chủ và xem thành quả thôi nào! Nhớ check luôn AMP để xem chuẩn chưa nhé ! Bạn nào làm chưa được hay chưa hiểu có thể comment bên dưới, mình sẽ chỉ dịu dàng cụ thể! Chúc các bạn thành công.