Blogs
on June 20, 2020
Silahkan tonton video Membuat Halaman Admin – Header dan Footer di atas untuk mengikuti tutorial. Untuk mempermudah dalam pembelajaran, salin source code di bawah ini sesuai tutorial Membuat Halaman Admin – Header dan Footer yang ada dalam video
Kode 1
<!DOCTYPE html>
<html>
<head>
<meta name="robots" content="noindex">
<link rel="stylesheet" href="<?php echo base_url('aset/css/admin.css');?>">
<link rel="stylesheet" href="<?php echo base_url('aset/fontawesome/css/all.css');?>">
</head>
<body>
<div class="bk-admin">
<div class="adm-kiri">
<a href="<?php echo base_url(); ?>"><img src="<?php echo base_url(); ?>/aset/gambar/logo.jpg" alt="logo" class="logoadm"></a>
<ul>
<li><a href="<?php echo base_url('admin'); ?>"> Dashboard</a></li>
<li><a href="<?php echo base_url('admin/pengaturan'); ?>">Pengaturan Web</a></li>
<li><a href="<?php echo base_url('admin/uplogo'); ?>">Pengaturan Logo</a></li>
<li><a href="<?php echo base_url('admin/newsticker'); ?>">Newsticker</a></li>
<li><a href="<?php echo base_url('admin/kebijakan'); ?>">Kebijakan</a></li>
<li><a href="<?php echo base_url('admin/privasi'); ?>">Privasi</a></li>
<li><a href="<?php echo base_url('admin/kontak'); ?>">Kontak</a></li>
<li><a href="<?php echo base_url('admin/tentang'); ?>">Tentang</a></li>
</ul>
</div>
<div class="adm-kanan">
<div class="tek-hl"><?php echo $title; ?></div>
Kode 2
</div>
</div>
</body>
</html>
Kode 3
body {
margin: 0;
width: 100%;
}
.bk-admin {
display: flex;
height: 100%;
min-width: 400px;
}
.adm-kiri {
flex: 1;
}
.adm-kanan {
flex: 4;
background-color:rgb(241,241,241) ;
height: 100vh;
}
.adm-kanan * {
box-sizing: border-box;
}
.wrbg1 {
background-color:rgb(128,0,64);
}
.wrbg2 {
background-color:rgb(0,102,204);
}
.wrbg3 {
background-color:rgb(77,77,0);
}
.mrpd {
margin: 10px;
padding: 10px;
color: white;
font-weight: bold;
text-align: center;
border: 1px solid #ccc;
border-radius:10px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
background-color:rgb(31,31,20);
height: 100%;
overflow: auto;
}
li a {
display: block;
padding: 8px 16px;
text-decoration: none;
color: white;
font-weight: bold;
margin-top: 5px;
}
li a.active {
background-color:rgb(102,153,255);
color: white;
}
li a:hover:not(.active) {
background-color:rgb(85,85,85);
color: white;
}
.logoadm {
width: 170px;
height: 35px;
padding: 7px;
}
.papan {
background-color: white;
margin: 10px;
}
.papan form {
border: 3px solid #f1f1f1;
}
.papan .form-dft {
padding: 16px;
background-color: white;
}
input[type=text], input[type=password], input[type=file] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
}
textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
background-color: white;
}
input[type=text]:focus, input[type=password]:focus {
background-color:rgb(221,221,221);
outline: none;
}
.papan .daftarbtn {
background-color:rgb(76,175,80);
color: white;
padding: 11px 15px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100px;
}
.papan .daftarbtn:hover {
background-color:rgb(0,102,0);
font-weight: bold;
}
.papan a {
color: dodgerblue;
}
.tek-hl {
font-size: 24px;
font-weight: bold;
padding: 10px;
}
.adm-flx {
display: flex;
}
.aaa {
font-size: 50px;
}
.aaa2 {
font-size: 20px;
}
.aaa3 {
font-size: 40px;
margin-top: 10px;
}
@media screen and (max-width: 700px) {
.adm-flx {
flex-direction: column;
}
}
Posted in: CodeIgniter 4
Topics:
web berita
Be the first person to like this.
Hotelempfehlung
Hotel Schrenkhof
926 | Hotels
Das Hotel Schrenkhof befindet sich in Leonhardsweg 6 - Unterhaching. Besteht aus 25 Zimmern
Unterhaching - Deutschland
Torfhaus Harzresort
882 | Hotels
Das Torfhaus Harzresort befindet sich in Torfhaus 2 - Torfhaus. Besteht aus 47 Zimmern
Torfhaus - Deutschland
Younior-Hotel
855 | Hostels
Das Younior-Hotel befindet sich in Tribseer Damm 78 - Stralsund. Besteht aus 60 Zimmern
Stralsund - Deutschland