Di era digital, pengelolaan dokumen seperti ijazah dan transkrip nilai kini bisa dilakukan secara online. Sekolah Anda bisa menyediakan layanan Cek dan Unduh e-Ijazah berbasis web dengan menggunakan sistem yang simpel dan gratis, berbasis Google Drive dan kode HTML + JavaScript.

Sistem ini dapat ditanam langsung di halaman blog guru atau website sekolah tanpa perlu hosting atau server khusus, untuk demonya anda bisa kunjungi halaman ini https://www.mrmung.com/p/ijazah.html.

📦 Apa yang Bisa Dilakukan Sistem Ini?

• Menyediakan form input NIS dan Token
• Menampilkan data siswa setelah diverifikasi
• Menampilkan preview PDF ijazah/transkrip
• Menyediakan tombol Download PDF dan Buka di Tab Baru
• Semua file tersimpan aman di Google Drive

⚙️ Cara Kerja Sistem:

1. Data siswa disimpan dalam file CSV Google Sheet.
2. File CSV dipublikasikan dan diambil otomatis oleh script.
3. File ijazah/transkrip disimpan di Google Drive berdasarkan ID file, untuk mendapatkan ID file secara otomatis bisa gunakan Apps Script [Download kodenya disini]
   
4. Pengguna memasukkan NIS dan Token untuk verifikasi.
5. Jika cocok, sistem menampilkan data dan link unduhan PDF.

🧩 Contoh Struktur Data CSV

File Google Sheet Anda harus memiliki kolom seperti ini:

| nis  | token | nama          | sekolah                | idfile              |
|------|-------|---------------|------------------------|---------------------|
| 1234 | 123   | Amin Mungamar | SMP Negeri 1 Indonesia | 1a2b3c4d5e6f7g8h9ij |
  

idfile adalah ID file PDF dari Google Drive, bukan seluruh link.

💻 Langkah-langkah Menggunakan Script:

1. Copy seluruh kode HTML + CSS + JavaScript dari sistem yang tersedia [Download disini].
2. Ganti bagian:

   const csvURL = 'URL_CSV_DISINI';

   dengan link CSV Google Sheet yang telah dipublikasikan.
3. Upload ijazah/transkrip ke Google Drive dan ambil ID file-nya.
4. Tanam kode ke halaman blog sekolah atau web sekolah.

🔐 Keamanan Sistem

• Setiap siswa hanya bisa mengakses dokumen jika memiliki Token yang valid.
• Token dapat diberikan secara manual oleh pihak sekolah, atau bisa menggunakan tanggal lahir.

📌 Kelebihan Sistem Ini

• 💡 Gratis, tanpa biaya server atau database
• 📄 Dapat diakses 24 jam
• 🔒 Aman dengan verifikasi Token
• 📱 Bisa diakses dari HP atau laptop
• 🎨 Tampilan responsif dan bisa dikustom sesuai branding sekolah

Demikian, semoga bermanfaat.

Simak video panduannya DISINI.

Selengkapnya »

Di era digital saat ini, kebutuhan akan sistem absensi yang cepat, mudah diakses, dan terintegrasi menjadi sangat penting, terutama bagi lembaga pendidikan. Dalam artikel ini, kita akan membuat sistem absensi online yang modern dan responsif, dengan AI Canva atau HTML sebagai tampilan depan dan Google Sheets sebagai basis data backend menggunakan Google Apps Script.

Apa yang Akan Dibuat?

1. Tampilan absensi online berbasis web dengan filter kelas dan tombol kehadiran.
2. Backend yang terhubung langsung ke Google Sheet untuk menyimpan data siswa dan mencatat kehadiran.
3. Desain responsif dan modern menggunakan Tailwind CSS.

Langkah 1: Siapkan Backend (Google Apps Script)

1. Buka Google Spreadsheet buat dua sheet (Siswa dan Absensi)
2. Klik menu Ekstensi - Apps Script 
   
   
   
   
   
3. Buka Chat GBT atau Gemini tuliskan prompt berikut:
   

Buatkan file .gs dengan fungsi doGet(e) sebagai endpoint Web App.

1. Konfigurasi Awal:

 Definisikan sheetId, studentSheetName (contoh: "Siswa"), dan attendanceSheetName (contoh: "Absensi"). Pandu pengguna untuk mengganti sheetId sesuai Spreadsheet mereka.

2. GET action = 'getStudentData':

- Akses sheet studentSheetName.

- Baca data, baris pertama = header (misal: NO, NAMA, NIS, KELAS).

- Ubah ke array objek JSON.

- Jika sheet kosong atau hanya header, kembalikan [].

- Jika sheet tidak ditemukan, kembalikan {"status":"error", "message":"Sheet Data Siswa tidak ditemukan!"}.

- Return data JSON sebagai ContentService.createTextOutput(...).setMimeType(...).

- GET untuk Absensi (selain getStudentData):

- Akses sheet attendanceSheetName.

- Ambil & validasi parameter: NO, NAMA, NIS, KELAS, KEHADIRAN, TANGGAL.

- Jika tidak lengkap, kembalikan JSON error.

- Simpan data ke sheet dengan new Date() sebagai timestamp.

- Kembalikan {"status":"success", "message":"Absensi berhasil dicatat!"}.

📌 Ganti sheetId dengan ID Spreadsheet Anda.

Contoh: https://docs.google.com/spreadsheets/d/1CwAIYUB7aelqNe5LKHrJ9xzx1B2mJSiYT03rAdA8fwA/edit
ID Spreadsheet adalah: 1CwAIYUB7aelqNe5LKHrJ9xzx1B2mJSiYT03rAdA8fwA

