HOME | ABOUT ME | DAFTAR ISI | welcome to happydesug.blogspot.com

Minggu, 29 Maret 2009

Buat Garis Pinggir Atau Kotak Pada Kolom Posting dan Sidebar

Kode ini aku dapatkan di Anggaleoputra.blogspot.com, BLOGGING IN MY STYLE.  Caranya mudah saja ya seperti akan dijelaskan dibawah ini.

Cara membuat garis pinggir pada posting adalah sebagai berikut:
1. Login ke Blogspot --> Layout --> Edit HTML

2. Cari baris kode

 .post { 

dan tambahkan baris kode berikut dibawahnya:

padding:10px;/*jarak antara text post dengan garis pinggir*/ 
Border-bottom:1px dotted $bordercolor; /*warna garis pinggir bawah*/
Border-top:1px dotted $bordercolor; /*warna garis pinggir atas*/
Border-left:1px dotted $bordercolor; /*warna garis pinggir kiri*/
Border-right:1px dotted $bordercolor; /*warna garis pinggir kanan*/
Margin-bottom:15px; /*jarak antara post satu dengan lainnya*/


3. Simpan.

*****

Untuk membuat garis pinggir pada sidebar, carilah kode berikut:

.sidebar .widget, .main .widget { 

lalu tambahkan kode berikut dibawahnya

Border-bottom:1px dotted $bordercolor; /*warna garis pinggir bawah*/
Border-top:1px dotted $bordercolor; /*warna garis pinggir atas*/
Border-left:1px dotted $bordercolor; /*warna garis pinggir kiri*/
Border-right:1px dotted $bordercolor; /*warna garis pinggir kanan*/

lalu simpan.

*****
Catatan:
Kode sudah disesuaikan dengan keperluan blog ini ya.
Baris kode yang berwarna orange dapat diganti sesuai dengan keinginan.
Baris kode yang berwarna hijau dapat diganti, misalnya dengan solid yang nantinya akan menampilkan garis lurus.
Baris kode yang berwarna merah dapat diganti dengan kode warna lain, misalnya #000000 untuk warna hitam.
Selamat mencoba.

UPDATE: Lihat Perbaikan

Posting Dengan Kategori Sama



4 komentar:

Awan mengatakan...

Awan dah nyoba pasang scryptnya untuk membuat garis pada sidebar..tapi koq tetep g' bisa knpa ya bos...help dung..!!!

Hartanto mengatakan...

woke man,,, bagus kok,,

Dimas Kurnia Ramadhan mengatakan...

Thanks Bos Infonya ^_^

Dimas Kurnia Ramadhan mengatakan...

thanks bos ^_^

Posting Komentar

Related Posts with Thumbnails