Modul Desain Web Google Site

MODUL
 12
 
 


 

Halaman
 Kontak
 

Halaman
  kontak
  sangat
  penting
  fungsinya
  sebagai
  sarana
  untuk
  saling
 
komunikasi
  antara
  sekolah
  dengan
  netizen
  yang
  ingin
  tahu
  lebih
  jauh
  tentang
 
sekolah
 kita.
 Pada
 umumnya
 halaman
 ini
 berisi
 tentang
 :
 

1. Kontak
 person
 di
 sekolah
 yang
 dapat
 di
 hubungi
 biasanya
 Kepala
 TU
 atau
 
Kepala
 Sekolah
 langsung
 

2. Nomor
 telepon
 sekolah
 yang
 dapat
 di
 hubungi
 
3. Nomor
 mobile
 yang
 bisa
 SMS,
 atau
 WA
 
4. Alamat
 lengkap
 website
 sekolah
 
5. Alamat
 lengkap
 sekolah
 jika
 ingin
 berkunjung
 ke
 skolah
 
6. Alamat
 e-­‐mail
 sekolah
 
7. Dan
 hal
 lainnya
 yang
 berkaitan
 dengan
 informasi
 sekolah
 

 
Berikut
 ini
 langkah
 untuk
 membuat
 halaman
 sekolah
 tersebut
 :
 
1. Klik
  menu
  halaman
  (pages)
  pada
  sebelah
  kanan
  kemudian
  klik
  tanda
 

tambah
 untuk
 membuat
 halaman
 baru,
 pilihan
 halaman
 baru.
 

 

 

 

 

 

 

 

 

 

 

 
Kemudian
  pilih
  halaman
  baru
  untuk
  membuat
  halaman
  kegiatan,
 
ketikkan
 nama
 halaman
 yaitu
 Kontak.
 


  Modul
 Google
 Sites
 
  51
 

 
 

2. Lemudian
  buatkan
  layout
  dan
  atur
  tampilannya
  sesuai
  dengan
 

kebutuhan.
 Contohnya
 seperti
 di
 bawah
 ini.
 


 


 


 


 


 


 


 


 


 


 


 


 


 


 


 


 


 
 

TUGAS
 
 


 


 

Tugas
  kalian
  pada
  halaman
  ini
  adalah
  membuat
  halaman
  kontak
  yang
 

sesuai
  dengan
  kondisi
  sekolah
  kalian
  masing-­‐masing.
  Kemudian
  lakukan
 

pengaturan
  semestinya
  sesuai
  dengan
  yang
  kalian
  inginkan.
  Jika
 

informasi
  dari
  sekolah
  kurang
  lengkap
  kalian
  dapat
  melengkapi
  dengan
 

informasi
 yang
 kalian
 dapatkan
 dari
 berbagi
 sumber
 yang
 ada
 di
 sekolah,
 

misalnya
 TU,
 Satpam,
 Orang
 tua
 atau
 guru
 kalian.
 

Jikada
 jadi
 contohnya
 seperti
 di
 bawah
 ini.
 


 


 


 


 


  Modul
 Google
 Sites
 
  52
 

 
 

 


 


 


 


 


 


 


 


 


 


 


 


 


 


 


 


 


 

PERTANYAAN
 
 

 


 

1. Jelaskan
 tujuan
 pembuatan
 halaman
 kontak
 pada
 sebuah
 website
 ?
 

2. Jelaskan
 langkah-­‐langkah
 dalam
 pembuatan
 halaman
 kontak
 tersebut
 

sesuai
 dengan
 yang
 kalian
 buat
 ?
 


 


 


 


 


 


 


 


 


 


  Modul
 Google
 Sites
 
  53
 

 
 

MODUL
 13
 
 


 


 

Menambahkan
 Placeholder
 

Placeholder merupakan atribut pada HTML yang mendeskripsikan
singkat pada kolom input agar sesuai format yang diinginkan.

Placeholder bukan merupakan value dari kolom input tersebut,
melainkan placeholder akan hilang dengan sendirinya saat kita mulai
mengetik dalam kolom input tersebut.

Pada google sites Placeholder dapat berupa :

• Upload dari komputer berupa video, gambar

