SlideShare a Scribd company logo
1 of 28
1
Pembuatan Website dengan
Google Site
2
Studi Kasus
X memiliki usaha catering penganan (snack)
tradisional. X biasa menerima pesanan melalui
telepon, sms atau akun facebook. X biasa menerima
pembayaran secara tunai atau transfer bank. X ingin
memasarkan usahanya lebih luas menggunakan media
website.
3
Tahap Perencanaan
● Sasaran pengguna
● Kebutuhan pengguna
● Peta website (sitemap)
● Sketsa tata letak website
● Tema website
● Pembuatan website
● Domain website
4
Sasaran Pengguna
● Kegiatan yang membutuhkan snack :
– Acara ulang tahun, syukuran, pernikahan  Rumah
Tangga
– Rapat, acara kebersamaan  Kantor / Perusahaan
– Acara lain : Umum
5
Kebutuhan Pengguna
● Kebutuhan pengguna :
– Menu snack (foto, deskripsi, harga .dll)
– Paket snack
– Kontak (telepon, email, alamat, social media .dll)
– Cara pemesanan & pembayaran
– Testimoni pelanggan
6
Peta Website (Sitemap)
Jajananenaksehat.tk
Menu Paket Testimoni
Cara
Pemesanan
& Pembayaran
KontakHome
Video
7
Tata Letak Website
8
Tema Website
● Tema (theme) yang dipilih sebaiknya :
– Sederhana tapi menarik
– Bisa menampung banyak informasi
– Teks nyaman dibaca segala usia
– Mudah digunakan (khusus navigasi)
9
Pembuatan Website (1)
● Buat website baru di Google Site
– Login di http://sites.google.com
– Klik Create
– Select template to use : Blank Template
– Name your site : Jajanan Sehat Enak
– Site location : [nama unik] contoh: yohanesgultom
– Type the code shown (validasi)
– Klik Create (di atas halaman)
10
11
Pembuatan Website (2)
● Page Home
– Klik Edit Page
– Ketikkan kata pembuka/pengantar
– Masukkan gambar : Insert > Image > Choose File
gambarhome.jpg > Click Picture > Click OK
– Setelah gambar masuk, click dan click button M
– Klik Save untuk menyimpan
12
13
Pembuatan Website (2)
● Halaman Menu
– Click New Page untuk membuat halaman baru
– Name your page : Menu
– Click Create
– Click Edit Page untuk mengedit halaman Menu
– Click Layout > Two Column (simple)
– Masukkan masing-masing 3 menu di tiap kolom (lihat
contoh)
14
15
Pembuatan Website (3)
● Halaman Paket
– Buat halaman baru dengan nama Paket
– Edit page, masukan tabel dengan cara klik Table > Inser
Table > 4x5
– Masukan data paket seperti contoh
– Masukan gambar paket1.jpg, paket2.jpg, paket3.jpg,
paket4.jpg di bawah tabel seperti contoh
16
17
Pembuatan Website (4)
● Halaman Video
– Buat halaman baru dengan nama Video
– Masukan video dengan cara Insert > Video > Youtube >
Copy-Paste link youtube
– Masukan dan susun 2 video ini di halaman Video :
● Cara Membuat Kue Lumpur
http://www.youtube.com/watch?v=WvR2z86HZu0
● Cara Membuat Brownies Kukus
http://www.youtube.com/watch?v=vVB860K0Mvs
18
19
Pembuatan Website (5)
● Halaman Hubungi Kami
– Buat halaman baru dengan nama Hubungi Kami
– Masukan peta dengan cara klik Insert > Map
– Ketik di Enter location : Raeburn Park Singapore dan tekan Enter
– Hapus placemark Raeburn Park dengan meng-klik tanda silang
dibawah search box (lihat gambar)
– Tambahkan placemark baru dengan meng-klik Drop a Placemark &
meng-klik titik di peta
– Klik Select untuk menyimpan
– Include title : Jajanan Sehat Enak
– Klik Save
20
21
22
Pembuatan Website (6)
● Menambah navigasi horizontal (horizontal navigation)
– Klik More > Edit Site Layout
– Klik button Horizontal Navigation
– Klik area horizontal navigation yang baru muncul di bawah
judul halaman
– Klik Add Page untuk menambahkan halaman Menu, Paket,
Video
– Pilih Style : Tabs
– Klik OK dan kemudian klik Close
23
24
Pembuatan Website (7)
● Mengubah tema, warna & font website
– Klik More > Manage Site
– Klik Themes, Colors and Fonts di menu sebelah kiri layar
(opsi paling bawah)
– Pilih Entire Page > Background > Color : masukkan
#FAF2A0
– Pilih Site Header > Title : ubah font menjadi Kavoon,
color Red (#ff0000), size 36pt
25
26
27
Domain Website
● Website yang dibuat di google site dapat diakses oleh publik
melalui http://sites.google.com/site/namawebsite
● Jika kita sudah memiliki domain kita dapat menggunakannya
sebagai alias untuk website kita
● Domain umum seperti .com .co.id .net .org dapat dibeli di website
seperti domainesia.com, masterweb.com, rumahweb.com .dll
● Harga domain berkisar Rp 85.000 – Rp 150.000 / tahun
● Tersedia juga domain gratis seperti .tk (www.dot.tk) .co.nr (
www.freedomain.co.nr) .dll
28

More Related Content

What's hot

PPT sejarah dan perkembangan internet
PPT sejarah dan perkembangan internetPPT sejarah dan perkembangan internet
PPT sejarah dan perkembangan internetWega Ory
 
Kisi kisi soal dasar desain grafis kelas xi multimedia
Kisi kisi soal dasar desain grafis kelas xi multimediaKisi kisi soal dasar desain grafis kelas xi multimedia
Kisi kisi soal dasar desain grafis kelas xi multimediaSMK MUhammadiyah Singkut
 
WEB 2.0 SLIDESHARE
WEB 2.0 SLIDESHAREWEB 2.0 SLIDESHARE
WEB 2.0 SLIDESHARESyiFha IFha
 
Modul perkenalan informatika x
Modul perkenalan informatika xModul perkenalan informatika x
Modul perkenalan informatika xk4m3h4t3
 
Rpl 10-perancangan user interface
Rpl 10-perancangan user interfaceRpl 10-perancangan user interface
Rpl 10-perancangan user interfacef' yagami
 
model model pengembangan media pembelajaran
 model model pengembangan media pembelajaran  model model pengembangan media pembelajaran
model model pengembangan media pembelajaran Dwi Karyani
 
Perangkat Pembelajaran Tematik SD Kelas V Tema 3 Subtema 2 Kurikulum 2013 Rev...
Perangkat Pembelajaran Tematik SD Kelas V Tema 3 Subtema 2 Kurikulum 2013 Rev...Perangkat Pembelajaran Tematik SD Kelas V Tema 3 Subtema 2 Kurikulum 2013 Rev...
Perangkat Pembelajaran Tematik SD Kelas V Tema 3 Subtema 2 Kurikulum 2013 Rev...Egha Rhiyanti Putri
 
instrumen lembar penilaian diri (sikap)
instrumen lembar penilaian diri (sikap)instrumen lembar penilaian diri (sikap)
instrumen lembar penilaian diri (sikap)Pristiadi Utomo
 
Pembelajaran Berbasis Masalah Matematika di SD
Pembelajaran Berbasis Masalah Matematika di SDPembelajaran Berbasis Masalah Matematika di SD
Pembelajaran Berbasis Masalah Matematika di SDNASuprawoto Sunardjo
 
Bijak bersosmed - tips dan informasi gerakan
Bijak bersosmed - tips dan informasi gerakanBijak bersosmed - tips dan informasi gerakan
Bijak bersosmed - tips dan informasi gerakanliterasi digital
 
Materi tik kelas X semester 1
Materi tik kelas X semester 1Materi tik kelas X semester 1
Materi tik kelas X semester 1Adonia Barnessa
 
Media Sosial: Manfaat dan Akibat
Media Sosial: Manfaat dan AkibatMedia Sosial: Manfaat dan Akibat
Media Sosial: Manfaat dan AkibatDamar Juniarto
 
Ms excel presentasi
Ms excel presentasiMs excel presentasi
Ms excel presentasiErvi Ervi
 
209299471 modul-blender
209299471 modul-blender209299471 modul-blender
209299471 modul-blenderdial860
 
Modul Informatika Berfikir Komputasional
Modul Informatika Berfikir KomputasionalModul Informatika Berfikir Komputasional
Modul Informatika Berfikir KomputasionalWildaCendana
 

What's hot (20)

PPT sejarah dan perkembangan internet
PPT sejarah dan perkembangan internetPPT sejarah dan perkembangan internet
PPT sejarah dan perkembangan internet
 
Kisi kisi soal dasar desain grafis kelas xi multimedia
Kisi kisi soal dasar desain grafis kelas xi multimediaKisi kisi soal dasar desain grafis kelas xi multimedia
Kisi kisi soal dasar desain grafis kelas xi multimedia
 
WEB 2.0 SLIDESHARE
WEB 2.0 SLIDESHAREWEB 2.0 SLIDESHARE
WEB 2.0 SLIDESHARE
 
Modul perkenalan informatika x
Modul perkenalan informatika xModul perkenalan informatika x
Modul perkenalan informatika x
 
Konsep dasar UI/UX
Konsep dasar UI/UXKonsep dasar UI/UX
Konsep dasar UI/UX
 
Rpl 10-perancangan user interface
Rpl 10-perancangan user interfaceRpl 10-perancangan user interface
Rpl 10-perancangan user interface
 
model model pengembangan media pembelajaran
 model model pengembangan media pembelajaran  model model pengembangan media pembelajaran
model model pengembangan media pembelajaran
 
Tutor google site
Tutor google siteTutor google site
Tutor google site
 
PPT Microsoft office
PPT Microsoft officePPT Microsoft office
PPT Microsoft office
 
Perangkat Pembelajaran Tematik SD Kelas V Tema 3 Subtema 2 Kurikulum 2013 Rev...
Perangkat Pembelajaran Tematik SD Kelas V Tema 3 Subtema 2 Kurikulum 2013 Rev...Perangkat Pembelajaran Tematik SD Kelas V Tema 3 Subtema 2 Kurikulum 2013 Rev...
Perangkat Pembelajaran Tematik SD Kelas V Tema 3 Subtema 2 Kurikulum 2013 Rev...
 
instrumen lembar penilaian diri (sikap)
instrumen lembar penilaian diri (sikap)instrumen lembar penilaian diri (sikap)
instrumen lembar penilaian diri (sikap)
 
Pembelajaran Berbasis Masalah Matematika di SD
Pembelajaran Berbasis Masalah Matematika di SDPembelajaran Berbasis Masalah Matematika di SD
Pembelajaran Berbasis Masalah Matematika di SD
 
Bijak bersosmed - tips dan informasi gerakan
Bijak bersosmed - tips dan informasi gerakanBijak bersosmed - tips dan informasi gerakan
Bijak bersosmed - tips dan informasi gerakan
 
Materi tik kelas X semester 1
Materi tik kelas X semester 1Materi tik kelas X semester 1
Materi tik kelas X semester 1
 
Media Sosial: Manfaat dan Akibat
Media Sosial: Manfaat dan AkibatMedia Sosial: Manfaat dan Akibat
Media Sosial: Manfaat dan Akibat
 
PPT PEMBELAJARAN CANVA.pptx
PPT PEMBELAJARAN CANVA.pptxPPT PEMBELAJARAN CANVA.pptx
PPT PEMBELAJARAN CANVA.pptx
 
Ms excel presentasi
Ms excel presentasiMs excel presentasi
Ms excel presentasi
 
209299471 modul-blender
209299471 modul-blender209299471 modul-blender
209299471 modul-blender
 
Modul Informatika Berfikir Komputasional
Modul Informatika Berfikir KomputasionalModul Informatika Berfikir Komputasional
Modul Informatika Berfikir Komputasional
 
Powerpoint, TIK XII
Powerpoint, TIK XIIPowerpoint, TIK XII
Powerpoint, TIK XII
 

Similar to Membuat Website Catering Jajanan Tradisional dengan Google Site

Cara mudah mendapat backlink dari google drive pr 9
Cara mudah mendapat backlink dari google drive  pr 9Cara mudah mendapat backlink dari google drive  pr 9
Cara mudah mendapat backlink dari google drive pr 9SEKOLAH BISNIS INDONESIA
 
Webpage maker part 1
Webpage maker part 1Webpage maker part 1
Webpage maker part 1fhnx
 
Modul pembuatan multimedia interaktif menggunakan power point
Modul pembuatan multimedia interaktif menggunakan power pointModul pembuatan multimedia interaktif menggunakan power point
Modul pembuatan multimedia interaktif menggunakan power pointMuhammad Khosyi'in
 
Asas membina blog guru (plug tmk5)
Asas membina blog guru (plug tmk5)Asas membina blog guru (plug tmk5)
Asas membina blog guru (plug tmk5)SMK HUTAN MELINTANG
 
AVA 2 - Google Form group Norishah & Firdaus.pptx
AVA 2 - Google Form group Norishah & Firdaus.pptxAVA 2 - Google Form group Norishah & Firdaus.pptx
AVA 2 - Google Form group Norishah & Firdaus.pptxCiChaMeaHari
 
Membuat Portofolio Digital Dengan Google Sites.pdf
Membuat Portofolio Digital Dengan Google Sites.pdfMembuat Portofolio Digital Dengan Google Sites.pdf
Membuat Portofolio Digital Dengan Google Sites.pdfDeniCendrianto1
 

Similar to Membuat Website Catering Jajanan Tradisional dengan Google Site (7)

Cara mudah mendapat backlink dari google drive pr 9
Cara mudah mendapat backlink dari google drive  pr 9Cara mudah mendapat backlink dari google drive  pr 9
Cara mudah mendapat backlink dari google drive pr 9
 
presentation bengkel vle untuk guru
presentation bengkel vle untuk gurupresentation bengkel vle untuk guru
presentation bengkel vle untuk guru
 
Webpage maker part 1
Webpage maker part 1Webpage maker part 1
Webpage maker part 1
 
Modul pembuatan multimedia interaktif menggunakan power point
Modul pembuatan multimedia interaktif menggunakan power pointModul pembuatan multimedia interaktif menggunakan power point
Modul pembuatan multimedia interaktif menggunakan power point
 
Asas membina blog guru (plug tmk5)
Asas membina blog guru (plug tmk5)Asas membina blog guru (plug tmk5)
Asas membina blog guru (plug tmk5)
 
AVA 2 - Google Form group Norishah & Firdaus.pptx
AVA 2 - Google Form group Norishah & Firdaus.pptxAVA 2 - Google Form group Norishah & Firdaus.pptx
AVA 2 - Google Form group Norishah & Firdaus.pptx
 
Membuat Portofolio Digital Dengan Google Sites.pdf
Membuat Portofolio Digital Dengan Google Sites.pdfMembuat Portofolio Digital Dengan Google Sites.pdf
Membuat Portofolio Digital Dengan Google Sites.pdf
 

Membuat Website Catering Jajanan Tradisional dengan Google Site

  • 2. 2 Studi Kasus X memiliki usaha catering penganan (snack) tradisional. X biasa menerima pesanan melalui telepon, sms atau akun facebook. X biasa menerima pembayaran secara tunai atau transfer bank. X ingin memasarkan usahanya lebih luas menggunakan media website.
  • 3. 3 Tahap Perencanaan ● Sasaran pengguna ● Kebutuhan pengguna ● Peta website (sitemap) ● Sketsa tata letak website ● Tema website ● Pembuatan website ● Domain website
  • 4. 4 Sasaran Pengguna ● Kegiatan yang membutuhkan snack : – Acara ulang tahun, syukuran, pernikahan  Rumah Tangga – Rapat, acara kebersamaan  Kantor / Perusahaan – Acara lain : Umum
  • 5. 5 Kebutuhan Pengguna ● Kebutuhan pengguna : – Menu snack (foto, deskripsi, harga .dll) – Paket snack – Kontak (telepon, email, alamat, social media .dll) – Cara pemesanan & pembayaran – Testimoni pelanggan
  • 6. 6 Peta Website (Sitemap) Jajananenaksehat.tk Menu Paket Testimoni Cara Pemesanan & Pembayaran KontakHome Video
  • 8. 8 Tema Website ● Tema (theme) yang dipilih sebaiknya : – Sederhana tapi menarik – Bisa menampung banyak informasi – Teks nyaman dibaca segala usia – Mudah digunakan (khusus navigasi)
  • 9. 9 Pembuatan Website (1) ● Buat website baru di Google Site – Login di http://sites.google.com – Klik Create – Select template to use : Blank Template – Name your site : Jajanan Sehat Enak – Site location : [nama unik] contoh: yohanesgultom – Type the code shown (validasi) – Klik Create (di atas halaman)
  • 10. 10
  • 11. 11 Pembuatan Website (2) ● Page Home – Klik Edit Page – Ketikkan kata pembuka/pengantar – Masukkan gambar : Insert > Image > Choose File gambarhome.jpg > Click Picture > Click OK – Setelah gambar masuk, click dan click button M – Klik Save untuk menyimpan
  • 12. 12
  • 13. 13 Pembuatan Website (2) ● Halaman Menu – Click New Page untuk membuat halaman baru – Name your page : Menu – Click Create – Click Edit Page untuk mengedit halaman Menu – Click Layout > Two Column (simple) – Masukkan masing-masing 3 menu di tiap kolom (lihat contoh)
  • 14. 14
  • 15. 15 Pembuatan Website (3) ● Halaman Paket – Buat halaman baru dengan nama Paket – Edit page, masukan tabel dengan cara klik Table > Inser Table > 4x5 – Masukan data paket seperti contoh – Masukan gambar paket1.jpg, paket2.jpg, paket3.jpg, paket4.jpg di bawah tabel seperti contoh
  • 16. 16
  • 17. 17 Pembuatan Website (4) ● Halaman Video – Buat halaman baru dengan nama Video – Masukan video dengan cara Insert > Video > Youtube > Copy-Paste link youtube – Masukan dan susun 2 video ini di halaman Video : ● Cara Membuat Kue Lumpur http://www.youtube.com/watch?v=WvR2z86HZu0 ● Cara Membuat Brownies Kukus http://www.youtube.com/watch?v=vVB860K0Mvs
  • 18. 18
  • 19. 19 Pembuatan Website (5) ● Halaman Hubungi Kami – Buat halaman baru dengan nama Hubungi Kami – Masukan peta dengan cara klik Insert > Map – Ketik di Enter location : Raeburn Park Singapore dan tekan Enter – Hapus placemark Raeburn Park dengan meng-klik tanda silang dibawah search box (lihat gambar) – Tambahkan placemark baru dengan meng-klik Drop a Placemark & meng-klik titik di peta – Klik Select untuk menyimpan – Include title : Jajanan Sehat Enak – Klik Save
  • 20. 20
  • 21. 21
  • 22. 22 Pembuatan Website (6) ● Menambah navigasi horizontal (horizontal navigation) – Klik More > Edit Site Layout – Klik button Horizontal Navigation – Klik area horizontal navigation yang baru muncul di bawah judul halaman – Klik Add Page untuk menambahkan halaman Menu, Paket, Video – Pilih Style : Tabs – Klik OK dan kemudian klik Close
  • 23. 23
  • 24. 24 Pembuatan Website (7) ● Mengubah tema, warna & font website – Klik More > Manage Site – Klik Themes, Colors and Fonts di menu sebelah kiri layar (opsi paling bawah) – Pilih Entire Page > Background > Color : masukkan #FAF2A0 – Pilih Site Header > Title : ubah font menjadi Kavoon, color Red (#ff0000), size 36pt
  • 25. 25
  • 26. 26
  • 27. 27 Domain Website ● Website yang dibuat di google site dapat diakses oleh publik melalui http://sites.google.com/site/namawebsite ● Jika kita sudah memiliki domain kita dapat menggunakannya sebagai alias untuk website kita ● Domain umum seperti .com .co.id .net .org dapat dibeli di website seperti domainesia.com, masterweb.com, rumahweb.com .dll ● Harga domain berkisar Rp 85.000 – Rp 150.000 / tahun ● Tersedia juga domain gratis seperti .tk (www.dot.tk) .co.nr ( www.freedomain.co.nr) .dll
  • 28. 28