Langkah 2: Buat Front-End (HTML + Tailwind CSS)

Salin prompt di bawah ini untuk minta dibuatkan AI Canva:

Buatkan saya kode HTML lengkap untuk sistem absensi online. Perhatikan poin-poin berikut untuk memastikan fungsionalitas pengiriman data berjalan dengan benar, mengingat masalah respons JSON dari backend yang sering terjadi:

1. Struktur Halaman:

- Sertakan <select> dengan id="classFilter" untuk memfilter kelas dari data siswa.

- Tampilkan tabel dengan id="studentTableBody" yang memiliki kolom: No., Nama, NIS, Kelas, Kehadiran, dan Aksi.

- Setiap baris siswa dalam tabel harus memiliki tombol-tombol H, I, S, A (Hadir, Izin, Sakit, Alfa) untuk mencatat kehadiran.

- Setiap tombol absensi harus memiliki data-attributes berikut: data-no, data-nama, data-nis, data-kelas, dan data-status.

2. Konfigurasi JavaScript:

Definisikan konstanta SCRIPT_URL sebagai endpoint Google Apps Script Anda: https://script.google.com/macros/s/WEBAP-ID/exec.

3. Fungsi Pengambilan Data (fetchStudentData):

- Buat fungsi fetchStudentData() untuk mengambil data siswa dari SCRIPT_URL dengan parameter ?action=getStudentData.

- Setelah menerima respons, validasi bahwa respons adalah array objek JSON yang valid, lalu simpan ke variabel global (misalnya studentsData) dan panggil populateClassFilter() dan renderStudents().

4. Fungsi Filter dan Render (populateClassFilter, renderStudents):

- Implementasikan populateClassFilter() untuk mengisi opsi dropdown filter kelas secara dinamis dari data siswa yang tersedia.

- Implementasikan renderStudents() untuk menampilkan data siswa ke dalam studentTableBody, dengan mempertimbangkan filter kelas yang dipilih.

5. Fungsi Pengiriman Absensi (handleAttendanceClick):

- Buat fungsi handleAttendanceClick(event) yang dipicu saat tombol kehadiran diklik.

- Dalam fungsi ini, ambil data siswa (no, nama, nis, kelas, status) dari event.currentTarget.dataset.

- PENTING - Perbaikan Masalah Respons: Kirim data absensi ke SCRIPT_URL menggunakan permintaan GET dengan parameter yang persis sama dengan yang diharapkan oleh Google Apps Script Anda (doGet(e)). Pastikan semua nama parameter HURUF KAPITAL dan cocok: action=Absensi, NO=..., NAMA=..., NIS=..., KELAS=..., KEHADIRAN=...,  (Gunakan KEHADIRAN, bukan STATUS), TANGGAL=... (Pastikan format tanggal YYYY-MM-DD dan disertakan)

- PENTING - Penanganan Respons Backend: Setelah fetch respons dari SCRIPT_URL, parse respons sebagai JSON. Periksa status pengiriman berdasarkan properti status dalam objek JSON yang dikembalikan (misalnya, if (result.status === 'success')). Jangan asumsikan adanya properti success yang berdiri sendiri.

- Perbarui status kehadiran siswa di tabel UI secara real-time setelah pengiriman sukses.

6. Sistem Notifikasi (showMessage):

Buat fungsi showMessage(msg, type) untuk menampilkan notifikasi sukses/gagal yang responsif di bagian atas halaman (gunakan animasi slide-in/fade-out). type bisa 'success' atau 'error'.

7. Desain dan Responsivitas:

- Gunakan Tailwind CSS untuk styling.

- Pastikan tata letak responsif untuk perangkat seluler dan desktop.

- Terapkan gaya modern dan clean, seperti penggunaan kartu, bayangan, dan rounded corners.

- Sertakan indikator loading saat data sedang diambil atau dikirim.

Sistem absensi online ini adalah solusi ringan dan powerful, cocok untuk sekolah atau komunitas kecil. Dengan integrasi antara Canva (atau HTML custom) sebagai front end dan Google Apps Script sebagai backend, Anda bisa membangun sistem real-time tanpa biaya server. Selamat mencoba.

Simak video panduan DISINI.

Selengkapnya »

Microsite adalah sebuah situs web kecil yang biasanya memiliki tujuan khusus, seperti promosi produk, kampanye pemasaran, atau portofolio pribadi. Dengan bantuan ChatGPT, Anda dapat dengan mudah membuat microsite yang menarik dan fungsional tanpa perlu keahlian pemrograman yang mendalam, sebagai contoh microsite yang saya buat dengan bantuan ChatGBT bisa diakses disini: https://mung.my.id 

Bagaimana cara membuatnya? mari kita belajar bersama dengan mengikuti panduan di bawah ini:

1. Menentukan Tujuan Microsite

Sebelum mulai membuat microsite, tentukan tujuan utama yang ingin dicapai. Beberapa contoh tujuan microsite adalah:

1. Menampilkan portofolio pribadi atau bisnis.
2. Mempromosikan sebuah acara atau produk.
3. Membuat halaman landing untuk kampanye iklan.
4. Menyediakan informasi tentang layanan tertentu.

2. Merancang Struktur dan Konten

Gunakan ChatGPT untuk membantu merancang struktur dan konten microsite. Struktur dasar microsite biasanya terdiri dari:

1. Header: Nama atau logo situs.
2. Navigasi: Menu untuk berpindah antar bagian.
3. Konten utama: Informasi utama yang ingin ditampilkan.
4. Footer: Kontak, sosial media, atau informasi tambahan.

