Header & Menu Navigasi

cara membuat theme blogger

Di sesi ini kita akan mengatur tampilan dari header dan nav. Nah tampilan yang akan diatur melalui CSS tersebut meliputi lebar, warna latar, jarak, spasi, jenis dan warna font.

Supaya menghemat waktu yuk kita mulai saja sesi ini.

Header

1. Pilih menu Layout » klik edit gadget header

2. Isi kolom deskripsi sesuai yang kamu kehendaki, lalu klik save.

header widget

Saat ini header sudah memiliki title—judul lengkap dengan deskripsinya, berarti kita sudah siap untuk mengatur tag HTML header melalui CSS.

3. Copy CSS di bawah ini lalu simpan tepat sebelum kode </style>, klik save lalu lihat perubahannya secara langsung.

header {
    background-color: #f39292;
	text-align: center;
	padding-left: 0;
	padding-right: 0;
	padding-top: 20px;
	padding-bottom:20px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;
}

Nah warna latar header sudah berubah kan, sekarang kita lanjut mengatur teks yang ada di header.

Pada gadget header, judul blog beserta deskripsinya secara otomatis dirubah oleh Blogger menjadi tag HTML.

  • judul blog : <h1 class='title'>
  • deskripsi blog: <p class='description'>

Dari tag tersebut kita bisa mengetahui selektor mana yang harus diatur ketika ingin merubah tampilan teks pada judul dan deskripsi.

Mari kita mulai dari judul

4. Copy CSS berikut, lalu simpan tepat sebelum kode </style>, save lalu lihat perubahannya.

.title {
    font-family: 'Pacifico', cursive;
    font-size: 30px;
    color: #fff;
}

Dari properti CSS tadi bisa dilihat bahwa salah satu yang kita atur adalah jenis font, tapi meskipun sudah ditentukan, jenis font tersebut tidak bisa tampil sebagaimana mestinya, karena selain melalui properti font-family kita harus memanggil sumber font tersebut.

Caranya dengan menambahkan sumber eksternal font melalui tag HTML.

5. Copy kode berikut lalu simpan tepat diatas kode <style>, klik save dan lihat perubahannya.

<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet"/>

Berikutnya kita atur font deskripsi.

6. Copy kode di bawah ini, seperti biasa letakan tepat sebelum </style>.

.description {
	font-family:'Open Sans', sans-serif;;
	font-size:12px;
	color:#fff;
}

Seperti bagian judul, setiap kita menambahkan jenis font baru maka kita harus memanggil sumber eksternal dari font tersebut.

7. Copy tag berikut dan simpan tepat sebelum <style>.

<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"/>

8. Klik save dan lihat perubahannya.

header blog

Nav (menu navigasi)

Rasanya kurang lengkap kalau theme blogspot ini dibuat tanpa menu navigasi, betul kan?

Eh, ngomong-ngomong soal menu navigasi ternyata Blogger sendiri mempunyai fitur menu yang bisa digunakan melalui gadget.

Agar bisa menambahkan gadget tersebut harus membuat sebuah widget section, caranya

1. Copy kode dibawah ini lalu simpan tepat setelah <nav> atau sebelum </nav>, lalu klik save.

<b:section class='navigation' id='nav' maxwidgets='1' showaddelement='yes'>
</b:section>

2. Masuk ke menu Layout, jika dilakukan dengan benar maka widget untuk menyimpan menu akan muncul, lalu klik Add a Gadget.

widget nav

3. Pilih gadget yang bernama Pages.

Gadget tersebut berfungsi untuk membuat list atau daftar laman yang ada di blog, karena kamu belum memiliki laman maka menu yang muncul hanyalah ‘home’.

Supaya terlihat seperti layaknya menu sebuah blog, tambahkan beberapa menu tambahan (About, Disclosure, Contact) dengan memanfaatkan opsi external link.

Nah karena ini hanya dummy menu maka kamu isi kolom alamat url setiap menu tadi dengan tanda #.

gadget menu navigasi

4. Klik save lalu lihat penampakan blog kamu sekarang.

Jangan berharap banyak dengan tampilan menunya, ya karena kita memang belum memolesnya. Yuk kita tambahkan CSS.

