#4 Desain Website – Header pada Website

Posted By fuadfauzi 23 Desember, 2018
#4 Desain Website – Header pada Website

#4 Desain Website – Header pada Website

#4 Desain Website – Header pada Website. Pada artikel kali ini saya akan menjelaskan mengenai Header pada Website. Umumnya header website diisi dengan Logo Website, atau bisa juga diisi dengan Judul dan Deskripsi Website. Lalu lebih baik menggunakan Logo atau Tulisan Judul dan Deskripsi?. Bila kita melihat dari sisi profesionalisme, maka akan lebih bagus website anda menggunakan Logo pada header.

Sebelumnya kita sudah belajar mengenai #3 Desain Website – Menu Navigasi Mobile Friendly. Artikel Membuat Header Pada Website adalah lanjutan pada artikel tersebut.

Header merupakan hal yang penting dalam pengenalan website kita kepada pengunjung. Seandainya kita tidak memakai header pada website, apakah bisa? Tentu saja bisa, namun hal itu tidak akan membuat seseorang kembali lagi untuk mengunjungi website kamu. Dia tidak akan ingat website apa yang mereka kunjungi.

Membuat Header pada Website

Sebelum kita membuat header pada website, kita perlu tahu terlebih dahulu bahwa, header akan selalu berada di atas. Maka dari itu struktur HTML yang kita gunakan adalah

<header>
Disini
</header>

Kode tersebut ditaruh sebelum <body> atau bisa juga <nav> bila anda kurang mengerti anda bisa membaca artikel:

#1 Desain Website – Struktur HTML SEO

Lalu header seperti apa yang anda butuhkan?

Ada banyak macam desain header yang ada pada ratusan desain template. Mungkin saya akan menyebutkan beberapa dibawah ini:

  1. Desain Header dengan Icon Kecil yang langsung masuk kedalam Menu Navigasi.
  2. Desain Header dengan Header Ads (Header width 270px, Header Ads width 720px)
  3. Desain Header dengan Photo Full Width
  4. Dsb.

Nah, selebihnya tinggal disesuaikan dengan platformnya. Bila anda menggunakan blogger, membuat header yang terintegrasi dengan tata letak biasanya digunakan kode

<header>
<b:section class=”header” id=”header-blog” maxwidgets=”1″></b:section>
</header>

atau bila anda ingin menggunakan header dan header ads maka:

<header>
<b:section class=”header” id=”header-left” maxwidgets=”1″></b:section>
<b:section class=”header” id=”header-right” maxwidgets=”1″></b:section>
</header>

Bila anda menaruh kode tersebut kedalam template anda, maka anda tinggal menambahkan logo atau text header dibagian Tata letak.

Kode tersebut hanya berupa kerangkanya saja. Silahkan tambahkan css sesuai dengan kebutuhan anda.

Lalu bagaimana dengan wordpress?

Bila anda menggunakan wordpress dan ingin membuat header pada desain theme anda. Anda harus membuat fungsi, agar header anda terintegrasi dengan customize.

add_theme_support( ‘custom-logo’, array(
‘width’ => 250,
‘height’ => 90,
‘flex-width’ => true,
) );

Nah jangan lupa, itu adalah fungsinya yang harus anda masukan kedalam function.php

Sekarang tinggal anda menambahkan php nya pada bagian header.php

<header>
<?php if ( get_theme_mod(‘custom_logo’) ) :
$custom_logo_id = get_theme_mod( ‘custom_logo’ );
$logo_src = wp_get_attachment_image_src( $custom_logo_id , ‘full’ );?>
<h1><a href=”<?php echo esc_url( home_url( ‘/’ ) ); ?>” title=”<?php echo esc_attr ( bloginfo(‘name’) ); ?>”><img class=”site-logo” alt=”<?php echo esc_attr ( bloginfo(‘name’) ); ?> – <?php esc_html( bloginfo( ‘description’ ) ); ?>” src=”<?php echo esc_url( $logo_src[0] ); ?>” /></a><div class=”h1title”>
<?php echo esc_attr ( bloginfo(‘name’) ); ?> – <?php esc_html( bloginfo( ‘description’ ) ); ?>
</div></h1>
<?php else: ?>
<h1 class=”site-title”><a href=”<?php echo esc_url( home_url( ‘/’ ) ); ?>” rel=”home”><?php esc_html( bloginfo( ‘name’ ) ); ?></a></h1>
<h2 class=”site-description”><?php esc_html( bloginfo( ‘description’ ) ); ?></h2>
<?php endif; ?>
</header>

Sekian artikel dari #4 Desain Website – Header pada Website. Pada sub bab selanjutnya anda akan belajar mengenai #5

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *