Modul Pembuatan Classroom Website

di Google Site
Deddy Amrand

Workshop Pembuatan Classroom Website

Why Google Site?

Here are some of the pertinent reasons why you should consider using Google sites with your
students :
Google site is free
It is very easy to use and has a simple and student friendly interface
Anyone above 13 can join in and add content to it ( provided you give them access )
A site can be created for a class within a couple of minutes using templates for different
pages and without the need for advanced technology knowledge
Google Site also offers you control over who can have access to the pages and who can
share materials
It can improve students digital literacy skills

It can open up your classroom and make it a collaborative learning environment

(quoted from http://www.educatorstechnology.com)

Fast. Fast to learn. Fast to setup and deploy. Fast to edit.

Easy to learn.
Simple to Setup.
Editing On Line.
Free.
(quoted from http://www.chipp.com/google-sites-faq)

Large storage capacity (15 GB) on Google

Website is automatically included in Google search engine

Prodi Bhs. Inggris, November 2014

Workshop Pembuatan Classroom Website

Ways Teachers can Use Google Sites in their Classroom

Here are some of the tips to help you get started using Google Sites in your Classroom :

Create a webpage for the class where to include course materials and rich content
including videos, images, slides, and audio recordings
Use it for posting homework, assignments, and class events
You can also use it as a discussion board where every student can have a say
Create a page for posting announcements , class events, reading materials, classroom
rules, and many more
Use it as a wiki and let your students collaboratively work on their assignments and edit
content
Use the File Cabinet page to upload documents, PDFs and other materials to share with
your students
You can also create a private page where to share information with parents like curriculum
resources
Embed a calendar to keep track of your deadlines or Google Spreadsheet to keep track of
your research

Ways Students Can Use Google Sites

Here are some ideas on how students can use Google Sites :

They can use it to create digital portfolios to feature their work and achievements
Create and manage to-do lists for their assignments and classroom activities
Collaborate on group projects
They can use it to present their findings on a particular research subject. They can include
docs they have created, videos, links and many more
Students can use it to contribute in knowledge building inside the classroom and to help
with course materials

(Source: http://www.educatorstechnology.com/2013/01/teachers-guide-on-use-of-googlesites.html)

Deddy Amrand

Workshop Pembuatan Classroom Website

BAGIAN 1 MENYIAPKAN WEBSITE

Membuat website
1. Sign in pada sites.google.com dengan akun gmail.
2. Klik tombol Create.
3. Select a template to use. Untuk tahap awal, sebaiknya memilih blank template.
4. Beri nama situs anda (nantinya bisa diganti)
5. Merubah URL. Meskipun URL utama tidak bisa diganti, anda masih dapat mengganti
bagian akhirnya:
o https://sites.google.com/site/___
Hal-hal yang perlu diperhatikan saat mengganti URL:
o hanya bisa menggunaka A-Z, a-z, 0-9
o tidak bisa sama dengan URL yang sudah ada atau Gmail username (kecuali
username anda sendiri)
6. Memilih tema. Sebuah tema secara otomatis membuat gambar latarbelakang, font style,
dan font colors situs anda. Kalau anda memilih blank, template yang dipilih akan mensetup elemen-elemen di atas. Setelah situs selesai dibuat, tema masih bisa diganti atau
ditambahkan.

Prodi Bhs. Inggris, November 2014

Workshop Pembuatan Classroom Website

Opsi tambahan:
o Site description (optional) Tuliskan deskripsi singkat mengenai situs anda agar
memudahkan orang menemukannya di internet.
7. Isikan kode.
8. Klik tombol Create.
Nah, kini website anda sudah selesai dibuat. Anda bisa mulai memasukkan tulisan, gambar, video,
dll.

Mengedit website
1. Untuk mengedit web site, klik Edit Page:
2. Setelah itu akan muncul Edit toolbar, yang menyediakan bermacam tool untuk mengedit site.

Membuat link
1. Highlight teks yang anda ubah menjadi sebuah link, kemudian klik tombol Link
.
2. Sebuah jendela akan muncul, klik pada salah satu page hendak diberi link dalam Site map

3.

Deddy Amrand

Workshop Pembuatan Classroom Website

Link bisa diambil dari:

(a)
Halaman yang sudah ada dalam website (pilih Site pages)
(b)
Halaman yang baru akan dibuat (klik Create new page)
(c)
Alamat sebuah website (klik Web address)

Membuat halaman baru

1. klik New Page

2. Lalu, isi bagian Name your page, Select a template to use, dan Set a location.

3. Setelah semua OK, klik Create

Prodi Bhs. Inggris, November 2014

Workshop Pembuatan Classroom Website

Memulai menulis informasi, tulisan atau artikel

Oke, situs Anda sudah tercipta. Halaman selanjutnya yang ditampilkan oleh Google Sites
adalah halaman pertama situs Anda. Halaman pertama ini dikenal pula dengan istilah
homepage (halaman pertama atau halaman depan). Apabila memilih blank template pada
halaman sebelumnya, Anda akan melihat tampilan halaman pertama yang polos. Hanya
ada judul situs dan kolom navigasi di sebelah kiri.
(a) Untuk mengisi halaman depan itu dengan teks atau hal lainnya :
1. klik tombol edit page.
Tunggu loading editor-nya
selesai. Setelah itu, silahkan
menulis.

(b) Untuk memasukkan

gambar ke halaman tersebut:
1. klik menu Insert, lalu pilih Image.

Google akan menampilkan kotak dialog yang menanyakan dari mana sumber gambar yang ingin
ditampilkan.
Apabila ingin mengunggah (upload) dari komputer:
1.
2.
3.
4.

pilih uploaded images,

lalu klik tombol browse.
Pilih file yang ada di komputer Anda lalu klik open.
Di kotak dialog, klik OK. Gambar yang Anda pilih akan diunggah lalu ditambahkan ke dalam
halaman.
Deddy Amrand

Workshop Pembuatan Classroom Website

Jika Anda ingin mengambil gambar dari internet, cukup salin alamat link gambar tersebut lalu pilih
Web address. Masukkan alamat link gambar yang tadi Anda salin. Klik Ok, maka gambar
ditambahkan ke dalam halaman. Jika semua perubahan sudah selesai, klik Save. Jadilah halaman
depan situs Anda.
(c) Untuk memasukkan Video dari Youtube
1. klik tombol Edit page.

2. Klik Insert, lalu pilih Youtube

Prodi Bhs. Inggris, November 2014

Workshop Pembuatan Classroom Website

3. Setelah kotak dialog muncul:

(d) Untuk menambahkan halaman baru

1.
2.
3.
4.

Klik tombol create page.

Lakukan pengeditan seperti yang dijelaskan di atas.
Setelah segalanya selesai, klik lagi tombol save.
Prosedur yang sama berlaku setiap pembuatan halaman baru.

Deddy Amrand

Workshop Pembuatan Classroom Website

Mengubah layout, tema, warna, atau fonts

(a) Site layout
1. Klik icon Gear icon

di sudut kanan atas.

2. Pilih Edit site layout.

3. Setelah itu di bagian atas akan muncul sebuah toolbar yang menunjukkan elemen-elemen
dalam website. Setiap elemen bisa diaktif/non-aktifkan dengan mengkliknya.

4. Anda bisa dengan mudah mengubah setiap elemen tersebut. Untuk melihat mana yang
bisa diedit, arahkan mouse di atasnya; bagian yang dapat diedit akan ter-highlight dengan
warna blue.
5. Untuk mengubah sebuah elemen, pertama-tama klik sebuah elemen. Yang bisa dilakukan
pada setiap elemen adalah:
o Header: mengubah tinggi dan alignment, dan menambahkan sebuah logo.
o Horizontal navigation bar: mengubah style navigation bar di bagian atas (tepat di
bawah header) dan menentukan halaman apa saja yang bisa diakses dari situ.
o Sidebar: Menentukan nama sidebar, pengaturannya, dan link-link yang tercakup.
o Footer: menambahkan dan menformat teks pada footer.
o Site width: mengubah lebar website.

Prodi Bhs. Inggris, November 2014

Workshop Pembuatan Classroom Website

(b) Site themes

1.
2.
3.
4.

Pilih Manage site dari menu More action

.
Klik Themes, Colors, and Fonts pada sidebar kiri.
Pilih tema yang disukai. Perubahannya bisa langsung dilihat pada area Preview area.
Klik "Save changes."

(c) Site colors and fonts

1. Pilih Manage site dari menu More action

2. Klik Themes, Colors, and Fonts pada sidebar kiri.

3. Pada scrolling box, pilih bagian yang ingin dimodifikasi:
o Entire page
o Site header
o Content area
o Content area gadgets
o Sidebar gadgets
o Horizontal navigation
4. Setelah selesai, klik "Save changes."

Menata sidebar navigation

1. Pastikan halaman-halaman yang akan ditata telah dibuat sebelumnya.

2. Klik More Actions pada sudut kanan atas.

Deddy Amrand

10

Workshop Pembuatan Classroom Website

3. Klik Edit Site Layout

4.

Klik tanda + untuk menambahkan sebuah

sidebar navigation

5. Pada dialog box, pilih

Navigation (klik add)

6.

Di sebelah kiri akan muncul gambar seperti di bawah. Klik pada Navigation

Prodi Bhs. Inggris, November 2014

11

Workshop Pembuatan Classroom Website

Catatan: Selain Navigation, gadget lain yang bisa digunakan adalah:

7. Setelah itu akan muncul kotak dialog Configure Navigation

Deddy Amrand

12

Workshop Pembuatan Classroom Website

BAGIAN 2 Menambahkan Fitur-Fitur

Khusus untuk Classroom Web
Membuat Form
Form dapat dibuat untuk berbagai tujuan, misalnya:
1. Online video feedback

Prodi Bhs. Inggris, November 2014

13

Workshop Pembuatan Classroom Website

2. Visitors Comment

3. Online Quiz

Deddy Amrand

14

Workshop Pembuatan Classroom Website

Step 1 Masuk ke Google Drive

1. Ketik https://sites.google.com ke dalam url address di browser anda (Mozilla atau
Internet Explorer), lalu Enter. Jika anda belum log in ke Google account anda, anda harus
log in dulu.
2. Ikuti langkah 2 dan 3 seperti pada gambar di bawah:

3. Setelah itu, anda akan masuk ke dalam Google Drive yang merupakan tempat
penyimpanan online berkapasitas 15GB. Di sini anda bisa membuat dan menyimpan filefile documents, spreadsheets, forms, slides, dan drawing yang bisa ditampilkan ke
website anda.

Prodi Bhs. Inggris, November 2014

15

Workshop Pembuatan Classroom Website

Step 2 Buat Form dalam Google Drive

(1) Pertama-tama, buka sebuah form kosong

Deddy Amrand

16

Workshop Pembuatan Classroom Website

(2) Sebuah Form kosong akan siap dibuat. Cara membuatnya:

1. Beri nama form, deskripsi, dan buat item pertama

2.

Untuk membuat item berikutnya, klik

3.

Jika ingin merubah tampilan, klik Change theme

4.

Untuk kembali ke Google Drive, klik

Prodi Bhs. Inggris, November 2014

17

Workshop Pembuatan Classroom Website

Memasukkan Form ke dalam Web page

(a) Masuk ke halaman yang diinginkan. Jika belum ada, buat dulu (lihat halaman 4)
(b) Setelah halaman tersedia, maka sudah Form dapat dimasukkan. Caranya:
1. Masuk ke mode Edit, dengan cara mengklik icon Edit the page

2.

Langkah berikutnya:

Deddy Amrand

18

Workshop Pembuatan Classroom Website

3. Setelah muncul kotak dialog, pilih file Form yang telah dibuat sebelumnya, lalu Select

Prodi Bhs. Inggris, November 2014

19

Workshop Pembuatan Classroom Website

4. Pada kolom Properties, lakukan pengaturan sesuai kebutuhan, lalu klik Save

5. Lalu Klik Save lagi

Deddy Amrand

20

Workshop Pembuatan Classroom Website

6. Lakukan langkah yang sama untuk memasukkan File Spreadsheet yang menampung semua
isian Form.

Prodi Bhs. Inggris, November 2014

21

Workshop Pembuatan Classroom Website

Membuat Online Discussion Forum

Step 1 Membuat Group
1. Masuk ke https://groups.google.com
2. Klik Create Group

3.
4.
5.
6.

Beri nama group dan deskripsinya (group email akan terisi otomatis)
Setelah itu, klik Create.
Isikan captcha
Setelah itu, tampilan berikut akan muncul:

7. Beri tanda centang pada Google profile, lalu klik Save my changes

Deddy Amrand

22

Workshop Pembuatan Classroom Website

Step 2 Invite Members

1. Klik Manage

2. Akan muncul tampilan berikut:

3. Klik Invite member,

4. Isikan alamat gmail yang akan diundang (maksimal 10 alamat untuk sekali mengundang, setiap
alamat dipisahkan oleh tanda koma)
5. Tuliskan messagenya
6. Klik Send invites
7. Isikan capctha, lalu OK.

Prodi Bhs. Inggris, November 2014

23

Workshop Pembuatan Classroom Website

Mengintegrasikan Google Group ke dalam Website

1. Sediakan sebuah page kosong (caranya: lihat halaman 13) untuk Online discussion.
2. Setelah page tersedia, masuk pada page tersebut, lalu klik Edit page
3. Kemudian, ikuti langkah berikut:

Deddy Amrand

24

Workshop Pembuatan Classroom Website

4. Setelah kotak dialog muncul, ikuti langkah berikut:

Contoh URL adalah sbb:

5. Tampilan berikut akan muncul, lakukan pengaturan centre alignment, lalu klik Save:

Prodi Bhs. Inggris, November 2014

25

Workshop Pembuatan Classroom Website

Agar mudah diakses pengguna, jangan lupa untuk memasukkan link ke halaman Online
discussion ini ke dalam Sidebar Navigation (lihat caranya pada halaman 7-9).

Memulai dan Mengelola Online Group Discussion

1. Masuk pada halaman Online Forum, lalu Klik NEW TOPIC

2. Isikan subject diskusi, tulis message, lalu klik POST

Deddy Amrand

26

Workshop Pembuatan Classroom Website

Membuat Send a file Form

Send a file form berguna sebagai tempat mengirimkan file (pdf, doc, xlx, dsb) kepada anda.
Semua file yang terkirim melalui form ini akan ditampung dalam sebuah akun email. Sebaiknya
anda membuat sebuah akun email khusus untuk keperluan ini, jangan digabung dengan email
umum yang sudah anda punyai.
Salah satu kelebihan fasilitas ini adalah: bila file berhasil terkirim, maka sebuah email notifikasi
akan otomatis dikirim ke alamat email pengirim file tsb. Dengan demikian, pengirim memperoleh
kepastian sampai tidaknya file yang dikirimnya.
Step 1 Membuat Form untuk Send a file
1. Masuk ke http://allforms.mailjol.net/
2. Register Free account.
3. Cek email anda, dan lakukan konfirmasi/aktivasi akun.
4. Log in di http://allforms.mailjol.net/login.php
5. Setelah masuk, pilih Create Form (basic), klik <<Continue>>
6. Ikuti langkah-langkah pembuatan secara teliti.
7. Penting: pada bagian Email Question, pilih Email.
8. Pada Thank you email, pilih Yes, lalu isi data yang diminta.
9. Terakhir, klik Save.
10. Jangan lupa mencatat url form yang sudah dibuat. Misalnya:

Prodi Bhs. Inggris, November 2014

27

Workshop Pembuatan Classroom Website

Mengintegrasikan Form Send a file ke dalam Google Site

1. Masuk ke Google Sites, lalu klik Edit page.
2. Klik "Insert" menu, pilih "More Gadgets".

3. Pada popup windows "Setup your gadget", klik "Add gadget by URL".

Deddy Amrand

28

Workshop Pembuatan Classroom Website

4. Pada kolom Add your form's URL masukan url form ditambah ?googlesites.
Misalnya, jika url form anda adalah sbb: http://free.allforms.mailjol.net/u/8303f6cb.php
Maka, tuliskan: http://free.allforms.mailjol.net/u/8303f6cb.php?googlesites

5. Lakukan pengaturan seperti di bawah ini:

6. Terakhir, klik Save.

Prodi Bhs. Inggris, November 2014

29