Membuat Tampilan Menu Menarik di Kelas Maya

 

Untuk membuat kelas maya lebih menarik, salah satu kreasi yang saya lakukan adalah membuat menu-menu pada halaman modul. Kegiatan pembelajaran di kelas maya saya buat dalam bentuk daftar menu. Kita dapat membuat daftar menu dengan cara sederhana tanpa bantuan aplikasi tambahan. Sahabat Rumah Belajar, pada artikel kali ini saya akan berbagi cara membuat tampilan kelas maya dengan menggunakan ikon gambar untuk membuat menu yang menarik.

Adapun langkah-langkah yang saya lakukan adalah, yang pertama merancang menu apa saja yang akan ditampilkan dikelas maya. Untuk langkah ini, sahabat bisa membuat daftar menu sesuai keinginan dalam pembelajaran di kelas maya nantinya. Tidak ada kriteria khusus untuk jenis menu yang akan dibuat. Pada kelas maya yang saya buat buat menunya adalah yang pertama Rumah Belajar, Berdo'a, Pengantar, Daftar Hadir, Tujuan Pembelajaran, Materi/LKPD, Video, Laboratorium Maya, Kuis, Forum Diskusi, dan Grup Whatsapp. Menu-menu tersebut saya sesuaikan dengan langkah kegiatan pembelajaran yang akan saya terapkan di kelas maya. Sahabat rumah belajar dapat menyesuaikan menu yang akan dibuat sesuai dengan kegiatan pembelajaran yang sahabat lakukan.

Langkah berikutnya adalah saya mencari gambar ikon-ikon menarik untuk ditampilkan pada setiap menu. Gambar untuk ikon saya telusuri di pencarian Google dan laman freepik.com. Selanjutnya saya mengedit ikon-ikon tersebut menjadi daftar menu di aplikasi Photoshop. Saya menggunakan Photoshop karena kita bisa memodifikasi gambar dan mengubah warna dengan mudah serta dapat disimpan dalam berbagai format file gambar seperti jpg, jpeg, png, dan gif. Untuk langkah ini sahabat bisa menggunakan aplikasi editor gambar yang lain. Berikut tampilan salah satu ikon menu yang sudah saya buat di aplikasi Photoshop:

Setelah semua menu dengan ikonnya lengkap, langkah berikutnya adalah mengunggah seluruh gambar menu ke laman imgbb.com. Di sini kita dapat menyimpan file gambar dalam bentuk digital (cloud storage). Untuk menyimpan gambar di laman imgbb.com, sahabat harus mendaftar terlebih dahulu. Pendaftaran dapat digunakan menggunakan akun gmail dan langkahnya cukup sederhana. Penyimpanan gambar juga dapat dilakukan pada laman yang lain dengan layanan serupa. Setelah mendaftar, kita tinggal unggah seluruh file gambar untuk menu tersebut ke laman imgbb.com maka seluruh gambar tersebut akan tersimpan. Tujuannya disimpan secara online agar mudah memanggil file gambar tersebut ke dalam modul kelas maya dan tidak memberatkan server Rumah Belajar. Selain itu, pembuatan materi di kelas maya dapat dilakukan menggunakan kode HTML, jadi kita cukup menautkan file tersebut ke dalam kelas maya menggunakan kode alamat dari setiap file tersebut.

Tempat penyimpanan file gambar secara online di imgbb.com

Langkah selanjutnya adalah menyusun menu di kelas maya. Caranya yang pertama login ke salah satu kelas kemudian klik Lihat Detail, lalu klik Modul dan klik Tambah Modul pada salah satu kegiatan belajar (jika belum ada modul, klik edit jika modul sudah ada). Kemudian isikan judul materi dan jam pembelajaran seperti biasa. Kemudian di kolom Deskripsi Modul klik icon kode HTML pada bagian pojok kiri atas untuk menampilkan kan kode HTML. Selanjutnya ketikan kode html seperti berikut:

<a href="alamat laman yang akan diakses"><img src="tautan embed gambar" alt="images" border="0"></a>

Kode tersebut berguna untuk menampilkan satu gambar untuk satu menu. Untuk menu berikutnya kita tinggal menduplikatkan kode tersebut. Kode html tersebut berisi perintah tentang tautan menu yang akan diakses dan alamat tautan gambar di laman imgbb.com. Jadi di sini kita tinggal menempelkan alamat dari gambar yang diambil dari tempat penyimpanan gambar ke kode html tersebut dan juga alamat dari menu yang akan diakses.

Cara mengedit deskripsi modul dengan kode HTML

Sebagai contoh menu Rumah Belajar, kode html untuk gambar menu rumah belajar dari laman imgbb.com pada akun saya adalah https://i.ibb.co/Vgb5bt5/rumahbelajar.png, kemudian akan saya takutkan dengan laman portal rumah belajar dengan alamat https://belajar.kemdikbud.go.id/. jadi kode html nya akan menjadi seperti berikut:

<a href="https://belajar.kemdikbud.go.id/"><img src="https://i.ibb.co/Vgb5bt5/rumahbelajar.png" alt="images" border="0"></a>

Kemudian untuk melihat tampilannya silakan klik kembali icon kode HTML pada modul. Tujuannya adalah untuk melihat apakah kode html yang kita ketikkan sudah benar. Jika terdapat kesalahan maka gambar tidak akan muncul begitu juga dengan tautan yang akan kita akses. Jika menu sudah tampil, saya melakukan langkah yang sama untuk membuat menu lainnya dan jangan lupa untuk klik Simpan untuk menyimpan. Tampilan modul kelas maya yang sudah saya buat seperti gambar berikut:

Langkah terakhir adalah mencoba untuk mengakses menu-menu tersebut Apakah sudah berjalan sesuai dengan yang diinginkan. Caranya adalah dengan mengklik lihat kelas. Ini adalah tampilan yang nantinya akan muncul pada akun siswa. Kemudian klik pada masing-masing menu untuk melihat kesesuaian antara menu dengan link yang akan diakses.

Demikianlah cara membuat tampilan menu menarik pada kelas maya. Cara ini dapat divariasikan untuk membuat tampilan yang lebih menarik. Kreasi seperti ini lakukan dengan harapan siswa lebih mudah dalam mengakses kegiatan pembelajaran.