Contoh permintaan ke ChatGPT:

"Buatkan microsite dengan 5 menu, konsep desainya: bagian atas header gambar bulat, bawahnya menu berjejer kebawah, bagian bawahnya icon sosmed dengan font awesome, dan bawahnya footer, warna gradasi dominan biru, buatkan yang keren dan elegant dalam 1 halaman HTML, CSS, JS"

3. Membuat Kode HTML, CSS, dan JavaScript

ChatGPT dapat membantu menghasilkan kode untuk microsite dengan cepat. Berikut contoh kode yang dihasilkan dengan permintaan di atas:

Kode HTML, CSS, JS jadi 1 halaman:

<!DOCTYPE html>

<html lang="id">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Microsite Elegan</title>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">

    <style>

        body {

            font-family: Arial, sans-serif;

            margin: 0;

            padding: 0;

            text-align: center;

            background: linear-gradient(to bottom, #1E3C72, #2A5298);

            color: white;

        }

        .container {

            max-width: 400px;

            margin: 50px auto;

            padding: 20px;

            background: rgba(255, 255, 255, 0.1);

            border-radius: 15px;

            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);

        }

        .profile-img {

            width: 120px;

            height: 120px;

            border-radius: 50%;

            border: 3px solid white;

            margin-bottom: 20px;

        }

        .menu a {

            display: block;

            padding: 15px;

            margin: 10px 0;

            background: rgba(255, 255, 255, 0.2);

            border-radius: 10px;

            text-decoration: none;

            color: white;

            font-weight: bold;

            transition: 0.3s;

        }

        .menu a:hover {

            background: rgba(255, 255, 255, 0.4);

            transform: scale(1.05);

        }

        .social-icons {

            margin: 20px 0;

        }

        .social-icons a {

            color: white;

            font-size: 24px;

            margin: 0 10px;

            transition: 0.3s;

        }

        .social-icons a:hover {

            color: #FFD700;

            transform: scale(1.2);

        }

        footer {

            margin-top: 20px;

            font-size: 14px;

            opacity: 0.8;

        }

    </style>

</head>

<body>

    <div class="container">

        <img src="https://via.placeholder.com/120" alt="Profile" class="profile-img">

        <h2>Nama Anda</h2>

        <div class="menu">

            <a href="#">Menu 1</a>

            <a href="#">Menu 2</a>

            <a href="#">Menu 3</a>

            <a href="#">Menu 4</a>

            <a href="#">Menu 5</a>

        </div>

        <div class="social-icons">

            <a href="#"><i class="fab fa-facebook"></i></a>

            <a href="#"><i class="fab fa-twitter"></i></a>

            <a href="#"><i class="fab fa-instagram"></i></a>

            <a href="#"><i class="fab fa-youtube"></i></a>

        </div>

        <footer>&copy; 2025 Nama Anda</footer>

    </div>

</body>

</html>

5. Menghosting Microsite

Setelah microsite selesai dibuat, langkah selanjutnya adalah menghostingnya. Anda bisa membeli domain dan sewa hosting terlebih dulu supaya hasilnya bisa lebih profesional karena menggunakan nama domain sendiri. Jika anda bingung bagaimana cara mengunggah microsite anda, silahkan bisa tanyakan ke ChatGPT dengan perintah:

"Bagaimana cara mengunggah microsite saya ke hosting?"

Membuat microsite dengan bantuan ChatGPT sangatlah mudah dan cepat. Dengan memanfaatkan AI, Anda dapat mendapatkan kode, saran desain, serta bantuan teknis untuk membuat microsite yang fungsional dan menarik. Cobalah untuk bereksperimen dengan berbagai fitur dan optimalkan tampilan agar sesuai dengan kebutuhan Anda. Selamat mencoba.

Selengkapnya »

Dalam era digital saat ini, penggunaan kode QR telah menjadi semakin umum, tidak terkecuali dalam hal sertifikat dan dokumen lain. Membuat dan menggunakan kode QR untuk sertifikat adalah cara yang efisien untuk menyimpan informasi untuk memverifikasi keaslian dokumen, sehingga bisa meminimalisir pemalsuan sertifikat kegiatan yang diselenggarakan.

Pada artikel ini akan saya bahas bagaimana cara membuat kode QR yang akan dipasang disertifikat peserta/ narasumber kegiatan yang diselenggarakan instansi pemerintah/ organisasi profesi.

Membuat Kode QR untuk Sertifikat

1. Buatlah dokumen resmi dengan kop surat, tanda tangan dan stempel resmi instansi/ organisasi profesi yang berisi daftar peserta kegiatan yang mendapatkan sertifikat, kemudian simpan dalam format PDF.
2. Buatlah postingan di web/ blog instansi/ organisasi profesi anda yang berisi daftar peserta yang mendapatkan sertifikat (baca cara menyematkan file PDF di blog).
3. Publikasikan postingan dan salin URL menuju postingan tentang daftar peserta kegiatan tersebut.
4. Buatlah kode QR yang berisi informasi URL postingan pada langkah ke 3, anda bisa menggunakan fasilitas yang ada di bit.ly atau bisa juga menggunakan qrcode-monkey.com 
5. Setelah kode QR berhasil dibuat, silahkan dipasang di desain sertifikat anda, dan selanjutnya bisa digunakan untuk generate sertifikat semua peserta.
   
   

Cara Verifikasi Dokumen dengan Kode QR

