Membuat Garis Pinggir Pada Kolom Posting Template Minima

Online CPM Advertising | Advertising blog

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

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

2. Carilah baris kode berikut:

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

3. Rubah border-bottom menjadi hanya border saja agar garis pinggir (border) ada pada sebelah kiri, kanan, atas dan bawah kolom posting.

Jika hanya ingin membuat garis pinggir (border) hanya ada pada salah satu sisi saja, maka penulisan kodenya adalah sebagai berikut:

• border-left untuk garis pinggir di sebelah kiri.
• border-right untuk garis pinggir di sebelah kanan.
• border-top untuk garis pinggir di bagian atas.
• border-bottom untuk garis pinggir dibagian bawah.

4. Rubah variabel ketebalan garis pinggir (border) sesuai dengan keinginan, misal dari 1px menjadi 3px.

5. Rubah variabel tipe garis pinggir (border) sesuai dengan keinginan, misal dari titik-titik (dotted) menjadi garis lurus (solid).

6. Rubah variabel warna garis pinggir (border) sesuai dengan keinginan, misal dari warna default ($bordercolor) menjadi warna hitam (#000000)

7. Agar tulisan nantinya tidak menempel pada garis pinggir, rubahlah padding-bottom menjadi hanya padding saja.

8. Rubah harga variabel padding sesuai keinginan, misal dari  1.5em menjadi 10px.

9. Simpan template.

Gambar 1. Edit HTML menu

Contoh baris kode yang telah diedit:

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

Gambar 2. Tampilan kolom posting sebelum diberi garis pinggir (border)

 Gambar 3. Tampilan kolom posting 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.

Gambar 4. Letak kotak pencari pada browser Mozzila

Online CPM Advertising | Advertising blog