Cara Mengatur Tampilan Sidebar  

Posted by Unknown in , , ,

Kali ini I'am mau ngasih tau untuk para Blogger supaya tampilan blognya jadi lebih bagus lagi.
Biasanya kalau download template dari situs-situs biasa, sidebarnya masih original dari templatenya.
Kalau bosen dengan sidebarnya yang gitu-gitu aja, I'am punya tips baru yang pasti bisa di coba.
Sekarang ikuti langkah-langkah barikut ini:
1. Masuk ke Blogger
2. Pilih Tata Letak
3. Edit HTML
4. Sekarang cari kode .sidebar h2 { dengan menekan tombol Ctrl+F pada keyboard supaya nyarinya gampang

Perhatikan kode berikut


.sidebar h2 {

font-size:100%;

font-weight:bold;

text-transform:uppercase;

text-align:right;

border: 1px solid #000;

background:url(Alamat Sidebar)no-repeat top left;

padding;5px;

}

5. Jika di template Blogger belum ada kode setelah kode .sidebar h2 {, anda bisa menambahkannya dari kode yang diatas
6. Ingat yang di copy cuma kode yang berwarna merah!!!
7. Nah... kalau masih bingung cara menyisipkannya, nih contohnya kaya begini...!!!


.sidebar h2 {
font-size:100%;

font-weight:bold;

text-transform:uppercase;

text-align:right;

border: 1px solid #000;

background:url(ILham\'s\ Blog_files/RGsdbar0.gif)no-repeat top left;

padding;5px;

margin: 0 0 0 0; padding: 10px 0 0 0px; font: normal bold 118% Georgia, Times, serif; color: #960A09; text-decoration: underline; height: 32px !important; /* for most browsers */ height /**/:57px; /* for IE5/Win */ }
.sidebar .widget { margin-left:6px; margin-right:2px ; margin-top:0px ; margin-bottom:1em; padding-left:30px; padding-right:15px; padding-top:0px; padding-bottom:30px; text-aling: justify; font-size: 85%; background: url('ILham\'s\ Blog_files/gears_si.jpg') no-repeat bottom center; }
.sidebar a {color: #960A09; text-decoration: none;}
.sidebar a:hover {color: #960A09; }
.sidebar li { padding-left: 5px; }
.profile-textblock { margin:.5em 0 .5em; text-aling: justify; }
.profile-img { float: left; margin: 0 5px 5px 0; border: 0px solid #ddd; padding: 4px;}

8. Kalau udah tau cara menyisipkannya, sekarang supaya bisa tau fungsi dari kode-kode diatas. Mari kita lihat fungsi masing-masing kodenya!!!


Kode font-size:100%;
Berfungsi untuk mengatur besarnya huruf. Satuan yang digunakan bisa pakai % atau pixels (px). Angkanya bisa diganti sesuai keinginan anda.

Kode font-weight:bold;
Berfungsi untuk menunjukan judul yang tampil dengan huruf tebal. Kata bold bisa anda ganti dengan normal, jika penampilanya tidak ingin tebal atau ganti dengan italic jika ingin penampilan hurufnya miring.

Kode text-transform:uppercase;
Berfungsi untuk menunjukan bahwa huruf yang tampil semuanya berupa huruf kapital (besar). Anda dapat menggantinya dengan kata lowercase (semuanya huruf kecil) atau capitalize (hanya huruf depannya yang besar).

Kode text-align:right;
Berfungsi untuk menunjukan letak judul sidebar di bagian kanan. Anda dapat menggantinya dengan left (jika ingin judulnya berada dikiri) atau center (jika ingin judulnya berada di tengah).

Kode border: 1px solid #000;
Berfungsi untuk menampilkan garis di sekeling judul sidebar. Sobat dapat mengganti ukuranya dan warna dari garis tersebut.

Kode background:url(Alamat Sidebar)no-repeat top left;
Berfungsi untuk menunjukan gambar latar dari judul sidebar.

Kode padding;5px;
Berfungsi untuk memberi jarak antara bagian pinggir judul sidebar dengan tulisan judul sidebarnya, dengan maksud agar kelihatan tidak mepet ke bagian pinggir.


9. Nah... udah tau kan maksud dari kode-kode diatas??? Kalau anda mau mengganti gambar latar judul sidebar anda. Anda bisa mengganti tulisan Alamat Sidebar dengan alamat gambar latar judul sidebar kesukaan anda.

Nih... I'am kasih tau beberapa contoh alamat sidebar!!!! Tinggal pilih ajah salah satunya...!!!!


Photobucket

Alamatnya yang ini :

http://i634.photobucket.com/albums/uu61/adetea/RGsdbar.gif


Photobucket

Alamatnya yang ini :

http://i634.photobucket.com/albums/uu61/adetea/side1.gif

Photobucket

Alamatnya yang ini :

http://i634.photobucket.com/albums/uu61/adetea/side3.gif

Photobucket

Alamatnya yang ini :

http://i634.photobucket.com/albums/uu61/adetea/header.gif


10. Kalau langkah-langkah tadi udah selesai, tinggal di simpan dech...!!!

Selamat Mencoba!!!
Sebarkan cara ini untuk teman-teman anda ya...!!!!
Kalau ilmu itu harus berbagi!!!

JANGAN PELIT....!!!!

This entry was posted on 8.04.2010 at 8:08:00 AM and is filed under , , , . You can follow any responses to this entry through the comments feed .

0 komentar

Posting Komentar