Pindai Kode QR: Penerima sertifikat atau pihak yang berkepentingan dapat menggunakan perangkat ponsel atau tablet dengan kamera untuk memindai kode QR yang terdapat pada sertifikat, bisa menggunakan google lens untuk scan kode QR, nantinya akan muncul URL menuju postingan pada web/ blog resmi penyelenggara kegiatan yang berisi daftar peserta yang mendapatkan sertifikat.

Demikian artikel tentang Membuat Kode QR dan Cara Mudah Verifikasi Keaslian Sertifikat, semoga bermanfaat.

Selengkapnya »

Membuat Karakter Media Sosial Keren dengan Wajah Sendiri saat ini cukup viral di internet. Dalam era digital ini, kehadiran di media sosial menjadi semakin penting. Salah satu cara untuk membuat profil media sosial Anda lebih menarik adalah dengan memiliki karakter yang unik dan keren. Dalam artikel ini, kita akan membahas langkah-langkah membuat karakter media sosial dengan wajah sendiri menggunakan Bing Image Creator dan DeepSwapper.

#Langkah 1: Menggunakan Bing Image Creator

Langkah pertama dalam menciptakan karakter media sosial yang keren adalah dengan menggunakan Bing Image Creator. Caranya cukup sederhana:

1. Buka Bing Image Creator
   Kunjungi situs Bing Image Creator dan mulai dengan mengetikkan prompt atau kata kunci yang mencerminkan karakter yang ingin Anda buat, contoh promptnya: "Buat ilustrasi 3D karakter guru pria  rambut belah kiri  duduk santai di atas logo media sosial "whatsApp". Karakter mengenakan batik hitam elegan yang kasual, dan sepatu sneakers. Latar belakang gambar adalah halaman profil media sosial whatsApp, ada gambaran teks chating jadi latar belakang rapi dan futuristik". 
2. Pilih Hasil yang Menarik
   Setelah memasukkan prompt, pilih hasil gambar yang paling sesuai dengan visi karakter Anda. Pastikan untuk memilih gambar yang memiliki elemen-elemen yang dapat Anda kustomisasi nantinya. 
3. Unduh Gambar
   Setelah memilih gambar, unduh hasilnya dan simpan di perangkat Anda. 

#Langkah 2: Menggunakan DeepSwapper untuk Merubah Wajah dengan Wajah Sendiri

Setelah Anda memiliki gambar karakter dari Bing Image Creator, langkah selanjutnya adalah menggantikan wajah karakter tersebut dengan wajah Anda sendiri menggunakan DeepSwapper:

1. Kunjungi DeepSwapper.com
   Buka situs DeepSwapper dan pilih opsi untuk mengganti wajah pada gambar.
2. Unggah Gambar Karakter dan Wajah Sendiri
   Unggah gambar karakter yang telah Anda unduh dari Bing Image Creator, dan juga unggah gambar wajah Anda sendiri. 
3. Proses dan Unduh Hasilnya
   Biarkan DeepSwapper melakukan prosesnya untuk menggantikan wajah karakter dengan wajah Anda sendiri. Setelah selesai, unduh hasil akhirnya. 

#Langkah 3: Personalisasi dan Bagikan di Media Sosial

1. Personalisasi Karakter
   Setelah Anda memiliki hasil akhir dari DeepSwapper, jangan ragu untuk melakukan beberapa personalisasi tambahan bisa menggunakan aplikasi desain grafis, misal canca, adobe photoshop, atau yang lainnya. Anda bisa menyesuaikan warna, gaya, atau elemen lainnya sesuai selera Anda.
2. Bagikan di Media Sosial
   Sekarang saatnya untuk membagikan karakter media sosial baru Anda! Unggah gambar tersebut ke profil media sosial Anda dan berikan keterangan yang menarik. 

Dengan menggunakan Bing Image Creator dan DeepSwapper, Anda dapat dengan mudah menciptakan karakter media sosial yang unik dan keren dengan wajah sendiri. Selain menjadi cara yang menyenangkan untuk mengekspresikan diri, ini juga dapat membuat profil media sosial Anda lebih menarik dan unik. Jangan lupa untuk selalu membagikan konten dengan bijak dan positif di dunia maya!

Berikut beberapa hasil perubahan karakter hasil bing dan DeepSwapper:

Selengkapnya »

Mengelola proses pengiriman sertifikat kepada peserta acara atau pelatihan bisa menjadi tugas yang cukup memakan waktu jika dilakukan secara manual. Namun, dengan memanfaatkan alat-alat yang tersedia seperti Google Sheets dan Add-On AutoCrat, Anda dapat membuat proses ini menjadi lebih efisien dan otomatis. Berikut adalah panduan langkah demi langkah untuk membuat sertifikat otomatis yang terkirim ke email peserta:

Langkah 1: Persiapkan Alat dan Bahan

1). Akun Google:
Pastikan Anda memiliki akun Google.

2). Desain Sertifikat:
Gunakan alat desain seperti Canva untuk membuat desain sertifikat yang menarik dan sesuai dengan tema acara Anda. Simpan desain tersebut dalam format gambar yang dapat digunakan nanti.

3). File Sertifikat di Google Slide:
Buatlah slide sertifikat menggunakan Google Slide. Unggah desain sertifikat dari Canva atau desain Anda sendiri ke Google Slide. Ini akan menjadi template yang akan diisi dengan data peserta.

4). File Data Peserta di Google Spreadsheet:
Siapkan spreadsheet di Google Sheets untuk menyimpan data peserta. Kolom-kolom dalam spreadsheet ini akan dihubungkan dengan elemen-elemen di template sertifikat. Pastikan setiap peserta memiliki informasi yang seperti nama, instansi, email, dan lainnya.

