NAME : Muhammad Reza Padillah

BIRTHDAY : 20-06-1998

COUNTRY : Samarinda, Indonesia

STATUS : Kamu Human Error !


Toward #1 IT Vocatioanal School In Indonesia .: SMK Ti Airlangga :.

Sunday, 26 January 2014

#ShareInspirasi Membuat Header Sederhana Dengan Bantuan Bootstrap

Posted By: Nulled on: 22:52 In: ,
Share it Please
" Ada Yang Pernah Membuat Header Yang Simple Dengan Bantuan Bootstrap, Yap Dengan Bootstrap Tampilan Web Kita Menjadi Lebih Baik " . Dan Berikut Screenshoot Header Yang Akan Kita Buat ;


Walau Terlihat Simple , Mungkin Itu Akan Berguna Bagi Yang Baru Belajar Dunia Web :D, Langsung Saja Lah.

1. Kita Ketik Dulu Kerangka HTML Nya Seperti Biasa.

<html>
<head>
<title></title>
</head>
<body>

</body>
</html>

2. Lalu Link Kan CSS Nya Bootstrap Dan Style.css Kita


<html>
<head>
<title>Mainan Iseng</title>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

</body>
</html>

3. Lalu Ketik Atau Copy Kode Nya Sebagai Berikut ;



<header>


<div id="garis">
<p>| <a href="#">Daftar Dulu</a></p>
</div>

<div id="masuk">
<form class="form-inline">
<input type="text" class="input-medium" placeholder="Email Mu">
<input type="password" class="input-medium" placeholder="Password">
<button type="submit" class="btn btn-info">Masuk</button>
</form>
</div>

<div id="promosi">
<a href="http://website-inspirasi.blogspot.com" title="Web Design Tutorial"><img src="code2.png"></a>
<p>#Share Your Website Design</p>
</div>


</header>

4. Kalau Sudah Lalu Kita Buat CSS Nya Ketik Atau Copy Kode Nya Di Teks Editor Mu :)

body{
margin: 0;
padding: 0;
background-color: whitesmoke;
}

header{
background-color: #F19075;
width: 100%;
height: 51px;
float: right;
}

#masuk{
float: right;
margin-right: 10px;
margin-top: 10px;
}

#garis p{
font-size: 35px;
float: right;
margin-right: 90px;
margin-top: 11px;
color: #666;
}

#garis a{
font-size: 15px;
float: right;
margin-right: -90px;
margin-top: -15px;
padding: 0 10px;
color: #333333;
}

#promosi img{
width: 50px;
height: 50px;
margin-left: 10px;
}

#promosi p{
margin-left: 70px;
margin-top: -35px;
font-family: lastwaerk regular;
color: #333333;
font-size: 25px;
}

Nah Maka Akan terlihat Seperti Ini Yang Sebelah Kiri Hiraukan Saja.

Gimana Walau Terlihat Jelek Tapi Berguna Kan Bagi kalian Yang Baru Belajar :P.

" Agar Kalian Lebih Mudah Untuk Mengganti Nya Silahkan Download Filenya Disini " Atau " Bisa Di Via JSFiddle Disini "

Written by

Blogger Muda Yang Masih Berstatus Pelajar, Yang Berkecimpung Di Dunia IT Semenjak Tahun 2013 Dan Ingin Berbagi Ilmu Pengetahuan Tentang Programming Web Design,Desktop Application, Tips Blogging, Google Adsense, Dan Internet Marketing. Temukan Celotehan Saya Di Twitter @Anaksmkti

2 comments:

Subscribe to: Post Comments (Atom)

© 2014 Website Inspirasi. Template Created By Templateism, Full Redesigned By Muhammad Reza Padillah