Cara Membuat Template Blogspot – Part 2 (Header & Navigasi)

Hai gaes… masih ingat kan kalau tampilan templatenya masih kosong melompong, nah sesuai dengan janji saya pada sesi Cara Membuat Template Blogspot Part 1, saat ini kita akan lanjut ke tahap berikutnya, yaitu membuat header dan menu navigasi.

Header

Karena posisinya berada di paling atas, maka saya memilih header sebagai bagian dari template yang pertama dibuat, tapi sebelum melanjutkannya silahkan unduh gambar untuk logo header di sini.

Jika sudah simpan dalam sebuah folder khusus di laptop atau PC kamu…

Yang akan kamu lakukan sekarang adalah menambahkan widget header, yang nantinya akan berfungsi untuk menampilkan judul/logo blog.

1. Masuk ke dashboad, pilih Template/Theme > Edit HTML, lalu copy kode berikut ini

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' type='Header' visible='true'>
    </b:widget>
</b:section>

Dengan kode tersebut kita bisa membuat gadget header muncul, nah coba tebak dimanakah seharusnya kode tersebut di simpan?

2. Paste kode tersebut tepat setelah tag <header> atau sebelum </header>, jika sudah klik save template.

Untuk memastikan widget header sudah muncul klik menu Layout, lalu refresh halaman dengan menekan CTRL+R

widget header

Jika penampakannya seperti di atas berarti gadget header sudah berhasil terpasang.

3. Klik edit pada gadget header, lalu upload gambar yang telah kamu unduh tadi, lalu klik save…

Kurang lebih penampakannya akan seperti gambar di bawah ini

logo header

 

Agar tampilannya lebih cantik yuk kita lanjut dengan dengan menambahkan CSS

4. Copy kode berikut dan simpan tepat sebelum </style>

/* Header */

header {
    display: inline-block;
	margin-bottom: 15px;
	padding: 0 30px 15px;
}

Perhatikan baik-baik

  • Atribut display dengan inline-block mendeklarasikan bahwa elemen header bisa berderet secara horisontal jika ada elemen lain di sisi kiri atau kanannya.
  • Margin-bottom dengan nilai 15px akan mendeklarasikan posisi sisi bawah header akan memiliki ruang sebesar nilai tersebut, jika ada elemen lain dibawah header.
  • Sedangkan padding  akan memberikan jarak atau ruang jika dalam elemen header ada objek atau elemen lain, dalam hal ini yang akan terpengaruh adalah gambar logo. Nilai 0  adalah untuk sisi atas, 30px  untuk sisi kiri dan kanan, sedangkan 15px  untuk sisi bawah.

Save, lalu lihat perubahannya… benar bukan? sekarang antara logo dan sisi kiri terdapat sedikit ruang kosong.

Hmmm… gimana kalau kita beri sedikit karakter flat design ala macOS di atas elemen header?

Saya pilih cara yang paling gampang, yaitu dengan menambahkan sebuah tag HTML yang beratribut class.

5. Copy HTML berikut dan sisipkan tepat dibawah <div id='main-wrapper'>

<div class='top'>
</div>

6. Tambahkan style di bawah ini tepat sebelum kode </style>

/* Top Side */

