Membuat Linktree Menggunakan Apps Script (Spreadsheet)

1. Copy Spreadsheet (Klik di sini)

2. Pada file Spreadsheet di atas, terdapat 1 sheet Data dan 3 kolom yang bisa anda isi dengan Judul dan Url sesuai kebutuhan.

3. Buatlah lembar kerja Apps Script, dengan cara klik menu Ekstensi/Extensions lalu pilih Apps script.

4. Terdapat 3 file default yaitu :

Code.gs

Index.html

JavaScript.html

Dan terdapat 1 API Google sheet.

5. Copy dan pastekan script di bawah ini ke Code.gs

*Untuk Mendapatkan Full Script tanpa password silahkan Klik Disini*

Masukkan Password Untuk Melihat Script (Password ada di dalam video)

/*
# URL: https://www.javabitpro.com
*/

function doGet() {
  return HtmlService.createTemplateFromFile('Index').evaluate();
}
function getData() {
  var spreadSheetId = "1rXFNLS55IVF259LP1bFryaq0Qf-4gHr7-lDFOJAx0kU"; //CHANGE
  var dataRange = "Data!A2:C"; //CHANGE

  var range = Sheets.Spreadsheets.Values.get(spreadSheetId, dataRange);
  var values = range.values;

  return values;
}
function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
    .getContent();
}

PENJELASAN :

Line 9 : Sesuaikan ID Spreadsheet dengan ID Spreadsheet anda.

Line 10 : Sesuaikan Data Range yang akan digunakan.

6. Copy dan pastekan script di bawah ini ke Index.html

Masukkan Password Untuk Melihat Script (Password sama dengan di atas)

<html lang="en">  
<head>  
  <title> Linktree Apps Script </title>  
  <meta charset="utf-8">  
  <meta name="viewport" content="width=device-width, initial-scale=1">  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"> </script>  
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"> </script>  
  <link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">   
  <script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"> </script>  
   <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" >  
   <link href="https://cdn.datatables.net/responsive/2.4.0/css/responsive.dataTables.min.css" rel="stylesheet" >  
   <?!= include('JavaScript'); ?><!--INCLUDE JavaScript.html FILE-->
</head>  

