Kode Generasi Pertama Blogspot :
<html> <head> <title>Title of Blog</title> <b:skin> <![CDATA[ /****CSS CODE*****/ ]]> </b:skin> </head> <body> <b:section id="hello" class="hello"></b:section> <p>Hello World</p> </body> </html>
Silahkan Lengkapi Formulir Code dibawah ini
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content= "width=device-width, user-scalable=no">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>GO FOR EDU CBT 1.0</title>
<link rel="icon" type="image/x-icon" href="https://i.postimg.cc/prBX2XnP/download-1-removebg-preview.png">
<style>
html {
position: fixed;
overflow: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
overflow-y: hidden; /* Hide vertical scrollbar */
overflow-x: hidden; /* Hide horizontal scrollbar */
}
.header {
background-color: #326091;
width: 100%;
}
.header img {
max-height: 40px;
margin: 20px 0 20px 20px;
}
.header-right {
float: right;
margin: 30px 20px 0 0;
}
.header-right a {
font-weight: bold;
font-size: 20px;
color: #74b9ff;
}
.header-right img {
max-width: 20px;
}
.formulir {
width: 100%;
height:100vh;
}
iframe {
height: 90%;
width: 100%;
padding-top: 8px;
position: static;
border: 0px;
margin-bottom: 200px;
}
#timer {
color: white;
font-size: 17px;
font-weight: bold;
}
#video-webcam {
max-width: 100px;
bottom: 0;
right: 0;
position: absolute;
margin-right: 18px;
margin-bottom: 18px;
border: 4px solid #326091;
}
.credit-link img {
bottom: 0;
left: 0;
position: absolute;
margin-left: 15px;
margin-bottom: 15px;
max-width: 40px;
}
@media only screen and (max-width: 600px) {
.header {
overflow: hidden;
background-color: #326091;
padding: 0px 0px;
}
.header img {
max-height: 15px;
float: left;
margin: 9px 0px 9px 9px;
}
.credit-link img {
max-width: 100px;
margin: 6px 0px 5px 5px;
}
.header-right {
margin: 13px 10px 0 0px;
}
.header-right a {
font-weight: bold;
font-size: 7px;
}
#timer {
color: white;
font-size: 7px;
font-weight: bold;
}
#video-webcam {
max-width: 50px;
bottom: 0;
right: 0;
position: absolute;
margin-right: 10px;
margin-bottom: 10px;
border: 2px solid #326091;
}
iframe {
padding-top: 2px;
height: 95%;
}
.credit-link img {
bottom: 0;
left: 0;
position: absolute;
margin-left: 10px;
margin-bottom: 10px;
max-width: 30px;
}
}
}
</style>
</head>
<body>
<div class="header">
<img src="https://drive.usercontent.google.com/download?id=1gXK70htA4Tng9OBbppweA7v3z8TOWTs-&authuser=0">
<div class="header-right">
<div id="timer">
<span id="time"></span>
<a class="fa fa-clock-o"></a>
</div>
</div>
</div>
<div class='credit-link'>
<img src="https://i.postimg.cc/JtVTvfjQ/Presentasi-tanpa-judul-20.png">
</div>
<div class="formulir">
<span id="form">
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSeO-MSTJbJ-FVyipFu2MCtOmxskQg52PVX2b2r5sC13FdIs7Q/viewform?usp=sf_link">LOADING</iframe><br />
</span>
</div>
<div>
<video autoplay="true" id="video-webcam">
Upgrade Browser Terbaru!
</video>
</div>
</body>
<script>
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
var batas = timer + 60*2 ;
setInterval(function () {
minutes = parseInt(timer / 60, 10);
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (--timer < 0) {
document.getElementById("timer").innerHTML = "Waktu Anda tinggal 2 Menit lagi, pastikan sudah menjawab semua soal! Sebelum Soal di tutup.";
}
if (--batas < 0) {
document.getElementById("form").style.visibility = "hidden";
document.getElementById("timer").style.visibility = "hidden";
}
}, 1000);
}
window.onload = function () {
var fiveMinutes = 60 * 120,
display = document.querySelector('#time');
startTimer(fiveMinutes, display);
};
// seleksi elemen video
var video = document.querySelector("#video-webcam");
// minta izin user
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;
// jika user memberikan izin
if (navigator.getUserMedia) {
// jalankan fungsi handleVideo, dan videoError jika izin ditolak
navigator.getUserMedia({ video: true }, handleVideo, videoError);
}
// fungsi ini akan dieksekusi jika izin telah diberikan
function handleVideo(stream) {
video.srcObject = stream;
}
// fungsi ini akan dieksekusi kalau user menolak izin
function videoError(e) {
// do something
alert("Izinkan menggunakan webcam!")
}
$(document).ready(function () { if ($("#change,.change").attr("href") != "##") {
window.location.href = "##"; }});
</script>
</html>
Penjelasan Warna:
Oren : Merubah Header (link JPG)
Merah : Merubah Link google forms (link panjangnya)
Biru : Merubah durasi waktu pengerjaan
Kuning : merubah deskripsi waktu
