Others

Cara Membuat Header Website Bergerak Secara Sederhana agar SItus Menarik

Cara Membuat Header Website Bergerak Secara Sederhana agar SItus Menarik

Ada banyak cara untuk membuat website agar menjadi menarik dan salah satunya adalah dengan membuat header website bergerak. Banyak cara membuat header website bergerak yang rumit namun ada pula yang mudah.

Dengan membuat header bergerak, website yang berisi mengenai informasi cara edit video untuk vlog menjadi lebih menarik. Namun sebelum itu, pastikan terlebih jika website Anda tidak ‘berat’ saat dibuka. Jika dari awal sudah berat misalnya tingkat loading lama, akan menyebabkan website Anda semakin lama loading setelah Anda mengeditnya.

Cara Membuat Header Website Bergerak Secara Sederhana agar SItus Menarik
Cara Membuat Header Website Bergerak Secara Sederhana agar SItus Menarik

Cara Menggerakkan Header

Ada beberapa tahapan sebagai cara membuat header website bergerak. Tahapan tersebut adalah:

  • Kerangka awal HTML

Buat terlebih dahulu rangka awal untuk halaman html dengan cara:

<!DOCTYPE html> 

<html> 

<body> 

 

</body> 

</html>

  • Tambahkan Bagian Header

Di bagian body dari kerangka yang Anda buat, tambahkan <header>header ikut bergerak </header>. Dengan begitu, tampilannya akan menjadi seperti berikut ini:

<!DOCTYPE html> 

<html> 

<body> 

<header>header ikut bergerak </header>

</body> 

</html>

  • Jika Anda hendak menambahkan gambar atau video ataupun foto, setelah header, tambahkan coding seperti berikut

<!DOCTYPE html> 

<html> 

<body> 

<header>header ikut bergerak </header>

<p>

Ini adalah tulisan untuk header

</p>

</body> 

</html>

Sebagai catatan, bagian ini hanya optional. Jadi, jika Anda ingin menambahkan atau membiarkannya saja, itu tergantung keinginan Anda.

  • Tambahkan style

Di bagian akhir ini Anda bisa menambahkan coding agar header website tersebut bergerak. Sehingga tampilannya adalah sebagai berikut

<!DOCTYPE html> 

<html> 

<body> 

<header style = “position:fixed;”>header ikut bergerak </header>

<p>

Ini adalah tulisan untuk header

</p>

</body> 

</html>

Membuat Header Website Diam

Jika Anda ingin membuat header website diam saat Anda sedang scroll. Cara ini dinilai lebih nyaman dan tidak mengganggu saat sedang membaca konten yang ada di website tersebut.

Untuk membuat header website tetap diam, caranya adalah

<html>

<head>

<title>Membuat Layout Fixed Header</title>

<link rel=”stylesheet” href=”style.css” type=”text/css”>

</head>

<body>

<div id=”wrapper”>

<div id=”header”>

<a href=”” class=”title”>header website</a>

</div>

<div id=”content”>

</div>

<div id=”footer”>

<a href=”” class=”title”>footer </a>

</div>

</div>

</body>

</html>

Setelah itu, buat susunan CSS dan kemudian simpan dengan nama style.css

body{font-family:calibri, verdana, sans-serif;}

#wrapper{

width:100%;

}

#header{

width:100%;

z-index:1000;

position:fixed;

height:60px;

background:#FF0000

}

#header a.title{

color:#ffffff;

font-weight:bold;

text-decoration:none;

font-size:30px;

line-height:60px;

padding:0px 20px; /*mengatur jarak antara di kiri dan kanan saja*/

}

#content{

position:relative;

background:#eee;

min-height:1500px;

margin:0px 20px;

}

#footer{

position:relative;

background:#FF0000;

height:40px;

}

#footer a.title

{

color:#ffffff;

text-decoration:none;

font-size:30px;

line-height:40px;

float:right;

padding:0px 20px;

}

Pengaturan CSS tersebut dapat diubah sesuai dengan keinginan Anda. setelah selesai, semua file disimpan dalam 1 folder.

Itulah cara membuat header website bergerak untuk membuat situs Anda semakin menarik. Semoga informasi ini bermanfaat untuk Anda.