Wednesday, September 16, 2009

Cara Mengubah dan Menghapus Garis Pinggir Blogger

Bagi yang suka mengubah ubah atau mengotak atik garis pinggir template Blogger khususnya template Minima, ada beberapa tips untuk mengganti ataupun menghapus garis pinggir (atau disebut juga dgn border) pada bagian2 tertentu. Tapi kalau anda hanya ingin mengubah warnanya saja mungkin cara yg paling gampang yaitu melalui Dashboard --> Design --> Template Designer --> Advanced. Disana sudah ada tempat khususnya utk menyediakan pilihan2 utk mengubah warna pada border (contoh gambarnya ada di bawah).

Cara merubah garis pinggir Blogger
Cara mengubah warna garis pinggir
Untuk menghapusnya anda bisa menyamakan warna garis tersebut dengan warna background blog anda, maka garis border anda tak akan tampak lagi, setelah selesai tinggal pencet “Apply to Blog”. Untuk mengubah garis lainnya, seperti pada header maka anda perlu navigasi ke Dashboard --> Design --> Edit HTML, setelah itu cari kode2 seperti di bawah ini:

/* Header
-----------------------------------------------
 */

#header-wrapper {
  margin:0 2% 10px;
  border:1px solid $bordercolor;
  }

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

Untuk mengubah tinggi dan lebarnya garis pinggir header, anda bisa meletakkan sebaris atau dua baris kode di bawah ini ke dalam tanda kurung header-wrapper:

height:140px; (yg ini buat ukuran tinggi)
width:780px; (yg ini buat ukuran lebar)

anda tinggal mengubah jumlah pixel yg anda suka.
Tapi jika anda terganggu dan ingin membuang garis pinggir tersebut, anda bisa melakukannya dengan menghapus barisan kode yg telah saya highlight hijau dibawah:

/* Header
-----------------------------------------------
*/

#header-wrapper {
height:140px;
width:780px;
margin:0 2% 10px;
border:1px solid $bordercolor;
}

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

Pada template Minima, kode2 dibawah ini adalah kode yg menciptakan garis bawah pada tiap widget blog anda termasuk garis bawah pada bagian kolom postingan utama:

.sidebar .widget, .main .widget {
border-bottom:5px dotted $bordercolor;
margin:0 0 1.5em; padding:0 0 1.5em;
}

Jika anda mau model garis bawah pada bagian sidebar anda berbeda dengan model garis bawah pada bagian kolom postingan utama, anda bisa membelah kode2 yg diatas menjadi dua bagian menjadi seperti ini:

.sidebar .widget {
border-bottom: 3px dashed $bordercolor;
margin:0 0 1.5em; padding:0 0 1.5em;
}

.main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

Anda bisa mengubah model atau style pada garis-garis tersebut menjadi model Dot, Solid, Double, Groove, Dashed dan lain2. Dan selain garis bawah, anda juga bisa mengubah garis atas atau garis pinggir sebuah widget dengan mengganti –bottom ke –top, –right atau –left. Anda juga bisa mencuri model garis border dari template2 Blogger lain ke template anda dengan mencopasnya.

2 comments:

  1. muantab pak brow, oc dah gue praktekin

    ReplyDelete
  2. thanks mas sudah di kasih tahu caranya, saya masih praktek nih mudahan berhasil :D

    ReplyDelete