Google

YUUUUUKKK BELAJAR BARENG

MEDIA PEMBELAJARAN BERSAMA


yukkkkkkk SINAU!!!!

Tuesday, July 8, 2008

CARA MENAMBAH/MENGHILANGKAN BORDER DALAM CSS TEMPLATE

NOTE: UNTUK TEMPLATE SCRIBE, TICTAC DAN THISAWAY
Karena border dalam template tersebut termasuk dalam image/gambar latar belakang(background image) maka penampilan border tersebut tidak bisa dirubah.
Jika ingin mengubah border pada main post dan sidebar, maka background Image pada template jenis ini harus dirubah/diganti.

sedangkan untuk template yang lain bisa langsung saja.

BORDER
Pada waktu kita Login, pilih TEMPLATE ...> EDIT HTML
tekan Ctrl F untuk mencari kata "border" temans akan melihat berbagai kata border sebagai result.
biasanya akan tampil dalam bentuk seperti ini
border:1px solid $bordercolor;

1. Terbagi dalam 4 jenis, yaitu;
“border-top”, “border-bottom”, “border-left” or “border-right”


2. Border-width/ketebalan border
ditulis dalam bentuk nilai dalam pixel. secara umum, nilai/values nya adalah:

1px (or any other length)
thin
medium
thick

3. border-style/Model Border
Umumnya border style yaitu:
none
hidden
dotted
solid
dashed
double
groove
ridge
inset
outset

4. border-color/Warna
jika temans melihat kode ini $bordercolor, ini adalah viariable (“Border Color”) temans bisa menggantinya melalui Template -> Fonts and Colors. Jika temans ingin warna yang lebih spesifik untuk elemen border, temans dapat mengganti value $bordercolorkepada color code.

Contoh values nya:-
#cc0000
rgb(204,0,0)

untuk list color codes bisa dilihat disini


Sekarang kita sudah mengerti tentang definisi border, mari kita ubah tampilan template kita.

Go to Template -> Edit HTML

1. Border di sekeliling profil image kita (border around profile image)
Cari tulisan seperti dibawah ini, jika temans tidak mau ada border ubah menjadi “0px”:-

.profile-img {
border: 0px solid $bordercolor;
}
atau dengan perintah “none”:-

.profile-img {
border: none;
}

jika temans ingin model/style yang berbeda, pilih dari salah satu settingan style diatas, sebagai contoh;-
.profile-img {
border: 2px dashed #ff00ff;
}

maka temans akan mendapatkan border dengan garis terputus-putus (dashed ------) dengan ketebalan 2px berwarna pink (#ff00ff)


2. Border disekeliling Gambar/ Images dalam Postingan
dalam Blog Posts, Border styles untuk images dapat ditemukan disini:-

.post img {
border:1px solid $bordercolor;
}

set ke nilai “0px” atau “none” untuk menghilangkan border disekeliling gambar dalam postingan atau
ubah bentuk dan ukuran border sesuai dengan yang temans sukai.

contoh
.post img {
border:3px outset #ff00ff;
}

maka images akan memiliki border seperti berada dalam box/kotak tebal

Jika temans memposting banyak gambar dan graphics, maka temans akan menghabiskan banyak waktu mengkonfigurasi settingan dan memilih border mana yang cocok sesuai dengan postingan dan selera temans.

3. Border disekeliling Images/gambar Links
Dalam beberapa template, ada style/model untuk image links/gambar link. Gambar ini bisa diklik (clickable images) yang akan membawa temans kepada halaman/web yang lain ketika di klik.

temans bisa mengganti kode border pada perintah disini:-

a img {
border:0;
}

silahkan diganti value yang sesuai dengan keinginan temans.

4. Border di sekeliling gambar dalam Sidebar/Border around Images in Sidebar

dalam MINIMA template, tidak ada unik style untuk gambar dalam sidebar. Kita bisa mengeset definisi style untuk gambar tersebut (dalam sidebar), tanpa mengefeksi border dalam blog post kita.
Tambahkan perintah ini dalam stylesheet;

.sidebar img {
border:6px ridge #ff00ff;
}

dalam contoh diatas, gambar akan memiliki efek "ridge" atau border tampak menonjol seperti bingkai.

silahkan temans bereksperimen dengan value dan style yang temans inginkan.

5. Border disekeliling Header/Border around Header
Banyak orang yang mengupload gambar ke dalam Header, dan border disekeliling gambar terlihat sangat membosankan.
Untuk menghilangkan border, cari settingan border dibawah perintah seperti ini:
#header-wrapper
#header
#head-wrap
#head
lalu ganti value/perintah border menjadi "none" or "0px"

6. Border disekitar Blog Posts/Border around Blog Posts
Untuk menandai tiap post, sebagai pengganti garis bawah, temans dapat juga membuat border disekeliling blog post.

Scroll sampai temans menemukan perintah ini, dan masukkan/insert atau ganti (sesuai value yang temans inginkan) kode dibawah ini (dalam warna merah):

.post {
border:1px dotted #ff00ff;
padding:1.5em;
}

Kita harus memasukkan code padding untuk memberi spasi antara isi dan border. Tanpa perintah padding, text akan sangat dekat pada border.

7. Border disekeliling Sidebar/Border around Sidebar
Sama seperti diatas, untuk menambahkan border disekeliling sidebar, tambahkan dan/ubah kode dibawah ini (dalam warna merah):-

#sidebar-wrapper {
border:1px dotted #ff00ff;
padding:1.0em;
}

Di beberapa template, temans dapat menambahkan kode tersebut dibawah perintah ini:-

#sidebar-wrap
#sidebar

Padding memberikan spasi anatara isi sidebar dengan border. Preview template temans, jika temans melihat layout temans terafeksi karena padding, kurangi margin antara blog posts dan sidebar.

8. Border disekeliling Catatan kaki/Border around Footer
Jika Template temans memiliki elemen footer, maka border style dapat ditemukan dibawah perintah ini:
#footer {
border:1px solid $bordercolor;
}

9. Border disekeliling keseluruhan Blog/ Border around Entire Blog
Jika temans ingin memakai border dikeseluruhan blog, temans dapat menambahkan perintah border dibagian kode dari template seperti dibawah ini:

body {
border:1px solid #ff00ff;
}


semoga bermanfaat... selamat bereksperimen temans semua..!!!

1 comment:

black_oya said...

Hoohohohoh terima kasih yachmbak informasi na...

salam kenal dai bl4ck_oya@yahoo.co.id