<style>  
body {  
  min-height: 100vh;  
 background-color: #FFE53B;  
  background-image: linear-gradient(147deg, #FFE53B 0%, #FF2525 100%);  
}  
.table {  
  border-spacing: 0 0.85rem !important; 
  text-align: center; 
}  
.table .dropdown {  
  display: inline-block;  
}  
.table td  
{  
  vertical-align: middle;  
  margin-bottom: 10px;  
  border: none;  
}  
.table th {  
  vertical-align: middle;  
  margin-bottom: 10px;  
  border: none;  
}  
.table thead tr {  
  border: none;  
  font-size: 12px;  
  letter-spacing: 1px;  
  text-transform: uppercase;  
  background: transparent;  
  
}  
.table thead th {  
  border: none;  
  font-size: 12px;  
  letter-spacing: 1px;  
  text-transform: uppercase;  
  background: transparent;  
}  
.table td {  
  background: #fff;  
}  
.table td:first-child {  
  border-top-left-radius: 10px;  
  border-bottom-left-radius: 10px;  
}  
.table td:last-child {  
  border-top-right-radius: 10px;  
  border-bottom-right-radius: 10px;  
}  

table.dataTable.dtr-inline.collapsed  
  > tbody  
  > tr[role="row"]  
  > td:first-child:before,  
table.dataTable.dtr-inline.collapsed  
  > tbody  
  > tr[role="row"]  
  > th:first-child:before {  
  top: 28px;  
  left: 14px;  
  border: none;  
  box-shadow: none;  
}  
table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > td:first-child  
{  
  padding-left: 48px;  
}  
table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > th:first-child {  
  padding-left: 48px;  
}  
table.dataTable > tbody > tr.child ul.dtr-details {  
  width: 100%;  
}  
table.dataTable > tbody > tr.child span.dtr-title {  
  min-width: 50%;  
}  
table.dataTable.dtr-inline.collapsed > tbody > tr > td.child,  
table.dataTable.dtr-inline.collapsed > tbody > tr > th.child,  
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dataTables_empty {  
  padding: 0.75rem 1rem 0.125rem;  
}  
div.dataTables_wrapper div.dataTables_length label,  
div.dataTables_wrapper div.dataTables_filter label {  
  margin-bottom: 0;  
}  
  
@media (max-width: 767px) {  
  div.dataTables_wrapper div.dataTables_paginate ul.pagination {  
    -ms-flex-pack: center !important;  
    justify-content: center !important;  
    margin-top: 1rem;  
    color: #fff;
  }  
}  
.btn-icon {  
  background: #fff;  
}  
.btn-icon .bx {  
  font-size: 20px;  
}  
.btn .bx {  
  vertical-align: middle;  
  font-size: 20px;  
}  
.dropdown-menu {  
  padding: 0.25rem 0;  
}  
.dropdown-item {  
  padding: 0.5rem 1rem;  
}  
.badge {  
  padding: 0.5em 0.75em;  
}  
.badge-success-alt {  
  background-color: #fff;  
  color: #7bd235;  
}  
.table a {  
  color: #212529;  
}  
.table a:hover,  
.table a:focus {  
  text-decoration: none;  
}  
table.dataTable {  
  margin-top: 12px !important;  
}  
.icon > .bx {  
  display: block;  
  min-width: 1.5em;  
  min-height: 1.5em;  
  text-align: center;  
  font-size: 1.0625rem;  
}  

.btn {  
  font-size: 0.9375rem;  
  font-weight: 500;  
  padding: 0.5rem 0.75rem;  
}  
.avatar-blue {  
      background-color: #c8d9f1;  
      color: #467fcf;  
    }  
    .avatar-pink {  
      background-color: #fcd3e1;  
      color: #f66d9b;  
    }  h2 {
  text-align: center;
  
}

</style>  
<body>  
<div class="container">  
  <h2>Linktree Javabitpro</h2>
  <div class="row py-5">  
    <div class="col-12">  
      <table id="data-table" class="table table-hover responsive nowrap" style="width:100%">  
        
      </table>  
    </div>  
  </div>  
</div>  
<div class="container text-center">  
  <div class="row py-5">  
    <div class="col-12">  
          
    </div>  
  </div>  
</div>  
</body>  
</html>  .<!--Footer -->
  <style>.footer,.generic-footer{margin-bottom:98px}@media (min-width:52px){.footer,.generic-footer{margin-bottom:78px}}@media (min-width:52px){.footer,.generic-footer{margin-bottom:56px}}@media (min-width:52px){.footer,.generic-footer{margin-bottom:0}}.disclaimer{position:fixed;z-index:9999999;bottom:0;right:0;border-top:2px solid #ff5c62;text-align:center;font-size:14px;font-weight:400;background-color:#fff;padding:5px 10px 5px 10px}.disclaimer a:hover{text-decoration:underline}@media (min-width:52px){.disclaimer{text-align:right;border-left:2px solid red;border-top-left-radius:10px}}@media (min-width:1920px){.disclaimer{width:20%}}</style><div class="disclaimer">Version.02.25.23 @Copyright <a title="https://www.javabitpro.com/" target="_blank" href="https://www.javabitpro.com/" style="color: black;"><b>www.javabitpro.com</b></a></div>

7. Copy dan pastekan script di bawah ini ke JavaScript.html

Masukkan Password Untuk Melihat Script (Password sama dengan di atas)

<script>
  google.script.run.withSuccessHandler(showData).getData();

  function showData(dataArray){
    $(document).ready(function(){
      $('#data-table').DataTable({
        data: dataArray,
        order: [[0, 'asc']],
        columns: [
          {"title":"Nomor"},
          {"title":"Judul",visible: false,},
          {"title":"Data",
   "render": function(data, type, row, meta){
      if(type === 'display'){
         data = '<a target="_blank" href="' + data +  '">' + row[1] + '</a>';
         
       }
       
       return data;
       
    }
 }
          
        ]
      });
    });
  }
</script>