Membuat Garis Pinggir Pada Sidebar Template Minima

Posting date: Tuesday, December 21, 2010
This post have:

Untuk membuat garis pinggir (border) pada kolom sidebar di template minima yang harus dilakukan adalah:

1. Login ke Blogspot –> Design/Rancangan –> Edit HTML

2. Carilah baris kode berikut:

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

3. Hapus tulisan .sidebar .widget, lalu kopi dan letakan baris kode .sidebar .widget, berikut dibawahnya:

.sidebar .widget {
  border:1px solid $bordercolor;
  margin:0 0 1.5em;
  padding:0 5px 5px;
}

4. Simpan template.

Catatan:

1px merupakan ukuran ketebalan garis pinggir, rubah sesuai keinginan.

solid menunjukan garis pinggir yang berupa garis lurus. Rubah ke dotted untuk bentuk titik, atau ke dashed untuk bentuk garis putus-putus.

$bordercolor menunjukan warna garis pinggir. Rubah sesuai keinginan, misal #000000 untuk warna hitam dsb.

membuat garis pinggir pada sidebar Gambar 1. Edit HTML menu

Susunan baris kodenya akan terlihat seperti berikut:

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

.sidebar .widget {
  border:1px solid $bordercolor;
  margin:0 0 1.5em;
  padding:0 5px 5px;
}

membuat garis pinggir pada sidebar 4 Gambar 2. Tampilan kolom sidebar sebelum diberi garis pinggir (border)

membuat garis pinggir pada sidebar 3  Gambar 3. Tampilan kolom sidebar sesudah diberi garis pinggir (border)

*****

Catatan:

* Untuk memudahkan pencarian baris kode, gunakan kotak pencari dengan menekan Ctr+ F, setelah muncul kotaknya, tulis/ketikan kata yang ingin dicari. Untuk browser mozzila, letaknya di sebelah kiri bawah.

kotak pencariGambar 4. Letak kotak pencari pada browser Mozzila

0 comments:

Post a Comment

Related Posts Plugin for WordPress, Blogger...