.top {
	width: 100%;
	height: 25px;
	background-image: url(https://4.bp.blogspot.com/-UUpZalVUGi8/WLOXIjE-aUI/AAAAAAAAHUM/WLn8PHMsIi0E4IQ2Gj-G_QOPtFd9K_VEgCLcB/s85/c_dots.png);
	background-repeat: no-repeat;
	margin: 20px 30px 20px;
	padding: 0 30px 0;
}

Berikut penjelasan dari sebagian atribut CSS di atas tadi

  • Atribut width  mendeklarasikan lebar elemen top , karena elemen ini diapit oleh main-wrapper  yang mempunyai lebar 1200pxx. Dengan nilai 100%  maka lebar elemen ini akan bernilai sama yaitu 1200px .
  • Height adalah atribut yang akan mendeklarasikan tinggi sebuah elemen, dan untuk elemen ini saya rasa 25px adalah nilai yang paling pas, mengingat gambar latar yang akan ditampilkan memang memiliki ukuran kecil.
  • Untuk gambar latar akan diatur oleh background-image, nilai atribut ini di isi dengan URL dimana image atau gambar yang digunakan disimpan.
  • Jika kita tidak mengaturnya, browser akan mengulang gambar latar dalam ruang kosong yang tersisa dimana gambar tersebut berada, untuk mencegahnya saya menambahkan atribut background-repeat  dengan nilai no-repeat .
  • Tentang margin  dan padding  saya rasa kamu sudah mengerti bukan? 🙂

Klik save…

Jika dilakukan dengan benar maka penampakannya akan seperti berikut ini.

Lebih cantik khaaan 😀

Menu Navigasi

Rasanya kurang lengkap kalau template blogspot ini dibuat tanpa menu navigasi.

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

Nah supaya tidak mubazir bagaimana kalau kita gunakan fitur tersebut.

1. Tambahkan elemen widget, caranya copy kode berikut dan simpan tepat setelah <nav> atau sebelum </nav>, lalu 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 ini 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 bisa kosongkan saja kolom alamat url menu tambahan tadi…

gadget menu navigasi

4. Klik save lalu lihat penampakan blog kamu sekarang.

Saatnya melakukan polesan dengan CSS 😀

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

/* Navigation */

nav	{
	max-width: 1200px;
	margin: 0 30px 30px;
	padding: 0 0 0;
	border-top: 1px solid #dcdcd4;
	border-bottom: 1px solid #dcdcd4;
}

nav ul li {
    display: inline-block;
}


nav ul {
  	list-style: none;
  	text-align: left;
  	padding: 0;
  	margin: 0;
}

nav li {
  	font-family: 'Advent Pro', sans-serif;
  	font-size: 1.3em;
	color: #9d9792;
	text-transform: capitalize;
  	line-height: 40px;
  	height: 40px;
	margin-right:-4px;
}

nav a {
	color: #9d9792;
	text-decoration: none;
  	display: block;
	padding: 0 20px 0;
  	transition: .4s background-color;
}

nav a:hover {
  	background-color: #dcdcd4;
	color: #fff;
	border-bottom: 2px solid #c33067;
}

nav .PageList LI.selected A {
  	background-color: #dcdcd4;
  	color: #c33067;
	font-weight: normal !important;
}

Menu navigasi umumnya memakai format list, nah dalam HTML list itu terbagi menjadi 2 macam, yaitu yang tersusun (ordered) dengan tag <ol> dan yang tidak tersusun dengan tag <ul>.

List yang tersusun biasanya memiliki angka atau abjad, dan yang tidak tersusun menggunakan titik berbentuk bulat atau kotak (bullet).

Nah menu navigasi biasanya memanfaatkan format unordered lists, yaitu <ul> .

Karena tadi kita menggunakan gadget Pages sebagai menu, maka tidak perlu rempong lagi untuk membuat struktur HTML-nya secara manual.

Berikut poin-poin penting yang ada dalam CSS menu

  • Pada tag nav ul  (baris ke 11) terdapat atribut list-style , nilai none  akan menghilangkan tanda bullet di setiap list menu yang ada, tentunya kamu tidak ingin titik bulat muncul di setiap list menunya kan? 🙂
  • Dengan atribut font-family kita bisa mengatur jenis font yang digunakan dalam sebuah elemen, font yang dipilih untuk menu ini adalah font yang sebelumnya kita simpan dalam elemen <head> pada sesi sebelumnya.
  • Ukuran font diatur oleh atribut font-size. Untuk nilainya saya menggunakan satuan em, tapi bisa juga mengunakan ukuran px, jika penasaran kamu bisa merubahnya dengan satuan px misalkan 12px, 14px dan seterusnya sampai mendapatkan ukuran yang pas.
  • Atribut text-transform berguna untuk menyeragamkan tulisan, dengan nilai capitalize semua menu akan berawalan kapital.
  • line-height adalah atribut yang bisa mengatur jarak antara baris paragraf, nilai 40px adalah ukuran yang paling pas agar blok setiap tulisan menu menutupi tinggi  nav yang bernilai sama.

Coba deh cek gimana tampilan menunya setelah diberi sentuhan CSS

menu blog dengan css

Ok sampai dulu ya manteman 🙂

Pada sesi berikutnya kita akan membahas badan posting dan sidebar

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 *