HOME | ABOUT ME | DAFTAR ISI | welcome to happydesug.blogspot.com

Senin, 24 Mei 2010

Menghilangkan Garis Pinggir pada Header Minima

Secara default, header pada template minima mempunyai 2 buah garis pinggir di sekelilingnya. Untuk menghilangkan garis pinggir header pada template minima tersebut caranya adalah sebagai berikut:

Login ke Blogspot –> Tata letak –> Edit HTML

Cari baris kode berikut yang letaknya berurutan kebawah:
#header-wrapper {
  width:660px;
  margin:0 auto 10px;
  border:1px solid $bordercolor;   }

#header-inner {
  background-position: center;
  margin-left: auto;
  margin-right: auto;
}

#header {
  margin: 5px;
  border: 1px solid $bordercolor;
  text-align: center;
  color:$pagetitlecolor;
}

Untuk menghilangkan garis pinggir header yang ada pada bagian luar, hapus atau non aktifkan baris kode border:1px solid $bordercolor;  yang ada pada baris kode #header-wrapper { sehingga baris kodenya menjadi seperti berikut
#header-wrapper {
  width:660px;
  margin:0 auto 10px;
  /*border:1px solid $bordercolor; */   }

Untuk menghilangkan garis pinggir header yang ada pada bagian dalam, hapus atau non aktifkan baris kode border:1px solid $bordercolor;  yang ada pada baris kode #header {
#header {
  margin: 5px;
/* border: 1px solid $bordercolor; */   text-align: center;
  color:$pagetitlecolor;
}

Simpan template.

Jika ingin, misalnya, menampilkan hanya garis pinggir yang ada disebelah bawah saja, maka rubah baris kode border:1px solid $bordercolor; menjadi
border-bottom:1px solid $bordercolor;

Catatan:
- border-bottom adalah garis pinggir bawah. Lainnya adalah border-top (garis pinggir atas), border-right (garis pinggir kanan), border-left (garis pinggir kiri). Jika hanya ditulis border saja maka garis pinggirnya akan mengelilingi objek yang ada.
- 1px merupakan ketebalan garis yang diinginkan. Rubah jika perlu.
- solid merupakan jenis garis. Jenis lainnya adalah dotted (titik-titik), dashed (garis putus-putus).
- $bordercolor merupakan kode warna. Rubah ke warna lain jika perlu (misal #ffff66 = kuning)
- Untuk memudahkan pencarian baris kode, gunakan 'kotak pencari', tekan Ctrl +  F, lalu ketikan baris kode yang dicari dan tekan enter. Browser yang digunakan disini adalah Internet Explorer (IE). Untuk browser lain, 'kotak pencari' letaknya sedikit berbeda

header-wrapper
Gb 1. Tampilan menu Edit HTML dan ‘kotak pencari’ dilihat dengan browser IE.

header minima ori
Gb 2. Tampilan blog dengan template minima dengan tampilan header tanpa edit (default).

header minima tanpa border luar
Gb 3. Tampilan blog dengan template minima dengan header yang hanya bergaris pinggir pada bagian sebelah dalam saja.

header minima tanpa border
Gb 4. Tampilan blog dengan template minima dengan header tanpa garis pinggir.

header minima dengan border bawah
Gb 5. Tampilan blog dengan template minima dengan header yang mempunyai garis pinggir hanya pada bagian bawah saja.

Posting Dengan Kategori Sama



0 komentar:

Posting Komentar

Related Posts with Thumbnails