Jumat, 01 Agustus 2008

Mengatur Tampilan Judul Sidebar

judul-sidebar Jika pada postingan yang lalu kang rohman meminta pendapat para pembaca setia kolom tutorial seputar apakah setuju kang rohman membuat tutorial seputar mencari uang di internet, dan menilik dari komentar yang ada sepertinya 100% setuju, namun beberapa di antaranya ada yang menyarankan untuk membuat tutorial tersebut bukan di blog ini namun pada blog lain. Hmmmmmm…. setelah saya pikir-pikir memang ada benarnya juga sih, jika saya membuat tutorial tentang bisnis di blog ini maka ciri khas yang begitu kental dengan kolom tutorial akan sirna di telan oleh waktu yang begitu cepat berlalu. Setelah menimbang kemudian membungkus lalu memasukan ke dalam keranjang, maka tutorial seputar mencari uang di internet tidak akan saya posting di blog ini.

Apakah kang rohman akan membuat blog baru? sepertinya begitu dech, namun entah kapan. soalnya untuk membuat sebuah blog baru di perlukan energi yang lebih untuk membangunnya. Sementara saat inipun saya kewalahan untuk mengurus blog blog yang sudah ada, bahkan cenderung di telantarkan. Jadi, kapan nih blog barunya akan di buat? kapan yah? bingung, di tunggu saja dech. Mungkin setelah kang rohman bisa bekerja full ngeblog di rumah. do’akan saja ya.

Daripada memikirkan sesuatu yang belum pasti datang dalam waktu dekat, mending kita berjalan seperti biasa saja. Kali ini kang rohman menjawab pertanyaan salah seorang pembaca yaitu “bagaimana cara mengatur tampilan judul sidebar?” Nah ini nih sepertinya mudah untuk saya terangkan.

Bagi anda yang terlanjur sayang dengan template yang anda pakai sekarang namun merasa sedikit kurang puas dengan tampilan judul sidebar nya, maka anda dapat berkreasi sendiri untuk menciptakan judul sidebar yang sesuai dengan selera anda. Belum tahu triknya? nih kang rohman jelasin.

Untuk mengatur tampilan judul sidebar tidaklah sulit, anda tinggal mengatur kode CSS untuk title sidebar, di manakah letak kode tersebut? jika merujuk pada template asli blogger, maka biasanya di tulis dengan kode :

 

.sidebar h2 {

……………….

……………….

………………

}

 

Titik-titik yang saya gambarkan adalah isi kode judul sidebar yang mengendalikan atau mendefinisikan tampilan judul sidebar. Tugas anda adalah menambahkan kode atau mungkin mengurangi kode yang ada di situ.

Misalkan anda ingin mengatur besarnya hurup judul sidebar, maka anda tinggal menambahkan kode ini :

 

.sidebar h2 {

font-size:110%;


}



 



Nilai 110% adalah nilai yang bisa anda ganti dengan nilai yang lainnya sesuai dengan besarnya hurup yang anda inginkan, misal : 120%, 200%, 250%, atau angka yang lainnya. Satuan persen ( % ) bisa juga bisa anda ganti denga satuan pixel (px), misal : 12px, 15px, 20px, atau angka yang lainnya.



Jika hurup judul sidebar ingin terlihat tebal, maka anda cukup menambahkan kode berikut :



 



.sidebar h2 {



font-size:110%;


font-weight:bold;



}





























































































Tulisan bold berarti hurup ingin tebal, definisi ini bisa anda ganti dengan yang lain, misal : jika tulisan yang tampil ingin terlihat biasa maka anda tinggal mengganti tulisan bold dengan tulisan normal. jika tulisan anda ingin terlihat miring, maka gantilah tulisan bold dengan tulisan italic.



Hurup judul sidebar ingin menjadi hurup besar (kapital) semua ;



 



.sidebar h2 {



font-size:110%;


font-weight:bold;



text-transform:uppercase;



}



 



Tulisan uppercase berarti hurup yang di tampilkan adalah besar (kapital) semua. Jika anda ingin hurup kecil semua, maka anda tinggal mengganti uppercase dengan lowercase. jika hurup depannya saja (inisial) yang ingin hurup besar maka ganti uppercase dengan capitalize.



Jika tulisannya ingin berada di sebelah kanan, tinggal menambahkan kode ini :



 



.sidebar h2 {



font-size:110%;


font-weight:bold;



text-transform:uppercase;



text-align:right;



}











































 



Tulisan right berarti judul sidebar akan di kanan, jika ingin di sebelah kiri maka tinggal di ganti dengan tulisan left, jika ingin di tengah tinggal di ganti dengan center.



Jika ingin ada garis tinggal di tambahin kode border :



 



.sidebar h2 {



font-size:110%;


font-weight:bold;



text-transform:uppercase;



text-align:right;



border: 1px solid #000;



}



 



1px solid #000 berarti bahwa akan ada garis mengelilingi tulisan judul sidebar sebesar 1 pixel dengan warna hitam, tinggal di sesuaikan saja.



Jika judul sidebar ingin ada warna backgroundnya :



 



.sidebar h2 {



font-size:110%;



font-weight:bold;



text-transform:uppercase;



text-align:right;



border: 1px solid #000;



background:#6df466;



}













 



#6df66 adalah kode warna, kode ini di sesuaikan dengan keinginan anda. belum tahu mengenai kode warna? coba baca postingan yang ini! software warna nya bisa anda download secara gratis di sini!



 





Penggunaan padding :



 



.sidebar h2 {



font-size:110%;



font-weight:bold;



text-transform:uppercase;



text-align:right;



border: 1px solid #000;



background:#6df466;



padding;5px;



}



 



Penggunann padding sebesar 5px perlu anda tambahkan apabila anda menggunakan background warna, karena jika tidak memakai padding maka tulisan akan terlihat bertabrakan dengan bagian luar sehingga terlihat kurang menarik. nilai 5px tentu saja nilai yang bisa anda sesuaikan dengan keinginan.



Bagaimana jika di template saya tidak ada kode :





 



.sidebar h2 {



……………….



……………….



………………



}





 



Berarti h2 sidebar anda tidak di definisikan, jalan keluarnya ya tinggal buat saja sendiri.



Silahkan anda bereksperimen agar mendapatkan tampilan judul sidebar yang lebih menarik  lagi untuk di lihat.


Tidak ada komentar:

Posting Komentar