Update & Modifikasi Website Google memberikan panduan singkat tentang cara menambahkan konten seperti teks, gambar, dan video ke dalam website Google Sites serta cara mengatur tata letak dan format konten tersebut dengan menggunakan fitur-fitur seperti pengaturan ukuran, posisi, dan pemisahan konten ke section yang berbeda.

1. Update & Modifikasi
Website Google
Natalius FM

2. Masukan konten anda ke
dalam website dengan klik tab
INSERT atau double klik (Lihat
No.9) untuk masukan No.
1,2,3,4 dan 6
Teks box
Gambar
Embed
URL (link)
Upload
Komputer
Garis Pembatas
bagian (section)
File dari
Google Drive
Embed Google
Feature, Youtube,
kalender dan peta
Masukan
Google Docs

3. CARA PINTAS MASUKAN
KONTEN: Double Klik di area
yang dituju akan tampil feature
insert yang terdiri dari Teks,
Images dari internet, URL link,
Upload dari komputer dan dari
google drive

4. Masukan Teks box
dan ketik JudulPilih Jenis Teks
Pilihan
Format
Teks

7. Selain upload dari komputer anda dapat
mengganti background teks dengan
gambar dari gallery, URL, google search,
album google photos dan dari google
drive anda

8. Masukan teks ada dengan double klik dan ketik
atau mencopy dan paste dari sumber lain Teks diatas saya copy paste dari
http://www.lipsum.com/
Pilihan
Format
Teks

9. Atur lebar teks
anda dengan drag
ukuran teks secara
horizontal ke kiri
atau kanan sesuai
kolom yang ada

10. Isi gambar Anda
Saya akan upload dari
komputer
Masukan gambar ada
empat pilihan dibawah

11. Ukuran foto dapat
anda atur sesuai
kebutuhan, cukup
klik dan atur sisi
horisontal dan
vertikal sesuaikan
ukuran yang
dikehendaki. Gambar
akan otomatis crop
sesuai ukuran anda
Lihat slide berikut >>>

13. Jika ukuran dan dimensi
gambar yang diatur tampak
seperti terpotong (contoh
pada gambar bagian atas
kepala saya sedikit putus),
anda klik simbol crop lagi
dan atur posisi gambar
dengan tepat
Lihat slide berikut >>>

14. Setelah klik simbol crop dan
letakan cursor di tengah
gambar sehingga kursor
berbentuk tanda plus panah
dan geser secara horisontal
dan vertikal sehingga gambar
proporsional (seimbang/pas)

15. Setelah digeser ke arah
bawah gambar kepala saya
sudah lebih jelas dan tidak
terputus setelah itu klik
tanda cek atau klik di area
kosong (bukan area gambar)

16. Jika anda ingin perbesar
(Zoom) gambar pada area
tertentu misalnya di foto ini
wajah saya yang
ditonjolkan, maka anda
perlu menggeser ukuran
zoom ke arah kanan

18. Jika ukuran gambar di perbesar
maka teks akan menyesuaikan
dengan area yang tersedia (teks
selalu fleksibel)
Lihat slide berikut >>>

20. Memindahkan Gambar
sangat fleksibel, cukup drag
dan geser lihat gambar
digeser ketepi kiri teks akan
tampak garis biru vertikal
lalu lepas klik dan gambar
otomatis berpindah ke
sebelah kiri teks
Peletakan konten teks dan gambar
sangat dipengaruhi oleh hukum baris
dan kolom (tampak samar2 saat anda
memindahkan konten)
Section(baris)
Kolom
Lihat rumus di slide berikut >>>

21. Dua atau beberapa konten tidak akan menyatu didalam satu baris (section) jika
diatur secara horizontal lihat gambar foto diatas tidak menyatu dengan teks.
Namun konten-konten akan menyatu otomatis di dalam satu section jika di atur
secara vertikal dan didekatkan sehingga menempel sejajar vertical dalam kolom
yang sama
Lihat slide berikut >>>
Rumus Template Halaman NEW Google Sites
KontenberadapadaSection
yangsamatapitidakmenyatu
Konten 1 Konten 2
Horisontal