5. Copy CSS berikut untuk menu yang kita buat tadi, sisipkan tepat sebelum tag </style>.

nav {
    width: 1200px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;
    border-top: 1px solid #dcdcd4;
    border-bottom: 1px solid #dcdcd4;
}

CSS diatas tadi tidak serta merta membuat list menu yang dibuat tadi menjadi terlihat rapi layaknya semuah menu navigasi.

Setiap menu yang dibuat pada gadget pages tadi secara otomatis akan dirubah oleh Blogger menjadi beberapa bagian HTML, yang terdiri dari tag <ul> dan <li>.

Berikut ini adalah kode CSS yang dapat mengatur list tadi menjadi sebuah menu.

6. Copy kode di bawah ini lalu simpan sebelum tag </style>.

nav ul li {
    display: inline-block;
}

nav ul {
  	list-style: none;
  	text-align: center;
  	padding-left: 20px;
	padding-right: 20px;
}

nav li {
  	font-family: 'Open Sans', sans-serif;
  	font-size: 14px;
	text-transform: capitalize;
  	line-height: 40px;
  	height: 40px;
	margin-right:-4px;
}

nav a {
	color: #9d9792;
	text-decoration: none;
  	display: block;
  	padding-left: 20px;
  	padding-right: 20px;
  	padding-top: 0;
  	padding-bottom: 0;
}

nav a:hover {
	border-bottom: 2px solid #f39292;
}

nav .PageList LI.selected A {
	font-weight: normal !important;
	border-bottom: 2px solid #f39292;
}

7. Klik save theme lalu lihat penampakan blog-nya saat ini.

menu navigasi blog

Sudah terlihat lebih rapi bukan 🙂

Ada beberapa properti CSS baru yang ditambahkan pada elemen header dan nav, coba perhatikan.

PropertiNilai
font-family

Properti ini berfungsi untuk mengatur jenis font. Untuk theme yang tidak support theme designer kita harus menambahkan link eksternal, untuk memanggil font yang akan digunakan tersebut.

Kita dapat memanfaatkan Google Font yang dapat diakses di https://fonts.google.com.

Nilai properti ini di isi dengan nama font tersebut.

border

Border adalah properti yang mengatur garis outline sebuah elemen. Adapun yang dapat diatur adalah

border-left (outline tepi kiri)

border-right (outline tepi kanan)

border-top (outline tepi atas)

border-top (outline tepi bawah)

Format penulisan nilainya terdiri dari tiga bagian yaitu Warna: bisa diisi dengan kode warna hex atau rgb Jenis border: dashed, dotted atau solid Ketebalan: diisi dengan satuan px

Contoh: #444444 solid 1px

list-style

Properti list-style biasanya digunakan untuk mengatur tag, contohnya pada sebuah list bernomor atau tanda bullet. Nilai properti ini bisa diisi dengan square, circle atau none jika pada elemen tersebut tidak memerlukan symbol atau bullet.

Contohnya seperti pada menu navigasi.

line-height

Tinggi sebuah paragraf atau baris teks dapat diatur dengan properti line-height. Untuk nilainya kita bisa mengunakan satuan px, em bahkan %

text-decoration

Text-decoration digunakan untuk mengatur dekorasi pada sebuah teks, seperti underline. Untuk nilainya bisa diisi dengan underline, line-through atau none.

height

Hampir sama seperti properti width, hanya saja height digunakan untuk mengatur tinggi sebuah elemen. Nilainya bisa diisi dengan satuan px atau %

font-weight

Untuk mengatur tebal tipis sebuah teks atau font kita bisa menggunakan font-weight. Umumnya properti ini diisi dengan nilai thin, normal dan bold, tapi pada custom font seperti Google font kita boleh mengisinya dengan ukuran yang tersedia pada font tersebut.

display

Properti display digunakan untuk mengatur posisi sebuah elemen dengan elemen lain. Nilai yang sering digunakan pada umumnya adalah

inline-block (blok yang posisinya bisa sejajar berdampingan secara horisontal)

block (block yang posisinya tidak bisa berdampingan dengan elemen lain)

Seperti biasa kamu boleh berlatih merubah nilai dari seluruh properti yang ada pada CSS di sesi ini.

Sampai jumpa di sesi berikutnya.

6 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *