pada desain tampilan ini terdapat heder, menu, sidebar, konten, form login dan foter.
di menu terdapat menu home, blogger, tips facebook, tutorial, software dan about me.
disaat anda melakukan proses pengeditan dibutuhkan salah satu software edit script, jika belum memiliki software yang dimaksud, saya akan memberikan software edit script yang terkenal dan sudah dipakai oleh editting script profesional :
Notpad ++
software ini adalah software editting code. suport dengan berbagai bahasa pemograman seperti HTML, CSS, PHP, XML dan masih banyak lagi. jika anda belum mempunyai software ini silahkan anda download disini.
Sublime Text
Software ini juga sama kegunaannya dengan notpad ++. namun ada kelebihan tersendiri dari notpad++. saya dulunya menggunakan notpad ++, sekarang saya lebih cenderung ke software ini. jika belum mempunyai sofware Sublime Text silahkan klik disini.
Oke, kita mulai saja cara pembuatannya :
Pertama : anda harus memiliki salah satu software editting script diatas. jika sudah memilikinya, silahkan anda jalankan software tersebut.
Sebelum itu anda harus membuat sebuah folder baru, kita beri contoh nama foldernya webdesain. nantinya folder ini anda menyimpan file - file yang anda buat nantinya.
Silahkan anda copy script berikut di software yang anda buka tadi.
<!DOCTYPE html>
<html>
<head>
<title>Ngeblog Bareng Amran</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="menu.css">
</head>
<body>
<div class="wrap">
<div class="header">
<h1>Ngeblok Bareng Amran</h1>
<p>Tempatnya Berbagi Ilmu Komputer | Blogger | Software | Tutorial | Domain Dan Hosting | Facebook</p>
</div>
<div id="navcontainer">
<label class="show-menu" for="show-menu"><i class="fa fa-bars fa-1"></i></label>
<input autocomplete="off" id="show-menu" role="button" type="checkbox">
<ul id="menus">
<li><a href="https://ngebbar.blogspot.co.id" title="home">Home</a></li>
<li><a href="https://ngebbar.blogspot.co.id/search/label/Tutorial%20Blogger" title="pemrograman-web">Blogger</a></li>
<li><a href="https://ngebbar.blogspot.co.id/search/label/Facebook" title="framework">Tips Facebook</a></li>
<li><a href="https://ngebbar.blogspot.co.id/search/label/Tutorial" title="teknologi-informasi">Tutorial</a></li>
<li><a href="https://ngebbar.blogspot.co.id/search/label/Software" title="belajar-seo">Software</a></li>
<li><a href="https://ngebbar.blogspot.co.id/2016/10/pertama-kali-buat-blog.html" title="tips">About Me</a></li>
</ul>
<div style="clear:both;"></div>
</div>
<div class="tubuh">
<div class="sidebar">
sidebar
<form action="admin.php" method="post">
<table border="0" align="center">
<tr><td>USERNAME : <input type="text" name="username" ></td></tr>
<tr><td>PASSWORD : <input type="password" name="password" ></td></tr>
<tr>
<td>
<input type="submit" value="login">
<input type="reset" value="RESET">
</td>
</tr>
</table><hr>
</form>
</div>
<div class="content">
content
</div>
</div>
<div class="clear"></div>
<div class="footer">
<center>Copyright@2016 Amran Talibas</center>
</div>
</div>
</body>
</html>
<html>
<head>
<title>Ngeblog Bareng Amran</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="menu.css">
</head>
<body>
<div class="wrap">
<div class="header">
<h1>Ngeblok Bareng Amran</h1>
<p>Tempatnya Berbagi Ilmu Komputer | Blogger | Software | Tutorial | Domain Dan Hosting | Facebook</p>
</div>
<div id="navcontainer">
<label class="show-menu" for="show-menu"><i class="fa fa-bars fa-1"></i></label>
<input autocomplete="off" id="show-menu" role="button" type="checkbox">
<ul id="menus">
<li><a href="https://ngebbar.blogspot.co.id" title="home">Home</a></li>
<li><a href="https://ngebbar.blogspot.co.id/search/label/Tutorial%20Blogger" title="pemrograman-web">Blogger</a></li>
<li><a href="https://ngebbar.blogspot.co.id/search/label/Facebook" title="framework">Tips Facebook</a></li>
<li><a href="https://ngebbar.blogspot.co.id/search/label/Tutorial" title="teknologi-informasi">Tutorial</a></li>
<li><a href="https://ngebbar.blogspot.co.id/search/label/Software" title="belajar-seo">Software</a></li>
<li><a href="https://ngebbar.blogspot.co.id/2016/10/pertama-kali-buat-blog.html" title="tips">About Me</a></li>
</ul>
<div style="clear:both;"></div>
</div>
<div class="tubuh">
<div class="sidebar">
sidebar
<form action="admin.php" method="post">
<table border="0" align="center">
<tr><td>USERNAME : <input type="text" name="username" ></td></tr>
<tr><td>PASSWORD : <input type="password" name="password" ></td></tr>
<tr>
<td>
<input type="submit" value="login">
<input type="reset" value="RESET">
</td>
</tr>
</table><hr>
</form>
</div>
<div class="content">
content
</div>
</div>
<div class="clear"></div>
<div class="footer">
<center>Copyright@2016 Amran Talibas</center>
</div>
</div>
</body>
</html>
Simpan didalam folder tadi dengan nama index.php. lihat contoh gambar :
Buka New File baru di notpad dengan cara menekan CTRL + N. kemudian copy script dibawah ini
.wrap{
background: blue;
width: 60%;
margin: 10px auto;
}
.wrap .header{
background: brown;
/*height: 50px;*/
padding: 2px 10px;
}
.clear{
clear: both;
}
.tubuh{
height: 450px;
}
.wrap .badan .sidebar{
background: #6aa096;
float: left;
width: 25%;
height: 100%;
}
.wrap .badan .content{
background: #a3e673;
float: left;
height: 100%;
width: 75%;
}
.wrap .footer{
width: 100%;
padding: 10px;
}
.kiri{
margin-left:5px;
margin-top:5px;
padding:10px;
width:220px;
height:500px;
float:left;
background-color:#6aa096;
}
background: blue;
width: 60%;
margin: 10px auto;
}
.wrap .header{
background: brown;
/*height: 50px;*/
padding: 2px 10px;
}
.clear{
clear: both;
}
.tubuh{
height: 450px;
}
.wrap .badan .sidebar{
background: #6aa096;
float: left;
width: 25%;
height: 100%;
}
.wrap .badan .content{
background: #a3e673;
float: left;
height: 100%;
width: 75%;
}
.wrap .footer{
width: 100%;
padding: 10px;
}
.kiri{
margin-left:5px;
margin-top:5px;
padding:10px;
width:220px;
height:500px;
float:left;
background-color:#6aa096;
}
Simpan file diatas didalam folder tadi dengan nama style.css. copy lagi script dibawah ini, simpan dengan nama menu.css
body{font-family:"Roboto",sans-serif!important;font-size: 100%;margin:0px;padding:0px;}
#navcontainer ul {list-style-type:none;margin:0;padding:0;position: relative;}
#navcontainer li {display:inline-block;float: left;text-transform:uppercase;}
#navcontainer li a {padding:15px 26px;min-width:100px;height: 49px;text-align: center;line-height: 49px;color: #fff;background: #2f3036;text-decoration: none;}
#navcontainer li:hover a {background: #8A2BE2;}
#navcontainer li:hover ul a {background: #f3f3f3;color: #FFF8DC;height: 40px;line-height: 40px;}
#navcontainer li:hover ul a:hover {background: #8A2BE2;color: #fff;}
#navcontainer li ul {display: none;}
#navcontainer li ul li {display: block;float: none;}
#navcontainer li ul li a {width: auto;min-width: 100px;padding: 0 20px;text-align:left;}
#navcontainer ul li a:hover + .hidden, .hidden:hover {display: block;}
#navcontainer input[type=checkbox]{display: none;}
#navcontainer input[type=checkbox]:checked ~ #menus {display: block;}
#navcontainer .fa-1 {font-size: 2em;}
#navcontainer .fa-1 {
margin-right: 0.07142857em;
margin-left:0.6em;
}
@media screen and (max-width:1170px){
body,#navcontainer,div.span-14,div.span-24{width:100%!important;min-width:100%!important;}
}
@media screen and (max-width:980px){
#navcontainer li a {min-width:80px;}
}
@media screen and (max-width:760px){
#navcontainer ul {position: static;display: none;}
#navcontainer li {border-bottom: 1px solid #4d4d4d;}
#navcontainer ul li, #navcontainer li a {width: 100%;}
#navcontainer li a{display:block;height:auto;line-height:normal;}
#navcontainer li a {text-align:left;}
.show-menu {display:block!important;line-height:30px;}
.show-menu:hover {cursor:pointer;}
label {margin:0!important;}
}
apabila anda melakukan dengan benar makan akan tampil didalam folder webdesain seperti gambar :
silahkan anda jalankan dengan menggunakan browser anda pada file index.php
Sampai disni anda telah berhasil membuat desain tampilan website sederhana. jika anda masih kurang faham, silahkan tinggalkan komentar dibawah artikel ini. saya akan membantu keresahan anda.
saya ngeblog bareng amran, mengucapkan terima kasih atas kunjungan anda. untuk menjadi member blog ini, silahkan menginput email anda di kolom member yang berada di bawah artikel ini. jangan lupa untuk menjadi followers saya yah.
Tidak ada komentar:
Posting Komentar