5). Add-On AutoCrat:
Install Add-On AutoCrat melalui Google Workspace Marketplace. AutoCrat memungkinkan Anda menggabungkan data dari Google Sheets ke dalam dokumen, termasuk sertifikat, dan mengirimnya secara otomatis.

a. Buka Google Sheets dan pilih "Add-Ons" -> "Get Add-ons."

b. Cari AutoCrat dan instal ke Google Sheets Anda.

c. Setelah instalasi, buka AutoCrat melalui "Add-ons" -> "AutoCrat" -> "Open."

Langkah 2: Konfigurasi AutoCrat untuk Penggabungan dan Pengiriman Email

1. Pilih "New Job" di AutoCrat.
2. Pilih spreadsheet yang berisi data peserta.
3. Tentukan dokumen Google Slide sebagai template sertifikat.
4. Pilih lokasi di mana dokumen yang dihasilkan akan disimpan.
5. Tentukan kolom-kolom yang sesuai antara spreadsheet dan template sertifikat.
6. Konfigurasi opsi pengiriman email, termasuk penambahan alamat email penerima dari kolom spreadsheet yang sesuai.

Langkah 3: Jalankan Proses Otomatis

1. Setelah konfigurasi selesai, simpan pengaturan AutoCrat.
2. Jalankan proses penggabungan dan pengiriman email dengan mengklik "Run Merge."

Dengan langkah-langkah di atas, AutoCrat akan menghasilkan sertifikat yang diisi dengan data peserta dan secara otomatis mengirimkannya ke email masing-masing peserta. Proses ini dapat menghemat waktu dan usaha Anda, memastikan bahwa setiap peserta menerima sertifikat mereka dengan mudah dan efisien.

Simak video panduan disini: https://youtu.be/A_1vS_WIF_0

Selengkapnya »

Google Play Console menyediakan platform bagi pengembang untuk mengelola aplikasi Android mereka, termasuk pengaturan, pembaruan, dan penghapusan aplikasi. Jika Anda ingin menghapus aplikasi Anda dari Google Play Store menggunakan versi terbaru dari Google Play Console, berikut adalah langkah-langkahnya:

1. Masuk ke Google Play Console https://play.google.com/apps/publish/ dan pilih akun developer anda
2. Pada kotak pencarian silahkan anda ketik "Katersediaan aplikasi"
   
3. Pilih aplikasi yang akan anda hapus dari playstore
4. Pilih opsi Tidak dipublikasikan - klik Batalkan Publikasi
   
5. Selesai

Catatan Penting:

• Penghapusan aplikasi mungkin tidak langsung mempengaruhi keberadaan aplikasi di perangkat pengguna. Proses ini membutuhkan waktu beberapa jam hingga beberapa hari.
• Penghapusan aplikasi dapat mempengaruhi ulasan dan peringkat aplikasi. Pertimbangkan untuk memberi informasi kepada pengguna tentang alasan penghapusan jika diperlukan.

Demikian cara Cara Menghapus Aplikasi di Google Play Store melalui Google Play Console, semoga bermanfaat.

Selengkapnya »

Pada zaman digital yang semakin maju, kehadiran situs web yang berkualitas menjadi semakin penting bagi bisnis dan individu untuk meningkatkan visibilitas mereka di internet. Google Sites menyediakan platform pembuatan situs web yang mudah digunakan, serta menyediakan opsi untuk menambahkan domain kustom, sebagai contoh: alamat google site anda https://sites.google.com/view/mungbisnis/beranda setelah dicustom domain akan menjadi https://www.mungbisnis.com. Dalam artikel ini, saya akan memberikan panduan lengkap tentang cara mengatur custom domain SEO-friendly pada Google Sites, sehingga Anda dapat memaksimalkan potensi situs web Anda.

Langkah 1: Pilih Domain Kustom yang SEO-Friendly

Langkah pertama dalam mengatur custom domain SEO-friendly pada Google Sites adalah memilih domain yang sesuai dengan konten situs web Anda. Penting untuk memilih domain yang mudah diingat, mudah dituliskan dan diucapkan, serta relevan dengan konten situs web Anda. Hindari penggunaan karakter yang membingungkan seperti angka atau tanda hubung yang berlebihan.

Sebagai contoh, jika Anda menjual bunga, pilih domain seperti www.bungamurah.com atau www.tokobunga.com, yang dapat dengan mudah diingat dan dihubungkan dengan konten situs web Anda. (Domain bisa anda beli di domain.mungbisnis.com)

Langkah 2: Verifikasi Domain

Setelah mempunyai domain, langkah selanjutnya adalah melakukan verifikasi domain.

Klik roda gerigi (setelan) di kanan atas - Klik Domain Kustom - Klik Mulai Penyiapan, perhatikan gambar di bawah ini:

Pada jendela Menyiapkan Domain Kustom, silahkan anda pilih Gunakan Domain dari pihak ketiga, kemudian klik tombol Berikutnya, perhatikan gambar di bawah ini:

Jika anda menginginkan alamat webnya dengan domain utama menggunakan www.domainanda.com, maka pengaturanya seperti gambar berikut:

Jika anda menginginkan alamat kustom domainya nanti menggunakan sub domain dari domain utama anda contoh: site.domainanda.com, maka pengaturanya seperti gambar berikut:

Jika penulisan sudah benar, akan muncul link Verifikasi kepemilikan Anda, silahkan anda klik link tersebut, akan muncul halaman yang berisi kode verifikasi seperti gambar berikut:

Setelah Anda memiliki kode verifikasi, Anda perlu mengakses akun registrar domain Anda dan menambahkan catatan DNS yang diperlukan untuk verifikasi domain. Setelah proses verifikasi selesai, Anda siap untuk melanjutkan ke langkah selanjutnya.

Langkah 3: Konfigurasi Pengaturan DNS

Setelah Anda memverifikasi kepemilikan domain Anda, Anda perlu mengatur pengaturan DNS pada domain Anda. Dalam hal ini, Anda perlu menambahkan catatan DNS CNAME. Untuk mengatur catatan CNAME, masukkan "www" sebagai nama host, "ghs.googlehosted.com" sebagai nilai CNAME, dan biarkan nilai TTL sebagai default.

Setelah semua pengaturan DNS selesai, simpan pengaturan dan tunggu beberapa saat (antara 30-60 menit).

Langkah 4: Perbarui Pengaturan Google Search Console

Supaya domain kustom anda terindex di google, Anda bisa memperbarui pengaturan di Google Search Console. Di sini, Anda perlu menambahkan domain kustom Anda sebagai properti di akun Search Console Anda, dan memverifikasi kepemilikan properti.

Setelah properti Anda diverifikasi, Anda perlu memperbarui pengaturan situs web di Google Search Console. Pilih "Setelan Situs" pada menu sisi kiri, dan pilih "Ubah Situs". Masukkan URL situs web Google Anda yang telah diatur dengan domain kustom, dan simpan pengaturan.

Selanjutnya, Anda dapat memonitor performa situs web Anda di Google Search Console dan memperbaiki masalah SEO yang mungkin terjadi.

Kesimpulan

Mengatur custom domain pada Google Sites adalah cara yang tepat untuk memaksimalkan potensi situs web Anda. Dengan langkah-langkah yang dijelaskan di atas, Anda dapat mengatur domain kustom Anda dan meningkatkan visibilitas situs web Anda di mesin pencari. Jangan lupa untuk memilih domain yang sesuai dengan konten situs web Anda, verifikasi kepemilikan domain, mengatur pengaturan DNS, mengatur pengalihan domain, dan memperbarui pengaturan di Google Search Console. Selamat mencoba!

Simak video Cara Setting Domain Kustom Google Site di Cloudflare di bawah ini:

Selengkapnya »

Pada posting Membuat Countdown Timer Soal Online Google Form dengan Javascript  tahun 2018 (5 tahun yang lalu) saya pernah menyampaikan harapan semoga beberapa tahun kedepan google akan menambahkan fitur countdown timer pada form yang dijadikan sebagai quiz/ soal online. Namun, ternyata sampai saat ini fitur tersebut belum tersedia. 

Kan sudah tersedia berbagai Add-on di marketplace google, hmm.... maaf sementara saya abaikan dulu, karena saya cari yang lebih flexibel bisa disematkan di blog Guru, dan tidak ada batasan akses karena GRATIS.

Pada posting ini saya modifikasi kode sebelumnya dengan mengatur tampilan dan menambah aksi setelah waktu pengerjaan soal habis, yaitu soal online akan tertutup dan akan muncul tombol bisa mengulang untuk membuka soal online kembali. Sayangnya pada kode ini belum bisa memaksa hasil pekerjaan siswa terkirim saat waktu habis, berikut tampilan soal online saat dibuka, dan saat waktu habis.

 

Bagi anda yang akan mencoba kode Countdown Timer Soal Online versi 2 ini, pastikan bahwa anda bisa menyematkan kode soal online di blog atau web anda, karena kode ini bekerja tidak langsung di google drive, melainkan bekerja saat diletakan di blog/ web, kemudian untuk soal onlinenya anda pilih metode sematkan, perhatikan langkah-langkahnya sebagai berikut:

1. Buatlah soal online seperti biasa di google drive, dengan memilih fitur google formulir, setelah selesai anda buat, silahkan anda klik tombol kirim/ send dan pilih sematkan HTML, dan copy script soal online yang ada.
   
2. Login ke blog anda, dan buka entri baru/ posting baru, 
3. Copy kode javascript dan kode css berikut di kolom postingan blog anda, pastikan dalam mode HTML (Bukan Tampilan Menulis):
   
   <div id="countdown"></div>
   <div id="overlay">
   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik0NuB_HmJNBCRMJtVqsVzNrN1rsunfAsRjoteYr-Qvzh_dmpWUsjlq8Lph_kojJQlRlngicsy957pYGxUy4KsmocET9_EiNCNu8wl_5Huc_YBp1VRaXvrPkPGfbzXKSc4EBgMAs8Xekktlk-vt5KLExCWkUXRkspBfabLC91CCzCMCmHQrsR0sQ/s1600/selesai.gif"/>
   <button id="reset-button">Ulangi Soal</button>
   <div id="pembuat">.:: www.mrmung.com ::.</div>
   </div>
   
   <!--Edit link soal online anda di bawah ini -->
   <div class="background"></div>
   <iframe id="quiz-frame" src="https://docs.google.com/forms/d/e/1FAIpQLScqPjRKcllwYK_tp3fpYlZ9aZWIoJds33-NnlIx9qajSfPuOg/viewform?embedded=true" frameborder="0"></iframe>
   
   <div style="position: fixed; left: 2px; top: 4px;z-index:9999999999;"> <a href="/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-2Uz6rYvIRz4UqA051xLMnI_O5-tYSsGdriZtdnUWRKHXsYZFV3ULvGSpC-FUuctIf0PJEOuFsh5JieFTVgeVpA0f9DD58vQTHj7ONoYWWLogqXPUOR63UVEMLZ0KChd8dZJm6pDwjh3otx83dJyU7ix61J83iJjw1ltWSmDYdsvYu5ImoYlEUQ/s1600/icon-home.png" alt="Home"></a> </div>
   
   <script>
   // Seting waktu pengerjaan soal di bawah ini (contoh: 60 menit)
   var countDownDate = new Date().getTime() + 60 * 60 * 1000;
   var x=setInterval(function(){var e=(new Date).getTime(),t=countDownDate-e,n=Math.floor(t/6e4),e=Math.floor(t%6e4/1e3);document.getElementById("countdown").innerHTML="Waktu Tersisa: "+n+" menit "+e+" detik",t<0&&(clearInterval(x),document.getElementById("quiz-frame").style.display="none",document.getElementById("overlay").style.display="flex",document.getElementById("reset-button").addEventListener("click",function(){location.reload()}))},1e3); </script>
   
   <style> body{margin:0;padding:0}iframe{position:fixed;top:0;left:0;width:100%;height:100%;border:none;z-index:9999}.background{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#90a5e1;z-index:9998}#countdown{position:fixed;top:0;left:0;width:100%;height:30px;background-color:#0b26af;color:#fff;font-size:20px;text-align:center;padding-top:5px;z-index:99999}#overlay{position:fixed;top:0;left:0;height:100%;width:100%;background-color:#333;display:none;align-items:center;justify-content:center;z-index:99999}#overlay-text{font-size:25px;color:#fff;text-align:center;margin-bottom:20px}#reset-button{margin-top:10px;padding:10px 20px;background-color:#4CAF50;color:#fff;font-size:24px;border:none;border-radius:10px;cursor:pointer;transition:all .3s ease;text-transform:uppercase}#reset-button:hover{background-color:#fff;color:#4CAF50}#comments {display: none;}#pembuat{position:fixed;bottom:0;left:0;width:100%;background-color:#333;color:#fff;text-align:center;padding:10px;z-index:99999999}@media screen and (max-width: 768px){#countdown{font-size:18px}#overlay-text{font-size:24px}#reset-button{padding:5px 10px;font-size:18px}} </style>
   
   
4. Kode javascript cuntdown timer versi 2 dan kode css di atas, yang perlu dirubah adalah teks warna merah, untuk warna merah silahkan anda ganti dengan kode soal online anda, sedangkan untuk warna biru silahkan anda ganti dengan angka sesuai kebutuhan anda, contoh di atas adalah 60 menit.
   
5. Klik publikasikan untuk menerbitkan soal online.

Untuk melihat hasil kode ini silahkan kunjungi SOAL ONLINE.

Demikian cara membuat Countdown Timer Soal Online Google Drive dengan Kode Javascript Versi 2, Semoga Bermanfaat.

Selengkapnya »

Cara order domain di MungBisnis.com silahkan anda ikuti langkah-langkah berikut: 

1. Buka http://domain.mungbisnis.com

Pada halaman ini silahkan tuliskan nama domain anda di kolom yang tersedia lengkap dengan top level domain yang anda inginkan, contoh: cvmungmedia.com, cvmungmedia.co.id, namadomain.id, namadomain.web.id, namadomain.my.id, namasekolah.sch.id, namaorganisasi.or.id,  dll., kemudian klik tombol Cari Domain untuk mengecek ketersediaan nama domain pilihan anda. Jika nama domain anda tersedia (Available) maka akan tampil seperti gambar berikut:


Tips memilih nama domain: 

• Pilih Nama Brand Anda Sendiri
• Jangan Gunakan Nama Merek Dagang Milik Orang Lain
• Buat Nama Domain Seunik dan Semenarik Mungkin
• Pastikan Mudah diingat, ditulis, Maupun diucapkan
• Buatlah Nama Domain yang Singkat

2. Klik tombol Continue to Cart untuk melanjutkan proses order domain ke langkah selanjutnya.

3. Jika anda belum mempunyai akun di mungbisnis.com, silahkan anda isi formulir lengkap seperti pada gambar berikut:

Pada pengisian no telp dan mobile no: silahkan anda isi kode negara dengan angka 62 dan kolom nomor wajib diisi nomor telpon anda, jika tidak mempunyai nomor telpon lokal, anda bisa isi dengan nomor hp anda, untuk isian usahakan selengkap mungkin dan benar, termasuk pengisian kolom kode pos (Zip) selanjutnya anda klik tombol Sign Up.

4. Pilih metode pembayaran, wire transfer atau paypal, disarankan menggunakan metode transfer, dan klik tombol Pay Now, dan akan ditampilkan nomor rekening untuk proses transfer biaya registrasi domain anda.

BCA KCP Suari NoRek:
409-036-2009
a.n Amin Mungamar

Setelah anda transfer biaya, segera lakukan konfirmasi melalui:
085640335006

Keterangan:
Pembelian domain belum termasuk biaya design dan setup custom domain blog.

Jika anda akan mensetting cutom domain blogspot sendiri, silahkan simak panduanya disini: Cara Setting Custom Domain Blogspot.

Terimakasih, dan Selamat berbelanja.

Selengkapnya »

Membuat dan Mengelola Grup di Aplikasi Telegram sebenarnya cukup mudah, karena memang sudah tersedia menu dan petunjuknya dengan jelas di aplikasi. Biar lebih jelas, pada postingan ini akan saya bahas mulai bagaimana membuat grup telegram, kemudian menambah bot pendukung grup telegram, menambah admin baru pada grup yang kita buat, mengatur grup telegram untuk anggota grup, terakhir akan saya jelaskan bagaimana melakukan video call dalam grup yang bisa menampung 1000 orang sekali panggilan, dan yang jelas gratis.

Sebelum mempraktikan pembuatan dan pengelolaan grup telegram, usahakan akun anda sudah disetting username telegramnya nya, caranya adalah sebagai berikut:

1. Buka aplikasi telegram anda
2. Klik garis tidak di pojok kiri atas - kemudian klik Setting
3. Klik Edit profil - Username - isi username anda, kemudian klik Save. 

A. Membuat Grup Telegram

Untuk membuat grup di telegram caranya adalah sebagai berikut:

1. Buka aplikasi telegram anda
2. Klik garis tiga di pojok kiri atas - dan klik New grup
   
   
3. Tuliskan nama grup yang anda inginkan, disini anda bisa juga langsung menambahkan foto profil grup anda, atau bisa juga dirubah dilain waktu - selanjutnya klik Next
    
4. Silahkan tambahkan 1 (satu) nama anggota grup bisa masukan trainer pendamping lain, kemudian klik tombol Create, dan grup telegram anda sudah selesai dibuat.
   

B. Menambah Bot Pendukung Grup Telegram

Bot di telegram sangatlah banyak, anda bisa mencari di telegram sesuai kebutuhan. Sebagai contoh pada panduan ini, saya persilahkan anda menambahkan Mungbot (bot telegram karya Mung Media) yang bisa berfungsi sebagai penyambut member baru, merespon member grup dalam memberi informasi berdasarkan kata kunci tertentu yang sudah saya tambahkan dalam database bot ini.

Untuk menambahkan Mungbot ini, silahkan lakukan langkah berikut:

1. Klik titik tiga di pojok kanan atas grup yang sudah anda buat - kemudian klik Add members
   
2. Pada kotak pencarian, silahkan anda ketik mungbot, jika sudah ditemukan silahkan anda klik mungbot tersebut, kemudian klik tombol Add.
   
3. Kalimat penyambut member baru mungbot defaultnya adalah: "Selamat datang Sdr/i [nama] @username di NAMA GRUP, semoga bermanfaat.", kalimat ini bisa diganti sesuai kebutuhan dengan cara mengetik /help kemudian kirim digrup, mungbot akan merespon dengan mengirimkan informasi tentang format penulisan untuk merubah kalimat penyambut member barunya.
   
4. Silahkan anda tuliskan kalimat sesuai keinginan dengan diawali /welcome disambung kalimat selanjutnya, bot ini mendukung tag [firstname], [username], [grupname], <b>teks tebal</b>, <i>teks miring</i>, maksudnya adalah ketika anda menuliskan tag [firstname], maka bot akan mendeteksi nama depan dari member yang baru bergabung.

C. Menambah Admin Baru

Untuk menambahkan admin baru pada grup yang sudah anda buat, ikuti langkah berikut:

1. Klik nama grup anda - kemudian klik titik tiga di pojok kanan atas - klik manage grup
   
   
2. Klik Administrators
   
3. Klik Add Administrator
   
4. Cari nama anggota grup yang akan dijadikan admin baru
   
   
   disini anda bisa menonaktifkan fitur-fitur untuk admin baru yang akan anda tambahkan, jika akan diberi hak penuh, anda bisa aktifkan semua fitur, kemudian dibagian bawah anda bisa tuliskan Admin/ Trainer dan terakhir klik tombol Save.
   
   

D. Mengatur grup telegram untuk anggota grup

Untuk mulai mengatur grup silahkan klik titik tiga di pojok kanan atas - klik manage grup

Perhatikan nomor 1, 2, dan no 3 pada gambar di bawah ini:

# No 1: berfungsi untuk mengatur tipe grup, yaitu Private Group atau Public Group, silahkan pilih sesuai kebutuhan, jika grupnya bersifat rahasia atau orang tertentu saja yang bisa bergabung ke dalam grup, maka pilihlah Private Group, link masuk ke grup dengan tipe private ini unik, bisa di rubah jika link dianggap bocor. 

Jika anda akan membuat group yang sifatnya umum, siapapun pengguna telegram bisa menemukan dan bergabung maka pilihlah Public Group, link masuk grup dengan tipe publik ini bisa dibuat dengan nama yang lebih simpel dan mudah diingat.

# No 2: berfungsi untuk mengatur histori chat dalam grup, anda bisa memilih visible jika menghendaki anggota baru bisa membaca chat sebelumnya, dan pilihan Hidden, jika anda menghendaki anggota baru tidak bisa membaca chat sebelumnya.

#No 3: berfungsi mengatur fitur-fitur yang bisa digunakan oleh anggota grup, silahkan sesuaikan dengan kebutuhan dan tipe grup yang anda buat.

E. Video Call dalam Grup Telegram

Untuk melakukan video call dalam grup telegram, silahkan ikuti langkah berikut:

1. Klik icon Chat di kanan atas, kemudian pilih Start video chat

2. Pilih tampilan nama anda saat video call grup berjalan, bisa akun pribadi atau tampil dengan nama grup, silahkan sesuaikan dengan selera dan kebutuhan anda, kemudian klik Continue.

Video call grup telegram akan aktif, sampai panduan ini dibuat, informasi dari telegram bahwa untuk video call grup telegram mampu menampung 1000 anggota dan dibatasi tampilan video untuk 30 anggota pertama saja, selebihnya hanya suara saja.

4. Untuk melakukan share screen dalam video call grup telegram ini silahkan anda klik icon share screen di bawah, kemudian klik jendela yang akan dibagikan, kemudian klik tombol SHARE SCREEN.

Demikian, selamat mencoba. Semoga bermanfaat.

Selengkapnya »