• Pilih gambar yang berasal dari drive kita, google atau URL

• Dari Drive, berarti mengambil gambar atau video dari drive kita

• YoutTube, mengambil link youtube

• Kalender sesuai dengan kalender online

• Peta, berupa peta lokasi


 


 

 

 

 

 

 

 

 


  Modul
 Google
 Sites
 
  54
 

 
 

Placeholder letaknya dapat kita sesuai kebutuhan dengan cara
drag and drop. Dalam satu halaman kita dapat mengatur lebih
dari satu placeholder sesuai dengan kebutuhan. Dengan
menggunakan placehorder maka tata letak atau layout halaman
akan lebih mudah untuk ditata dan tampilan akan lebih menarik.

Berikut ini langkah-langkah menambahkan placeholder pada
halaman web,
1. Buka Halaman muka, pada menu sebelah kanan pilih

Placeholder.


 

 
2. Selanjutnya
  klik
  menu
  tambah,
  untuk
  memasukkan
  gambar
  atau
 

video
 pada
 placeholder.
 Pilih
 YouTube
 untuk
 memasukkan
 youtube.
 
3. Ketikkan
 alamat
 link
 youtube
 yang
 akan
 dimasukkan,
 jika
 belum
 tahu
 

dapat
 mengetikkan
 key
 word
 atau
 kata
 kuncinya.
 


  Modul
 Google
 Sites
 
  55
 

 

 

 

 

4. Setelah
  ketemu
  video
  yang
  diinginkan
  klik
  Pilih,
  maka
  secara
 

otomatis
 video
 tersebuat
 akan
 tampil
 pada
 halaman
 website
 kita.
 


 


 


 


 


 


 


 


 


 


 


 


 


 

TUGAS
 
 
 

 


 

Setelah
  kalian
  dapat
  menambahkan
  placeholder
  berupa
  video
  dari
 

link
  youtube,
  selanjutnya
  kalian
  diberikan
  tugas
  untuk
 

menambahkan
  placeholder
  berupa
  gambar
  dari
  komputer
  kalian
  tau
 

dari
 drive
 kalian
 masing-­‐masing.
 

Jika
  sudah
  selesai
  maka
  aturlah
  posisi
  placeholder
  tersebut
  seperti
 

contoh
 di
 bawah
 ini.
 

Jika
  mengalami
  kesulitan
  dalam
  membuatnya
  kalian
  dapat
  diskusi
 

dengan
 teman
 atau
 guru
 kalian.
 Selamat
 mencoba.
 


 


 


 


 


 


 


  Modul
 Google
 Sites
 
  56
 

 
 

 


 


 


 


 


 


 


 


 


 


 


 


 


 


 


 


 


 

PERTANYAAN
 
 

 


 


 

1. Jelaskan
 pengertian
 placeholder
 ?
 

2. Jelaskan
 cara
 menambahkan
 placeholder
 berupa
 youtube
 ?
 

3. Jelaskan
 cara
 menambahkan
 placeholder
 berupa
 gambar
 ?
 


 


 


 


 


 


 


 


 


  Modul
 Google
 Sites
 
  57
 

 
 

MODUL
 14
 
 

 


 

Komponen
 Tambahan
 Google
 Site
 

Selain placeholder yang sudah di bahas di atas goolge site
mempunyai beberapa komponen untuk melengkapi desain website
yang sedang kita rancang.

Beberapa komponen yang dapat kita tambahkan dalam website yang
sedang kita rancang seperti :

• Carousel gambar è menyimpan galeri gambar minimal dua
gambar yang selanjutnya untuk melihat gambar kita dapat
menggunakan tanda panah kanan dan kiri untuk menggeser
gambarnya.

• Tombol è tombol atau button ini digunakan untuk
menambahkan tombol atau button sebagai link

• Garis pemisah è digunakan untuk membuat garis pemisah
pada halaman website.

Pada modul kali ini kita akan menambahkan salah satu komponen
pada website yaitu carousel gambar kita akan menempatkan
bebera gambar kegitan dalam satu tempat dengan menggunakan
carousel gambar.

Berikut ini langkah-langkahnya :

1. Buka google site yang sedang kalian kerjakan melalui
www.sites.goolge.com

