Hello sobat IcloudZer kali ini admin akan membahas seputar dunia blog untuk anda dalam membahas bagaiamana sih caranya membuat Header Blog sederhana menggunakan kode CSS
Info: Baiklah jika sobat sudah penasaran yuk langsung saja kita bahas bersama sama okay
Header Blog
Header blog merupakan suatu element dari pada blog yang biasanya terletak diatas atau paling atas dari bod blog, nah didalam Header blog tersebut biasanya ditampilkan logo maupun menu dari siempunya blog tersebut
Nah khusus pada pembahasan atau pelajaran kita kali ini untuk membuat Header blog, tetapi bukan hanya header blog bisa juga untuk membuat suatu header widget atau header menu lainnya yang memang kita perlu untuk membuatnya
Info: Dan jadikan artikel kali ini sebagai penambah wawasan serta pengetahuan untuk dipelajari saja ya sobat
Gaya Header
Header juga bisa di variasikan dengan berbagai macam gaya, semisal ketika anda ingin membuat blog Header dengan gaya melayang atau membuat header blog akan muncul ketika discroll dan lainnya, nah dari situ kita harus benar benar menguasai sedikit pemahaman kode untuk membuatnya
Contoh Tampilan
Admin juga akan memberikan sebuah contoh demo atau tampilannya yang bisa kamu lihat serta kamu amati untuk dipelajari, berikut ini adalah contoh tampilannya
Info: Bagaiamana sobat dengan contoh Tampilannya keren kan
Cara pembuatan
Cara pembuatan header blog sebenarnya menggunakan kode tag <header> yang tampilannya itu diatur menggunakan kode CSS, namun kali ini admin bakalan memberikan sebuah contoh kode yang mirip seperti Header blog tetapi dalam penggunaan kode yang lebih disederhanakan lagi
Kode CSS
Berikut ini adalah contoh kode CSS untuk membuat tampilan Header blog tersebut, kamu bisa menggunakannya atau hanya untuk mempelajarinya juga tidak mengapa
.headerByRah{
display:flex;
width:100%;
height:35px;
position:fixed;
top:0;
left:0;
padding:0 30px 0 25px;
background-color:red;
z-index:50;
-webkit-transition:all .3s ease;transition:all .3s ease;
}
.headerByRah .title{
text-align:center;
color:#fefefe;
font-size:12px;
font-weight:700;
font-family:'Rubik', sans-serif;
margin:1%;
}Kode HTML
Sedangkan untuk menampilkannya kita memerlukan kode HTML dasarnya, kamu bisa mempelajari kode HTML dibawah ini, untuk menampilkan Header nya
<div class='headerByRah'>
<span class='title'>
Icloudice.com
</span>
</div>Hello sibat IcloudZer kali ini admin akan memberikan informasi seputar teknologi dan bla bla bla