Headlines News :

Home » » Cara Membuat Garis Pinggir Pada Kolom Posting dan Sidebar

Cara Membuat Garis Pinggir Pada Kolom Posting dan Sidebar

Written By .:: Chika ::. on Tuesday, October 25, 2011 | 10/25/2011 03:14:00 AM

sementara3

Untuk
membuat garis pinggir pada posting, caranya adalah sebagai berikut:
1. Login ke Blogspot--> Tata LeTak --> Edit HTML
editHTML
2. Cari kode berikut:
lalu ganti baris kode
dengan baris kode
sehingga baris kodenya akan menjadi seperti dibawah ini:

lalu klik tombol SIMPAN TEMPLATE

3. Jika ternyata garis pinggir yang ingin dibuat hanya pada bagian tertentu saja, disebelah atas atau bawah saja misalnya,
sementara5
maka baris kode yang berwarna merah tadi bisa diganti dengan baris kode berikut:
Border-top: 1px solid $bordercolor; /*garis pinggir atas */

Border-bottom: 1px solid $bordercolor; /*garis pinggir bawah */

Border-left: 1px solid $bordercolor; /*garis pinggir kiri */

Border-right: 1px solid $bordercolor; /*garis pinggir kanan */
4. Untuk membuat garis pinggir pada sidebar, maka letakan kode yang berwarna merah tadi dibawah baris kode .sidebar {
/* Sidebar Content

----------------------------------------------- */

.sidebar {

border:1px solid $bordercolor; padding:10px;/*jarak antara text dengan garis pinggir*/color: $sidebartextcolor;

line-height: 1.5em;

}


5. Bisa juga membuat garis pinggir pada kolom posting dan sidebar dibuat sekaligus, dengan menganti baris kode berikut:
.sidebar .widget, .main .widget {

Border-bottom:1.5px solid $bordercolor;

margin:0 0 1.5em;

padding:0 0 0.5em;

}
dengan baris kode berikut:
.sidebar .widget, .main .widget {

Border:1.5px solid $bordercolor;

margin:0 0 1.5em;

padding: 5px; }
dan hasil akan seperti terlihat pada gambar dibawah ini:
sementara3
_________________________________________________________________

Catatan:

1. border:1px solid $bordercolor;
Variabel dengan nilai 1px menunjukan ketebalan garis pinggir tersebut. Rubahlah sesuai dengan keinginan.

Variabel dengan nilai solid menunjukan garisnya merupakan garis lurus. Rubahlah sesuai dengan keinginan, misalnya menjadi dotted (titik).

Variabel dengan nilai $bordercolor menunjukan warna garis pinggir. $bordercolor adalah warna default dari border template minima. Rubahlah dengan sesuai keinginan, misalnya biru (#0000ff), kuning (#ffff00), merah(#ff0000), hijau (#008080), hitam (#000000), atau putih (#ffffff).
2. Untuk memudahkan pencarian baris kode, tekan Ctrl + F untuk menampilkan kolom pencarian yang letaknya ada dibawah kolom Edit HTML seperti terlihat pada gambar dibawah ini, lalu ketikan atau kopi paste baris kode yang ingin dicari pada kotak pencarian. Baris kode yang sesuai akan ditunjukan dengan diberi warna hijau.

finder_thumb4
Share this article :

0 komentar:

Speak up your mind

Tell us what you're thinking... !

 
Support : Copyright © 2011. Chika Wap - All Rights Reserved
Proudly powered by Blogger