PORTOFOLIO DIGITAL???

YUK, GUNAKAN GOOGLE

SITES.........
LOKAKARYA ORIENTASI
PENDIDIKAN GURU PENGGERAK
ANGKATAN 9
KABUPATEN MANGGARAI
2023-2024
Apa itu Google Sites ?

Google Sites adalah sebuah platform

pembuatan website yang menjadi bagian dari
platform kolaborasi Google Workspce. Google
Sites menyediakan sebuah website builder yang
dapat digunakan untuk menyusun sebuat situs
sederhana.
Apa Saja Manfaat Membuat Website sekolah ?

1. Eksistensi sekolah
2. Kemudahan bagi orang tua
Berapa hal yang akan diperoleh orang tua dari website tersebut adalah: (i)
Profil Sekolah, (ii) Visi, Misi Sekolah, (iii) Sambutan Kepala Sekolah, (iv)
Kegiatan Ekstra Kurikuler, (v) Alamat Sekolah dan Kontak Person
1. Kemudahan Bagi Siswa
2. Edukasi Masyarakat
3. Menghemat Biaya Administrasi
 Tentukan Judul Website dan Halaman

Setelah membuat website baru, kamu perlu mengisi judul website dan halaman utama
agar lebih mudah untuk diingat. Kamu dapat mengubah judul website di bagian kiri atas
halaman. Sedangkan judul halaman utama dapat diubah dengan meng-klik pada tulisan
‘Your page title‘
Atur Desain
Mengenali Website
Editor Google Sites
Editor Atas

· Redo: Mengembalikan perubahan yang telah dilakukan satu langkah ke depan.

· Preview: Membuka pratinjau website yang sedang dibuat.
· Copy Link: Menyalin tautan ke website (jika sudah di-publish)
· Share with Others: Menunjukkan website dengan orang lain atau berbagi akses
kepemilikan website untuk berkolaborasi.
· Settings: Membuka beberapa pengaturan website, termasuk menghubungkannya ke
Google Analytics.
· More: Menampilkan fungsi tambahan seperti melihat riwayat perubahan atau
menduplikasi website.
· Publish: Tombol untuk mempublikasikan website sehingga dapat diakses oleh siapa saja.
Editor Samping
· Text box: Membuat sebuah area yang
dapat diisi dengan teks.

· Images: Menyematkan gambar ke website

dengan cara mengunggah dari komputer
atau memilih dari stok yang tersedia.

· Embed: Mencantumkan elemen web dari

halaman lain dengan menggunakan URL
atau HTML embed code.

· Drive: Mencantumkan file dari Google

Drive ke website yang sedang dibuat.
Di bawah sub-menu berjudul ‘Layout,’ kita
dapat melihat beberapa pilihan tata letak
elemen di dalam website yang sedang kita
buat. Kamu dapat memilih layout tersebut
untuk menyusun kelompok elemen.

Kita dapat menyusun beberapa layout

sekaligus dalam satu halaman untuk
meningkatkan estetika website,
Bagian paling bawah dari menu Insert adalah daftar berisi
berbagai elemen tambahan dengan berbagai macam fungsi.

Di sebelah kanan tab Insert, kita dapat melihat tab dengan judul
Pages. Tab Pages ini berfungsi untuk:· Membuat halaman baru
Mengelola halaman yang ada di website;
memunculkan/menyembunyikan halaman dari Navigation bar

Tab terakhir di menu bagian kanan adalah Themes. Seperti namanya, tab
ini berisi berbagai pilihan tema yang dapat kamu gunakan dari Google
Sites. Tapi, kamu juga dapat membuat tema sendiri dengan logo,
gambar, font, dan skema warna yang dapat kamu atur sesuka hati.
Publikasi Website
Setelah merasa cukup puas dengan tampilan website-mu, kita dapat langsung
mempublikasikannya dengan menekan tombol Publish yang ada di bagian kanan atas
halaman.
 · Bagan Dibatasi
Hanya orang yang memiliki akses yang dapat
membuka dengan tautan
· Situs yang diterbitkan Umum
Siapa pun di internet dapat menemukan dan
membuka Penampil
Penonton yang dipublikasikan dapat melihat situs setelah
dipublikasikan
· Bagan