22. Ketika konten
dipindahkan secara
vertical sejajar dan saling
berhimpit seperti gambar
foto saya dan teks maka
teks akan mengikuti besar
dimensi foto dan mereka
akan menyatu
Lihat slide berikut >>>

23. KontenberadapadaSection
yangsamadanmenyatu
Konten 1
Konten 2
Gambar akan tampil
secara full dimensi ukuran
original, jika foto
berukuran besar maka
teks yang menyatu akan
ditarik sesuai ukuran foto
Bagaimana cara memisahkan foto dan
teks dan mengatur foto dan teks sesuai
keinginan?
Lihat slide berikut >>>

25. Pindahkan konten keatas
atau kebawah konten lain
hingga tampak garis biru
pembatas section, lihat
foto saya telah
menyentuh ujung section
dan bersentuhan dengan
section diatasnya. Lalu
lepas klik dan hasilnya
Lihat slide berikut >>>
Section tidak dapat
menyatu jika
didekatkan namun
konten dari section
bisa dipindahkan ke
section lain

26. Garis
pembatas
section
Section1(GambarSection2(Teks)
Setelah konten
berada di section
berbeda maka
dapat diatur posisi
dan ukuran konten
dalam section itu
sesuai kehendak
kita
Lihat slide berikut >>>

27. Mengganti background
section sesuai selera kita,
ada pilihan dari tema
yaitu standard, emphasis
1, emphasis 2 dan image
Lihat slide berikut >>>

28. Saya pilih background
section emphasis2, Warna
emphasis 2 tergantung pada
pilihan warna di thema,
warna terpilih ( ) akan
diterapkan ditema. Anda
dapat memilih warna lain
pada pilihan warna di ujung
kanan baris warna
Lihat slide berikut >>>

30. Selain crop ada pilihan
pengaturan gambar lain
seperti tampilan
original, menambahkan
link, hapus gambar,
ganti gambar dan
menambah caption
gambar
Jika anda tambahkan
link URL alamat web
lain maka gambar
memiliki link ke
halaman/web lain

31. Saya coba hapus
gambar dan ganti
dengan gambar lain

32. Ketika gambar saya
terhapus otomatis
sectionnya juga terhapus
dikarenakan dalam section
hanya ada satu konten
(dalam hal ini foto saya).
Saya upload foto lain di
area bawah section text
(Pengantar)

33. Setelah foto baru tampil
otomatis berada dalam
section baru
Sectionbaru

34. Jika anda ingin memindahkan section, anda perlu mengarahkan
pointer mouse ke sisi pinggir section sehingga tampak kursor
berbentuk plus arrow lalu drag dan seret ke atas atau bawah
section lain, pastikan tanda biru pembatas section tampak
sebelum melepas klik

35. Namun sekali lagi jika anda hanya memindahkan
gambar secara vertikal maka hati-hatilah jangan
sampai gambar menyatu dengan konten di section
lain. Memang ada tampak garis pembatas, namun
bukan pembatas section tapi tepi konten pada
section lain
(misalnya foto diatas bersentuhan dengan teks box
pengantar, maka hasilnya akan seperti di slide berikut
Ketika section/konten
dipindah secara vertikal maka
tampak garis pembatas
section seperti garis biru
melebar penuh dari ujung kiri
ke kanan section

36. Seperti keterangan
sebelum setiap kali
kontent bersentuhan
secara vertikal makan
mereka akan menyatu
misalnya foto ini
kembali ke ukuran
normal (full halaman)
dan teks mengikutinya

37. Saat memindahkan konten diatas section lain
pastikan tampak garis pembatas section yang
melebar dai kiri ke kanan full halaman dan lepas klik,
maka otomatis kontent dalam hal ini gambar akan
menciptakan section baru diantara section lainnya

38. Tampak seperti ini,
gambar telah memiliki
section dan bebas
diatur sesuai keinginan
Lihat slide berikut >>>

40. Tambahkan background
section jika mau 