2. Kemudian pilih halaman Kegiatan untuk menempatkan
gambar-gambar tersebut.

3. Kemudian klik menu carousel gambar pada sebelah kira dari
halaman site anda.


  Modul
 Google
 Sites
 
  58
 

 
 

4. Kemudian klik tanda + pada sisipkan gambar, kmedian upload
gambarnya ke dalam area tersebut. Kalian minimal harus
upload lebih dari 1 gambar agar fungsi tanda panahnya
bekerja.

5. Hasil penambahan gambarnya seperti di bawah ini :

6. Kemudian klik sisipkan, hasilnya seperti di bawah ini. Untuk
melihatnya kalian haru klik preview pada bagian atas. Akan
ada tampilan panah ke kanan dan kiri


  Modul
 Google
 Sites
 
  59
 

 
 

7. Untuk penempatan kalian tinggan lakukan drag and drop
sesuai dengan kebutuhan kalian.

TUGAS
 
 

Tugas kalian pada modul ini adalah menambahkan gambar pada
carousel gambar sebanyak minimal 5 buah agar tampilan website
kalian lebih keren.


 


 


 


 


 


 


 

PERTANYAAN
 
 

 


 

1. Sebutkan
 komponen
 tambahan
 pada
 google
 site
 yang
 anda
 ketahui
 ?
 

2. Jelaskan
  langkah-­‐langkah
  menambahkan
  komponen
  carousel
  gambar
  pada
 

google
 site
 ?
 


 


  Modul
 Google
 Sites
 
  60
 

 
 

MODUL
 15
 
 


 

Membuat
 Olshop
 dengan
 Google
 Sites
 

Google
  sites
  dapat
  juga
  kita
  manfaatkan
  untuk
  berbisnis
  dengan
  cara
 
membangun
  toko
  online
  (Olshop).
  Dengan
  segala
  keterbatasannya
  kita
  masih
 
bisa
  memanfaatkan
  fasilitas
  yang
  ada
  di
  Google
  Sites.
  Karena
  Gogle
  Sites
  yang
 
sifatnya
 statis
 tentu
 saja
 kita
 harus
 pandai
 untuk
 membuat
 trik
 agar
 olshop
 tetap
 
bisa
 berjalan.
 

Untuk
  proses
  transaksi
  kita
  bisa
  memanfaatkan
  fasilitas
  pada
  WA
 
(Whatsapp)
  sehingga
  bisa
  langsung
  transaksi
  dan
  nego
  harga,
  termasuk
  proses
 
pengiriman
 dan
 ongkos
 kirimnya.
 

Langkah-­‐langkah
 yang
 perlu
 kita
 siapkan
 adalah
 :
 
1. Menyiapkan
  gambar
  pendukung
  untuk
  olshop
  (usahakan
  fokus
 

pada
  satu
  bidang
  usaha
  terlebih
  dahulu
  agar
  mudah
 
pengelolaannya).
 
2. Persiapkan
  harga
  jual
  untuk
  masing-­‐masing
  barang
  yang
  akan
 
dijual.
 
3. Siapkan
 nomor
 WA
 yang
 digunakan
 untuk
 proses
 transaksi.
 
4. Buatlah
 desainnya
 yang
 menarik
 agar
 pembeli
 merasa
 tertarik
 dan
 
menikmati
 halaman
 (sites)
 yang
 kalian
 buat
 sehingga
 terjadi
 proses
 
transaksi.
 

 
Bagiamana
  cara
  membuat
  olshop
  dengan
  Goolgle
  sites
  berikut
  ini
  langkah-­‐
langkahnya
 :
 

1. Buka google site yang sedang kalian kerjakan melalui

www.sites.goolge.com

2. Buatlah
  Site
  baru
  dengan
  klik
  menu
  +
  sehingga
  muncul
  halaman
  sites
 
baru.
 

3. Lakukan
 pengaturan
 untuk
 header,
 judul,
 logo,
 dan
 nama
 situs.
 
4. Lakukan
  pengaturan
  pada
  header
  termasuk
  pemilihan
  tema
  dan
 

penggantian
 gambar
 pada
 header.
 


  Modul
 Google
 Sites
 
  61
 

 
 

 


 

 

 

 

 

 