Siapa saja yang memiliki tautan

Siapa pun di internet dengan tautan dapat mengedit
Editor
· Situs yang diterbitkan Umum
Siapa pun di internet dapat menemukan dan membuka
Penampil
Kode dasar untuk membuat marquee atau
teks berjalan adalah....
<marquee>TULISAN YANG AKAN
BERGERAK</marquee>
kode scrolldelay="angka" digunakan untuk
mengatur jeda dalam milidetik, jadi untuk jeda 1
detik masukkan nilai 1000
Contoh kode marquee:
<marquee scrolldelay="500">RUNNING TEKS
DELAY 0,5 DETIK</marquee>
kode loop="angka|-1|infinite" digunakan untuk
mengatur pengulangan atau repetisi dari marquee
Contoh:
<marquee loop="3">MARQUEE BEROTASI 3
KALI SAJA</marquee>
kode width="lebar" digunakan untuk mengatur
lebar media teks berjalan, bisa dalam satuan
pixel atau persen dari bidang yang ada
Contoh kode:
<marquee width="50%">MARQUEE LEBAR
50 PERSEN</marquee>
kode bgcolor="warna" digunakan untuk
memberikan warna latar pada marquee jika
diperlukan
Contoh kode marquee:
<marquee bgcolor="yellow">RUNNING
TEXT LATAR KUNING</marquee>
kode title="pesan" digunakan untuk
memunculkan pesan jika kursor mouse
diletakkan di jalur teks berjalan
Contoh kode:
<marquee title="BISA TERBACA
PESANNYA">TEKS BERJALAN DENGAN
PESAN</marquee>
kode scrollamount="angka" digunakan untuk
mengatur kecepatan pergerakan tulisan
semakin besar angkanya semakin kencang
Contoh kode:
<marquee scrollamount="14">MARQUEE
SPEED 14!!!</marquee>
kode direction="left/right/up/down" digunakan
untuk mengatur arah pergerakan running text
Contoh kode:
<marquee direction="right">MARQUEE
BERGERAK KE KANAN</marquee>
kode behavior="scroll/slide/alternate" digunakan untuk
mengatur type pergerakan
Scroll jika ingin teks bergerak terus ke suatu sisi dan muncul dari
sisi lain
Slide jika ingin teks bergerak sekali kemudian berhenti dan
diulangi lagi
Alternate jika ingin teks terlihat memantul/bouncing dari ujung
kembali ke ujung.
Contoh kode:
<marquee behavior="alternate">MARQUEE BERGERAK
BOLAK-BALIK</marquee>
Mengubah Huruf, Warna dan Ukuran Huruf Teks Berjalan
Marquee
Jenis huruf dan ukuran bisa diubah dengan menambahkan
kode style="font-family: impact; font-size:24px; color: #cc0000;"

font-family: impact; adalah kode untuk mengubah jenis huruf. Jika anda tidak suka
dengan font impact, silahkan diganti dengan Arial, Times New Roman, dan
lain-lain

font-size:24px; adalah kode untuk mengatur ukuran huruf. Ubah nilai 24 sesuka
hati anda. Semakin besar nilainya, maka semakin besar juga hurufnya.

color:#cc0000; adalah kode untuk mengatur warna huruf. Silahkan mengganti

kode hex #cc0000 dengan nilai hex yang anda suka.
<marquee bgcolor="yellow" style="font-family: impact;
font-size:24px; color:#cc0000;" >RUNNING TEXT LATAR
KUNING</marquee>
Membuat tulisan berjalan
<html>
<body>
<marquee font style=”bold” scrolldelay=”100”>
<font size=”16” face = “arial”>
<font color=”#EE6C0F”> selamat datang di website kami <marque>
<body>
</html>

Untuk mendapatkan code warna, maka buka tab baru dan ketik “Color
Picker Online” kemudian pilih warna sesuai selera dan copy code
warnanya dan paste di ….
 TERIMA KASIH
“Teknologi tidak akan pernah menggantikan guru-guru yang baik,
tapi teknologi bisa membantu guru-guru kita untuk mencapai
tujuan-tujuan dengan lebih baik” - Iwan Syahril