Hướng dẫn xuất dữ liệu bảng tính Google Sheets vào website wordpress hoặc blogspot

Bước 1: Chèn code javascript

<script src='https://code.jquery.com/jquery-1.9.1.js' type='text/javascript'/>  
<script src='https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.7/handlebars.min.js' type='text/javascript'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-sheetrock/1.0.1/dist/sheetrock.min.js' type='text/javascript'/>

Bước 2: Chèn code CSS

#PageCourse {line-height:45px;margin: 8px;}
#PageCourse .playlistcourse a:hover{color:#ff0000;text-decoration: none;}
#PageCourse li {list-style-type: decimal;border-bottom: 1px dotted #cccccc;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}

.colum-vietnam {position: relative; width: 30%;display: inline-block;}
.colum-china {position: relative; width: 17%;display: inline-block;}
.colum-eng {position: relative; width: 23%;display: inline-block;}
.colum-year {position: relative; width: 15%;display: inline-block;}
.colum-elo {position: relative; width: 10%;display: inline-block;}

Bước 3: Chèn code HTML vào bài viết

<div id="PageCourse">
	<script id="hr-template" type="text/x-handlebars-template">
      <li class="playlistcourse">
       <p class="colum-vietnam"><a href="{{cells.URLYTB}}" title="{{cells.NAMEVI}}" target="_blank">{{cells.NAMEVI}}</a></p>
        <p class="colum-china"><a href="{{cells.URLSEARCH}}" title="{{cells.NAMECHINA}}" target="_blank">{{cells.NAMECHINA}}</a></p>
        <p class="colum-eng">{{cells.NAMEENG}}</p>
        <p class="colum-elo">{{cells.ELO}}</p>
        <p class="colum-year">{{cells.YEAR}}</p>
      </li>
	</script>
</div>  

<script type="text/javascript">
var mySpreadsheet = 'https://docs.google.com/spreadsheets/d/1glyNkWrrlfbG_7ZOY8Fz4ZkPEJszkN6FMVKZkXTtOXw/edit#gid=0';
var HRTemplate = Handlebars.compile($('#hr-template').html());

$('#PageCourse').sheetrock({
  url: mySpreadsheet,
  query: "select B,C,D,E,F,G,H,I where I>=1",
  fetchSize: 1000,
  rowTemplate: HRTemplate
});
</script>

Tags: