Templete Tema Blogger untuk Embed Link Apps Script untuk Administrasi Guru

Template Tema Blogger untuk Embed Link Apps Script Administrasi Guru

Dalam era digitalisasi sekolah, efisiensi adalah kunci. Mengelola administrasi guru kini tidak lagi harus menggunakan tumpukan kertas. Dengan memanfaatkan Google Apps Script dan Blogger, sekolah dapat memiliki sistem informasi internal yang rapi, profesional, dan dapat diakses dari mana saja tanpa biaya berlangganan mahal.

Manfaat Embed Apps Script ke Blogger:

Akses Terpusat: Guru hanya perlu satu URL blog untuk mengakses semua formulir dan laporan.
Tampilan Profesional: Menghilangkan kesan "tautan mentah" Google Script.
Keamanan & Navigasi: Memudahkan kontrol akses serta navigasi yang user-friendly.
Responsif: Sistem dapat diakses dengan nyaman melalui laptop maupun smartphone.

Langkah-langkah Pemasangan

Siapkan link Web App URL dari Google Apps Script Anda.
Masuk ke Dashboard Blogger > Tema > Edit HTML.
Hapus seluruh kode yang ada dan ganti dengan kode di bawah ini.
Sesuaikan Nama Sekolah dan Link Apps Script.
Klik Simpan.

Salin Kode Tema Berikut:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='false' b:defaultmessages='false' b:layouts='false' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<meta content='width=device-width, initial-scale=1' name='viewport'/>
<title>Administrasi Guru - SMPN 3 KERINCI</title>
<b:skin><![CDATA[
/* Reset Dasar */
body {
  margin: 0; padding: 0;
  font-family: 'Segoe UI', Roboto, Arial, sans-serif;
  background-color: #f4f7f6;
  overflow: hidden; 
}
.header-bar {
  background: #1a5f7a; color: white;
  padding: 8px 15px; text-align: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  border-bottom: 3px solid #f8b400;
}
.header-bar h1 {
  margin: 0; font-size: 1rem;
  letter-spacing: 0.5px; line-height: 1.2;
}
.header-bar p {
  margin: 2px 0 0; font-size: 0.7rem;
  opacity: 0.9; font-weight: 300;
}
.app-container {
  height: calc(100vh - 55px); 
  width: 100%;
}
iframe {
  width: 100%; height: 100%;
  border: none;
}
]]></b:skin>
</head>
<body>

<header class='header-bar'>
  <h1>SISTEM ADMINISTRASI GURU</h1>
  <!-- EDIT NAMA SEKOLAH ANDA DI BAWAH INI -->
  <p>SMP NEGERI 3 KERINCI</p>
</header>

<div class='app-container'>
  <!-- MASUKKAN LINK APPS SCRIPT ANDA DI BAWAH INI -->
  <iframe src='https://script.google.com........'>
    Memuat...
  </iframe>
</div>

<b:section id='main' showaddelement='false'/>
</body>
</html>

Tips SEO: Gunakan pengaturan Robots.txt jika Anda ingin sistem ini bersifat privat dan tidak terindeks publik.