5. Tambahkan
  layout
  atau
  tataletak
  dibawah
  header
  tersebut,
  misalnya
 
seperti
 di
 bawah
 ini.
 
6. Tambahkan
  gambar
  pada
  masing-­‐masing
  layout
  dan
  berikan
  harganya
 
untuk
 memudahkan
 pengunjung
 melihat
 barang
 dan
 harga.
 

 

 

 

 

 

 

 

 

 

 

 

 
7. Seakarang
  tambahkan
  garis
  pembatas
  antara
  daftar
  barang
  yang
  diatas
 
tadi
 dengan
 tampilan
 bawahnya.
 Sehingga
 kelihatan
 ada
 pemisahnya.
 
8. Dibawah
  garis
  pembatas
  tambahkan
  teks
  yang
  isinya
  “Untuk
  pembelian
 
silahkan
 klik
 link
 di
 bawah
 ini”.
 
9. Jadi
  untuk
  proses
  pembelian
  pengunjung
  dapat
  chat
  langsung
  dengan
 
nomor
 WA
 penjualnya.
 
 
10. Di
  bawah
  teks
  tersebut
  tambahkan
  gambar
  keranjang
  belanja
  dengan
 
upload
 dari
 komputer
 atau
 pilih
 gambar
 dari
 google.
 

 


  Modul
 Google
 Sites
 
  62
 

 
 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 
11. Dibawah
  kerangjang
  belanja
  tambahkan
  teks
  lagi
  “Klik
  disini
  untuk
 
belanja”.
 
12. Teks
  ini
  akan
  kita
  jadikan
  link
  untuk
  chat
  dengan
  penjual,
  caranya
  blok
 
teks
 tersebut
 kemudian
 klik
 menu
 Sisipkan
 link.
 

 

 

 

 

 

 

 

 
13. Untuk
 linknya
 dalah
 :
 https://api.whatsapp.com/send?phone=62
 ………
 

 

 

 

 

 


  Modul
 Google
 Sites
 
  63
 

 
 

14. Agar
  tampilan
  lebih
  menarik
  lagi
  pada
  bagian
  bawah
  tambahkan
  footer
 
yang
 berisi
 copyright.
 

15.
 Klik
 footer
 paling
 bawah
 kemudian
 tambahkan
 isikan
 copyright
 misalnya
 
seperti
 di
 bawah
 ini
 copyright
 tokorolshop©
 2021.
 

16. Selanjutnya
  adalah
  menambahkan
  halaman
  “Tentang
  Kita”,
  klik
  menu
 
Halaman
 kemudian
 klik
 tanda
 +
 ,
 ketikkan
 judulnya
 Tentang
 Kita.
 

17. Tambahkan
 teks
 dan
 isikan
 Tentang
 Kita,
 contohnya
 seperti
 di
 bawah
 ini.
 

 

 

 

 

 

 

 

 

 

 

 

 

Untuk
 melihat
 hasilnya
 secara
 penuh
 silahkan
 klik
 menu
 Preview
 atau
 Pratinjau,
 
kalian
  bia
  memilih
  tampilan
  HP
  atau
  Komputer.
  Dibawah
  ini
  adalah
  tampilan
 
model
 HP.
 


  Modul
 Google
 Sites
 
  64
 

 
 

PERTANYAAN
 
 


 

1. Jelaskan
 cara
 menambahkan
 link
 ke
 WA
 penjual
 ?
 


 

2. Bagiamana
 cara
 menambahkan
 harga
 pada
 barang,
 jelaskan
 ?
 


 

3. Jelaskan
 cara
 membuat
 footer
 pada
 google
 sites
 tersebut
 ?
 


 

4. Jelaskan
 cara
 menambahkan
 garis
 pemisah
 pada
 olshop
 di
 atas
 ?
 


 

5. Ada
 berapa
 tampilan
 pada
 Pratinjau
 untuk
 google
 sites
 tersebut,
 sebutkan
 

dan
 jelaskan
 ?
 


 


  Modul
 Google
 Sites
 
  65
 

 
 

MODUL
 16
 
 

 

 


  Modul
 Google
 Sites
 
  66