Halo kawan, di artikel ini kita akan membahas tentang bagaimana membuat website kita menjadi di tengah. Website yang berada di tengah-tengah akan lebih bagus ketimbang berada di pinggir kiri ataupun kanan.
Karena saat kita memasuki sebuah website ataupun blog kita akan melihat dari sisi tampilan dulu, jika tampilan sudah nyaman dilihat maka membacapun juga akan menjadi lebih nyaman.
Dari maka itulah kita akan membuat website kita berada di tengah-tengah agar pembaca lebih fokus ditengah. Untuk membuatnya kita cukup edit saja body-nya di css dengan memberikan width dan margin website itu sendiri.
Jika, kawan kesulitan memahaminya silahkan simak beberapa penjelasan saya berikut.
Membuat website di tengah
Nah, untuk membuat website menjadi di tengah kita akan melakukan perubahan di body pada css, cara ini cukup simple menurut saya yang mana kita hanya menambahkan width dan margin saja, berikut script body-nya.
body{
font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; /*Merubah jenis font yang ada didalam body */
font-size:14px; /*Merubah ukuran font yang ada didalam body */
line-height:1.42857143; /*Merubah jarak enter text yang ada didalam body */
color:#333; /*Merubah warna yang ada didalam body */
background-color:#fff; /*Merubah background body */
width: 90%;
margin: 0 auto;
}
font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; /*Merubah jenis font yang ada didalam body */
font-size:14px; /*Merubah ukuran font yang ada didalam body */
line-height:1.42857143; /*Merubah jarak enter text yang ada didalam body */
color:#333; /*Merubah warna yang ada didalam body */
background-color:#fff; /*Merubah background body */
width: 90%;
margin: 0 auto;
}
Script di atas akan membuat body website kawan akan menjadi di tengah, misalkan kawan ingin lebih lengkapnya bisa menyimak beberapa penjelasan di bawah. Script di bawah akan menyambung dari toturial sebelumnya. Baca : HTML Tutorial - Membuat dropdown menu navigasi.
Buat file *.html
Kawan bisa membuat file dengan format *.php ataupun *.html tetapi disini saya akan memberikan contoh dengan *.html dan saya beri nama index.html. Copy script berikut dan letakkan di index.html
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">
<title>Membuat Dropdown menu navigasi - www.pemulabelajar.com</title>
<link rel="stylesheet" type="text/css" href="styles.css"/>
</head>
<body>
<div class="navigasi">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Drop 1</a>
<ul>
<li><a href="#">Menu list 1</a></li>
<li><a href="#">Menu list 2</a></li>
</ul>
</li>
</ul>
</nav>
<div style="clear: both"></div>
</div>
<div class="isian">
<p>Hai website saya menjadi di tengah</p>
<p>Kunjungi juga <a href="http://www.pemulabelajar.com">Pemula Belajar</a>, untuk tutorial yang lain.</p>
</div>
</body>
</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">
<title>Membuat Dropdown menu navigasi - www.pemulabelajar.com</title>
<link rel="stylesheet" type="text/css" href="styles.css"/>
</head>
<body>
<div class="navigasi">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Drop 1</a>
<ul>
<li><a href="#">Menu list 1</a></li>
<li><a href="#">Menu list 2</a></li>
</ul>
</li>
</ul>
</nav>
<div style="clear: both"></div>
</div>
<div class="isian">
<p>Hai website saya menjadi di tengah</p>
<p>Kunjungi juga <a href="http://www.pemulabelajar.com">Pemula Belajar</a>, untuk tutorial yang lain.</p>
</div>
</body>
</html>
Buat file styles.css
Desain website di atas tidak akan berfungsi jika kawan tidak membuat file dengan nama styles.css dikarenakan script di atas memanggil css dengan nama styles.css lihat kode dibawah.
<link rel="stylesheet" type="text/css" href="styles.css"/>
Script diatas akan memanggil css dari file yang diberi nama styles.css.
Maka, apabila terdapat kode diatas selanjutnya kita memasukkan semua kode di bawah ini ke styles.css sesuai dengan nama di kode tersebut agar website kita terintegrasi dari kasus inimaka website menjadi ditengah-tengah dan juga agar terlihat berwarna.
Kode lengkap styles.css
body{
font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; /*Merubah jenis font yang ada didalam body */
font-size:14px; /*Merubah ukuran font yang ada didalam body */
line-height:1.42857143; /*Merubah jarak enter text yang ada didalam body */
color:#333; /*Merubah warna yang ada didalam body */
background-color:#fff; /*Merubah background body */
width: 90%;
margin: 0 auto;
}
.navigasi {
padding: 10px;
background-color: #f1f1f1;
}
nav a:hover {
text-decoration: none;
}
nav ul {
list-style: none;
}
nav ul li {
float: left;
padding: 5px 20px;
}
nav ul li:hover {
background-color: #2980b9;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
-ms-transition: all 0.8s ease-out;
-o-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
}
nav ul li ul {
display: none;
list-style: none;
margin-left: -20px;
}
nav ul li ul li {
float: none;
padding: 5px 20px;
margin-left: -40px;
}
nav ul li ul li:hover {
background-color: #2980b9;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
-ms-transition: all 0.8s ease-out;
-o-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
}
nav ul li:hover > ul {
display: block;
position: absolute;
background: #ddd;
}
nav ul li:hover > a {
color: #fff;
}
.isian {
padding: 0px 15px;
}
font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; /*Merubah jenis font yang ada didalam body */
font-size:14px; /*Merubah ukuran font yang ada didalam body */
line-height:1.42857143; /*Merubah jarak enter text yang ada didalam body */
color:#333; /*Merubah warna yang ada didalam body */
background-color:#fff; /*Merubah background body */
width: 90%;
margin: 0 auto;
}
.navigasi {
padding: 10px;
background-color: #f1f1f1;
}
nav a:hover {
text-decoration: none;
}
nav ul {
list-style: none;
}
nav ul li {
float: left;
padding: 5px 20px;
}
nav ul li:hover {
background-color: #2980b9;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
-ms-transition: all 0.8s ease-out;
-o-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
}
nav ul li ul {
display: none;
list-style: none;
margin-left: -20px;
}
nav ul li ul li {
float: none;
padding: 5px 20px;
margin-left: -40px;
}
nav ul li ul li:hover {
background-color: #2980b9;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
-ms-transition: all 0.8s ease-out;
-o-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
}
nav ul li:hover > ul {
display: block;
position: absolute;
background: #ddd;
}
nav ul li:hover > a {
color: #fff;
}
.isian {
padding: 0px 15px;
}
Kawan dapat melakukan berkreasi sendiri dengan script diatas, karena script diatas hanya sebuah contoh sederhana membuat website menjadi ditengah.
Semoga artikel Web tutorial tentang membuat website menjadi ditengah ini bisa membantu kawan yang sedang mengembangkan website. Jika kawan tidak keberatan kawan bisa membagikan artikel ini keteman-teman dan apabila terdapat kesulitan dalam penerapannya kawan bisa menanyakan di kolom komentar. Terimakasih dan salam.
Scriptnya bermanfaat buat desain template ane ntr gan,, hoho
BalasHapusSemoga membantu gan :)
HapusMakasih script nya baang hee
BalasHapusSama-sama om, sukses selalu mas :)
Hapusijin nyoba yah gan... buat blog saya yang baru....
BalasHapusMonggo gan :)
HapusNice info gan (y)
BalasHapusOke gan
HapusTerimakasih gan ...
BalasHapusSama2 gan :)
HapusBukan ny emang biasa ny tampilan di tengah yaa ??? Apa gak ??? Gak terlalu merhatiin ane hehe
BalasHapusKlonya bawaan blog sih di tengah gan, coba ente reset nya
HapusTerimakasih gan artikelnya bisa jadi referensi di blog saya
BalasHapusSama-sama gan :)
HapusWah lengkap banget tutorialnya gan, ijin mempelajari dulu, belum terlalu paham soalnya hehee.. terima kasih gan :)
BalasHapusMungkin tutorialnya sulit dipahami mba :D, Terima Kasih telah berkunjung mba :)
Hapus