Untuk membuat tampilan beranda seperti dia atas, silakan ikuti langkah-langkah di bawah ini.
- Menggunakan Layout 1
- Jumlah menu yang ditampilkan di bagian footer hanya 5. Menu lain yang digunakan disembunyikan (available from menu dimatikan).
- Tempatkan modul Custom Page di bagian pertama
- Buka modul Custom Page dan tambahkan blok-blok di bawah ini secara berurutan.
1. Source Code
Blok pertama ini akan menampilkan nama user yang telah login dan sapaan sesuai dengan jam. Setelah terbuka blok source code, kopi dan tempatkan baris kode di bawah ini.
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta
content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0"
name="viewport">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="IE=8" http-equiv="X-UA-Compatible">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<title>Greatings</title>
<style type="text/css">
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans&family=Poppins:wght@200&display=swap');
html,
body,
p,
h1,
h2,
h3,
h4,
h5,
h6,
a,
div {
margin: 0;
padding: 0;
border: none;
font-family: 'Poppins', sans-serif !important;
}
body {
font-size: 15px;
width: 100%;
height: 100%;
overflow: auto;
-webkit-user-select: none;
-webkit-text-size-adjust: none;
-webkit-touch-callout: none;
line-height: 1;
background-color: transparent;
/* background-color: transparent !important;
background-image: url(https://www.halodoc.com/assets/img/home-v2/webp/home-banner-v3.svg);
background-position: center;
background-repeat: no-repeat;
background-size: contain;*/
}
body::-webkit-scrollbar {
display: none;
}
.private {
display: none;
border: none;
text-align: center;
text-decoration: none;
margin: 20px auto 4px auto;
cursor: pointer;
width: 60%;
letter-spacing: 0.7px;
font-size: 14px;
background-color: #fff;
padding: 10px;
border-radius: 10px;
color: #337ab7;
display: none !important;
}
.button2 {
background-color: #008CBA;
}
.button3 {
background-color: #f44336;
}
.button5 {
background-color: #555555;
}
div#userWelcomeInfo center {
color: #f25070;
font-size: 18px;
font-weight: bold;
padding: 0 0 0 20px;
}
div#userWelcomeInfo {
padding: 0;
}
div#userWelcomeInfo h6 {
color: #000;
text-align: left;
margin-top: 26px;
}
div#userWelcomeInfo center h5 {
color: #fff;
font-size: 18px;
text-transform: capitalize;
text-align: left;
font-weight: bold !important;
margin-top: 10px;
}
div#lblGreetings {
margin-top: 50px;
padding: 0 0 0 20px;
font-style: italic;
font-size: 15px;
}
div#lblGreetings b {
color: #fff;
font-size: 12px;
}
</style>
</head>
<body>
<div id="lblGreetings"></div>
<center>
<div id="userWelcomeInfo">
</div>
<div id="profil"></div>
<a class="private" data-offline="true" data-params="" data-state="my-account" target="_top"
href="javascript:void(0);">Edit Profil</a>
<label id="greeting"></label>
</center>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script>
var customer = parent.angular.element(parent.document.body).injector().get('Customer').customer;
console.log("customer object");
if (customer && customer.isLoggedIn) {
var welcomeStr = "<center><h5>" + customer.firstname + " " + customer.lastname + " <br/>";
document.getElementById("userWelcomeInfo").innerHTML = welcomeStr;
}
var x = document.getElementsByClassName("private");
var i;
for (i = 0; i < x.length; i++) {
if (customer && customer.isLoggedIn === true)
x[i].style.display = "block";
}
var x = document.getElementsByClassName("guest");
var i;
for (i = 0; i < x.length; i++) {
if (customer && customer.isLoggedIn === true)
x[i].style.display = "none";
}
// Akhir JS untuk customer
var inAppLinks = document.querySelectorAll("a[data-state]");
[].forEach.call(inAppLinks, function (el) {
el.href = "javascript:void(0);";
el.addEventListener("click", function () {
parent.postMessage("state-go=state:" + el.attributes["data-state"].value + ",offline:" + el.attributes["data-offline"].value + "," + el.attributes["data-params"].value + "", "*");
});
});
</script>
<script>
var myDate = new Date();
var hrs = myDate.getHours();
var greet;
if (hrs < 12)
greet = 'Good Morning';
else if (hrs >= 12 && hrs <= 17)
greet = 'Good Afternoon';
else if (hrs >= 17 && hrs <= 24)
greet = 'Good Evening';
document.getElementById('lblGreetings').innerHTML =
'<b>' + greet + '</b>';
</script>
</body>
</html>
Catatan:
Frame height pada blok Source Code diset ke 35, Height unit diset ke Percentage …
2. Text
Perhatikan gambar di bawah ini! Blok kedua ini akan menampilkan tombol Find your favorite Course. Ini sebetulnya hanya button yang diarahkan ke modul lain di aplikasi, jadi kesannya seperti menekan tombol mencari kemudian diarahkan ke halaman lain di aplikasi.
Klik ikon yang ditandai angka 1. Pada kotak dialog Insert Link Feature, klik atau pilih satu modul tujuan sesuai dengan kebutuhan. Klik OK untuk menambahkan.
Klik Source yang ditandai angka. Silakan ganti text sesuai dengan kebutuhan.
Selanjutnya, tambahkan gambar. Perhatikan bagian yang ditandai dengan angka 3 pada gambar di atas. Pastikan posisi gambar sama dengan yang ada pada gambar di atas.
Baris lengkap kode pada blok Text ini kurang lebih seperti di bawah ini.
<p><a data-offline="false" data-params="value_id:117461" data-state="booking-view">Find your favorite Course</a></p>
3. Text
Blok Text ketiga akan menampilkan tulisan Course Category. Silakan kopi kode berikut ke dalam halaman Text dengan terlebih dahulu menekan bagian Source seperti yang ditunjukan angka 2 pada blok Text 2 di atas.
<h2><strong>Course Category</strong></h2>
4. Text
Blok Text ini akan menampilkan 4 buah menu yang berjejer ke samping kanan, yakni menu Business, Creative, Technologi, dan Science. Untuk menambkannya, lakukan hal yang sama seperti pada blok Text 2 di atas. Jangan lupa arahkan setiap link ke modul berbeda sesuai dengan kebutuhan.
Baris kode dari blok Text 4 ini dapat dilihat dibawah ini.
<p><a data-offline="false" data-params="value_id:117460" data-state="event-list">Business</a></p>
<p><a data-offline="false" data-params="value_id:117461" data-state="booking-view">Creative</a></p>
<p><a data-offline="true" data-params="value_id:117463" data-state="form2-home">Technology</a></p>
<p><a data-offline="false" data-params="value_id:117459" data-state="music-playlist-list">Science</a></p>
5. Text
Blok Text ke-5 akan menampilkan tulisan Course List. Untuk menambahkannya, lakukan hal yang sama seperti pada blok Text ketiga di atas. Baris kode lengkapnya seperti berikut.
<h2><strong>Course List</strong></h2>
6. Text
Blok text ini akan menampilkan menu course list. Silakan lakukan hal yang sama seperti pada Blok ke-4 di atas. Perhatikan baris kode di bawah ini.
<p><a data-offline="false" data-params="value_id:117459" data-state="music-playlist-list">Administration<span>Data Mining for Business</span></a></p>
<p><a data-offline="false" data-params="value_id:117460" data-state="event-list">Data Analisyst<span>Data Mining for Business</span></a></p>
<p><a data-offline="false" data-params="value_id:117461" data-state="booking-view">Visual Design<span>Data Mining for Business</span></a></p>
<p><a data-offline="true" data-params="value_id:117462" data-state="image-list">Graphic Design<span>Data Mining for Business</span></a></p>
<p><a data-offline="true" data-params="value_id:117463" data-state="form2-home">Basic Programming<span>Data Mining for Business</span></a></p>
Catatan:
Setelah nama menu, Administrasi misalnya, terdapat penambahkan tag <span></span>. Ini digunakan jika menu yang digunakan ingin menampilkan subjudul atau penjelasan singkat. Pastikan formatnya persis seperti baris kode di atas.
7. Text
Blok ini akan menampilan tulisan Daily Project. Untuk menambahkannya, lakukan langkah yang sama seperti pada blok 3 dan 5 di atas. Baris kodenya seperti di bawah ini.
<h2><strong>Daily Project</strong></h2>
8. Slider
Blok terakhir akan menampilkan beberapa gambar. Silakan tambahkan beberapa gambar yang akan dijadikan slider.
- Kopi dan tempatkan CSS Beranda Aplikasi Kursus yang ada di Member Area ke tab Colors - Advanced Customisation CSS/SCSS pa editor builder.
