Hello sobat IcloudZer kali ini admin bakalan memberikan informasi blogger mengenai bagaimana caranya membuat garis lurus diatas header, dan dilain kesempatan admin juga akan memberikan informasi mengenai bagaiamana caranya membuat garis lurus pada samping blog atau dibawah blog okay, tapi pada postingan berikutnya ya
Info: Dari pada penasaran yuk langsung aja kita bahas bersama sama okay
Garis diatas header
Garis diatas header merupakan suatu tampilan yang mana pada atas header akan terbentuk sebuah garis lurus memanjang dengan tampilan warna yang bisa disesuaikan
Info: Biasanya sih garis lurus diatas header bisa dikombinasikan dengan kode script, namun kali ini khusus pembuatannya menggunakan kode CSS
Hanya Sebuah Garis
Nah kamu jangan salah sangka dulu bahwa artikel yang admin buat kali ini hanya membahas bagaiamana carannya membuat sebuah garis lurus diatas header, dan tanpa menggunakan animasi atau yang sejenisnya
Info: Seperti yang bisa kamu lihat garis lurus yang admin terapkan telah admin kombinasikan sehingga nampak menarik
Cara pembuatan
Baiklah saatnya admin akan membahas bagaimana caranya membuat garis lurus diatas header (Hanya garis ya), perhatikan setiap langkah yang admin jabarkan agar paham okay
Kode CSS
Langkah pertama yang bisa kamu lakukan adalah menyalin kode CSS dibawah ini, kemudian kamu bisa meletakkannya diatas kode ]]>>b:skin>
.rahTop{
display:flex;
position:fixed;
top:0;
right:0;
left:0;
width:100%;
height:4px;
background:red;
}Info: Atau kamu bisa menggunakan tag kode style untuk bisa meletakkan kode di atas
Kode HTML
Langkah selanjutnya yang bisa kamu lakukan adalah menyalin kode HTML dibawah ini kemudian kamu bisa meletakkannya divawah kode <body>
<div class='rahTop'/>Info: Kode HTML diatas berfungsi untuk menampilkan garis tersebut
Contoh Tampilan
Baiklah kamu bisa melihat contoh tampilannya dengan menggunakan tombol dibawah ini okay
Info: Bagaiamana sobat IcloudZer dengan tampilan garis lurus diatas header
Jika kamu memasangnya secara langsung maka kamu tidak perlu mengklik tombol untuk menampilakan garis lurusnya, cukup memasang kode yang telah admin jabarkan diatas okay