Tutorial, membuat halaman sebagai media belajar mirip seperti LMS dalam kemasan blogspot
Ditulis
oleh: Tion Iswanto
Hai,
bersama mimin lagi nih.
kesempatan
kali ini mimin mau berbagi tutorial cara membuat halaman mirip seperti lms di
blogspot.
ini
penting banget, khususnya buat kamu calon guru atau yang udah jadi guru maupun
intruktur, ini bisa dijadikan salah satu bahan media ajar baik di kelas formal
maupun kelas kursus.
salah
satu cara alternatif, dan banyak bisa dimodifikasi.
termasuk
mimin, blogspot akan dijadikan salah satu bahan media ajar.
lalu,
apa aja fitur yang bisa di modifikasi min?
wah,
banyak banget, terutama bisa didesai seperti lms dalam kemasan blogspot seperti
membuat halaman bahan ajar, file ppt, video, penugasan atau quis.
lagi-lagi
cara ini harus membiasakan menggunakan coding, ups, tapi tenang, kamu tidak
usah khawatir, cukup copas apa yang akan mimin bagikan di sini.
tentunya
coding ini udah keren cssnya dirancang langsung sama ahlinya, mimin hanya
dimodifikasi biar mudah dipahami.
oke
deh tidak usah berlama-lama lagi, kita langsung ke tutorialnya:
berikut
langkah-langkahnya:
1.
buka blogger kalian
2.
setelah terbuka, kamu menuju ke halaman, lalu buat halaman baru.
3.
berikan judul, misal "kursus komputer"
4.
ubah modenya ke mode html.
5.
lalu vastekan kode di bawah ini, lalu publikasikan.
catatan:
kolom komentar haru dimatikan terlebih dahulu ya.
kemudian
ubahlah link yang ada di kode dengan link url kalian sesuai sub menunya ya.
selamat mencoba, semoga berhasil.
<!DOCTYPE
html>
<html>
<head>
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-heading {
font-size: 16px;
font-weight: bold;
color: #333;
padding: 10px;
cursor: pointer;
background-color: #f9f9f9;
border: none;
outline: none;
transition: background-color 0.3s ease;
}
.dropdown-heading:hover {
background-color: #eaeaea;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
box-shadow: 0px 8px 16px 0px
rgba(0,0,0,0.2);
padding: 10px;
z-index: 1;
}
.dropdown-content a {
display: block;
color: #333;
padding: 5px 0;
text-decoration: none;
transition: background-color 0.3s ease;
}
.dropdown-content a:hover {
background-color: #eaeaea;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropdown-heading {
background-color: #eaeaea;
}
</style>
</head>
<body>
<div class="dropdown">
<h1
class="dropdown-heading">Pertemuan 1</h1>
<div
class="dropdown-content">
<a
href="https://www.rajanetra.com/bahan-ajar/">Bahan Ajar</a>
<a
href="https://rajanetra.com/ppt/">PPT</a>
<a
href="https://www.rajanetra.com/video/">Video</a>
<a
href="https://www.rajanetra.com/penugasan/">Penugasan</a>
</div>
</div>
<div class="dropdown">
<h1
class="dropdown-heading">Pertemuan 2</h1>
<div
class="dropdown-content">
<a
href="https://www.rajanetra.com/bahan-ajar/">Bahan Ajar</a>
<a
href="https://rajanetra.com/ppt/">PPT</a>
<a
href="https://www.rajanetra.com/video/">Video</a>
<a
href="https://www.rajanetra.com/penugasan/">Penugasan</a>
</div>
</div>
<div class="dropdown">
<h1
class="dropdown-heading">Pertemuan 3</h1>
<div
class="dropdown-content">
<a
href="https://www.rajanetra.com/bahan-ajar/">Bahan Ajar</a>
<a
href="https://rajanetra.com/ppt/">PPT</a>
<a
href="https://www.rajanetra.com/video/">Video</a>
<a
href="https://www.rajanetra.com/penugasan/">Penugasan</a>
</div>
</div>
<script>
var dropdownHeadings = document.querySelectorAll('.dropdown-heading');
dropdownHeadings.forEach(function(heading)
{
heading.addEventListener('click',
function() {
var content = this.nextElementSibling;
content.style.display =
(content.style.display === 'block') ? 'none' : 'block';
});
});
document.addEventListener('keydown',
function(event) {
if (event.key === 'h') {
var dropdownContents =
document.querySelectorAll('.dropdown-content');
dropdownContents.forEach(function(content) {
content.style.display = 'block';
});
}
});
</script>
</body>
</html>
