Membuat Template Admin sederhana dengan HTML dan CSS
Theme admin gunanya bagi mengatur data yang di tampilkan kepada user, bagus itu tampilan, jenis huruf, paragraf dan lain sebagainya. Nah kali ini saya akan menshare bagaimana Cara Membuat Template Admin sederhana dengan HTML dan CSS, oke seketika saja kita praktekan.
Pertam tama kalian dapat buka text editor kalian dan ketikan file index.html di bawah ini.
index.html
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=utf-8>
<meta http-equiv=X-UA-Compatible content=IE=edge>
<meta name=viewport content=width=device-width, initial-scale=1>
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>admin Theme</title>
<!-- Latest compiled and minified CSS -->
<link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css integrity=sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u crossorigin=anonymous>
<!-- Optional theme -->
<link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css integrity=sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp crossorigin=anonymous>
<link href=https://fonts.googleapis.com/css?family=Anton rel=stylesheet>
<link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css>
<link rel=stylesheet href=style.css>
</head>
<body>
<div class=wrapper>
<nav class=navbar navbar-default>
<div class=navbar-header>
<button type=button class=navbar-toggle collapsed data-toggle=collapse data-target=#bs-example-navbar-collapse-1 aria-expanded=false>
<span class=sr-only>Toggle navigation</span>
<span class=icon-bar></span>
<span class=icon-bar></span>
<span class=icon-bar></span>
</button>
<a class=navbar-brand href=#>Source Code Aplikasi</a>
</div>
</nav>
<aside class=sidebar>
<fitur>
<ul class=menu-content>
<li><a href=#><i class=fa fa-home></i> Home</a></li>
<li>
<a href=#><i class=fa fa-cube></i> <span>Data Master</span> <i class=fa fa-angle-down pull-right></i></a>
<ul>
<li><a href=>Merk</a></li>
<li><a href=>Kategori</a></li>
<li><a href=>Produk</a></li>
</ul>
</li>
<li><a href=#><i class=fa fa-shopping-basket></i> <span>Pembelian</span></a></li>
</ul>
</fitur>
</aside>
<section class=content>
<div class=inner>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum suscipit consequuntur in, perspiciatis laudantium ipsa fugit. Iure esse saepe error dolore quod, laboriosam magnam quam totam debitis, ullam cum quasi!
</p>
</div>
</section>
</div>
</body>
</html>
ketika kode javascrip di bawah tag penutup div
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js”></script>
<!– Include all compiled plugins (below), or include individual files as needed –>
<!– Latest compiled and minified JavaScript –>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js” integrity=”sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa” crossorigin=”anonymous”></script>
<script>
$(“fitur li > a”).click(function(e) $(this).next().slideDown(),e.stopPropagation()
);
</script>
Bikin file dengan nama style.css
style.css
body{
font-family: 'Quicksand', sans-serif;
}
.wrapper{
width: 100%;
height: 100%;
}
.navbar{
margin-bottom: 0;
}
.sidebar{
width: 100%;
height: 100%;
background: #293949;
position: absolute;
z-index: 100;
}
ul{
padding: 0;
margin-left: -40px;
}
ul li{
list-style: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}
ul li a{
text-decoration: none;
color: #aeb2b7;
display: block;
padding: 19px 0px 18px 25px;
transition: all 200ms ease-in;
}
ul li a:hover{
text-decoration: none;
color: #1abc9c;
}
ul li a:visited{
text-decoration: none;
color: #fff;
}
li li a span{
display: inline-block;
}
ul ul{
display: none;
margin:0px;
}
ul li a .fa-angle-down{
margin-right: 10px;
}
/*apabila lebar min 768px*/
@media(min-width: 768px) {
.sidebar{
width: 240px;
}
.content{
margin-left: 250px;
}
.inner{
padding: 15px;
}
}tampilan nya akan seperti di bawah ini, dan ini hanya sebuah tampilan yang kegunaan kegunaan nya akan kita bikin di artikel berikutnya.
sekianlah panduan membangun Membuat Template Admin sederhana dengan HTML dan CSS.
Sumber https://kursuswebsite.org
