Kostumisasi Header & Footer

01. Langkah pertama

• Pilih halaman my website pada dashboard
• Pilih tombol “Edit” pada website yang akan diberi navigasi
• Pilih tab “Setting” 
• Pada bagian “Site Script” copy-paste script di bawah ini.
   

Script pembuatan tombol CTA terdiri dari dua pilihan script:

• Script untuk membuat satu tombol CTA 
• Kedua script untuk membuat dua tombol CTA

Script untuk satu tombol CTA

<script>
//Insert CTA Button into Header Navigation
document.getElementById('CTA-header-button').innerHTML= 
//===First CTA Button===
//==Component CTA Button==
('<a class="button primary small button--dark-label"')+

//==Link to CTA Button==
('href="#"')+

//==Set "_blank" open to New Tab or remove "_blank" open to Current Tab
('target="_blank">')+

//==CTA Button Label==
('<span>Button 1</span></a>');
//===End First CTA Button===
</script>

Script untuk membuat dua tombol CTA

<script>
//Insert CTA Button into Header Navigation
document.getElementById('CTA-header-button').innerHTML= 
//===First CTA Button===
//==Component CTA Button==
('<a class="button primary small button--dark-label"')+

//==Link to CTA Button==
('href="#"')+

//==Set "_blank" open to New Tab or remove "_blank" open to Current Tab
('target="_blank">')+

//==CTA Button Label==
('<span>Button 1</span></a>')+
//===End First CTA Button===
//===Second CTA Button===
//==Component CTA Button==
('<a class="button neutral small outline button--dark-label"')+

//==Link to CTA Button==
('href="#"')+

//==Set "_blank" open to New Tab or remove "_blank" open to Current Tab
('target="_blank">')+

//==CTA Button Label==
('<span>Button 2</span></a>');
//===End Second CTA Button===
</script>

document.getElementById('CTA-header-button').innerHTML=

Penjelasan tentang script diatas menunjukan bawha script yang dibuat untuk tombol CTA, akan diinput kedalam sebuah element HTML dengan nama “ID CTA-header-button” sebagai element utama. Secara default sebuah ID tidak bisa diganti dengan nama lain. Jika mencoba mengganti dengan nama lain, script diatas tidak akan berfungsi.

('<a class="button primary small button--dark-label"')+

Script diatas berfungsi untuk merubah style/variasi pada Tombol CTA. 
Jika ingin merubah style tombol CTA, pengguna hanya dapat merubah pada bagian berikut: 

Primary = Button Background Color (lwarna tombol)
Pengguna bisa merubah warna pada bagian ini

Small = Button Size (Ukuran Tombol)
pengguna bisa merubah dengan ukuran sebagai berikut: Small, Default & Large

Button--dark-label = Text Color (Warna Text)
Pengguna bisa merubah warna pada bagian ini

Outline = Untuk merubah warna tombol menjadi style Outline 
Contoh : ('<a class="button outline primary default button--dark-label"')

('<a class="button primary small button--dark-label"')+

Script diatas berfungsi untuk merubah style/variasi pada Tombol CTA. 
Jika ingin merubah style tombol CTA, pengguna hanya dapat merubah pada bagian berikut: 

Primary = Button Background Color (lwarna tombol)
Pengguna bisa merubah warna pada bagian ini

Small = Button Size (Ukuran Tombol)
pengguna bisa merubah dengan ukuran sebagai berikut: Small, Default & Large

Button--dark-label = Text Color (Warna Text)
Pengguna bisa merubah warna pada bagian ini

Outline = Untuk merubah warna tombol menjadi style Outline 
Contoh : ('<a class="button outline primary default button--dark-label"')

('href="#"')+

Script diatas bertujuan untuk memberi target agar bisa memberikan link yang terhubung dengan tombol CTA.
Penguna dapat merubah target dengan cara mengganti hastag (#) dengan link yang akan dituju.

Contoh: (‘href=”https://squareble.com”’)+

('target="_blank">')+

Script diatas berfungsi untuk menentukan aksi tombol CTA.
Jika pengguna tidak memberi aksi atau tidak ditulis apapun, maka link pada tombol CTA akan membuka link pada halaman yang sama, dan jika pengguna mengisi target dengan “_blank” maka link akan membuka halaman baru untuk link yang dituju.

Contoh : 
(‘target=” ”>’)+ —-> Link akan terbuka pada posisi halaman browser yang sama
(‘target=”_blank”>’)+ —-> Link akan terbuka pada halaman browser baru.

('<span>Button 1</span></a>');

The script above means you can change the text of the CTA Button. You posible change text “Button 1” only.
Example = (‘<span>Contact Us</span></a>’);