Cari Artikel Blog Ini

Total Tayangan Laman

MENGATUR JUDUL SIDEBAR

Penampilan judul sidebar dapat anda percantik dengan melengkapi kode-kode yang diperlukan agar penampilannya berbeda dengan sebelumnya.
Kode awal untuk judul sidebar adalah .sidebar h2 { yang dibawahnya dapat anda tambahkan kode-kode lain sesuai keperluan.
Yuk..sama-sama kita pelajari kode-kode yang dapat ditambahkan pada judul sidebar.
Jika anda ingin melalukan pengeditan pada judul sidebar, seperti biasa anda harus melakukan langkah-langkah standar yaitu :
  • Masuk ke Blogger dengan ID anda
  • Pilih Tata Letak
  • Pilih Edit HTML
  • Download Template Lengkap dengan tujuan jika hasil yang diharapkan tidak sesuai dengan keinginan anda, template dapat dikembalikan pada keadaan semula.
  • Cari kode diatas tadi yaitu : .sidebar h2 {
  • Perhatikan kode tersebut pada bagian bawahnya, apakah sudah memiliki penambahan kode atau belum. Jika belum atau masih standar , coba nada perhatikan kode sidebar dibawah ini yang telah dilengkapi dengan berbagai kode


Anda Perhatikan kode-kode untuk penampilan Judul sidebar dibawah ini


.sidebar h2 {

font-size:110%;

font-weight:bold;

text-transform:uppercase;

text-align:right;

border: 1px solid #000;

background:#6df466;

padding;5px;

}



Kita bahas satu persatu :
  • Kode font-size:110%; : berfungsi untuk mengatur besarnya huruf. Satuan yang digunakan bisa pakai % atau pixels (px). Angkanya dapat anda ganti sesuai keinginan
  • Kode font-weight:bold; : menunjukan judul yang tampil dengan huruf tebal. Kata bold dapat anda ganti dengan normal jika penampilanya tidak ingin tebal atau ganti dengan italic jika ingin penampilan hurufnya miring.
  • Kode text-transform:uppercase; : menunjukan bahwa huruf yang tampil semuanya berupa huruf kapital (besar). Anda dapat mengganti dengan kata lowercase (semuanya huruf kecil) atau capitalize (hanya huruf depannya yang besar).
  • Kode text-align:right; : Letak judul sidebar di bagian kanan. Anda dapat mengganti dengan left atau center.
  • Kode border: 1px solid #000; : berfungsi untuk menampilkan garis di sekeling judul sidebar. Anda dapat mengganti ukuranya dan warna dari garis tersebut.
  • Kode background:#6df466; ; untuk menampilkan warna latar dari judul sidebar. Ganti kode warnanya dengan warna kesukaan anda. Selain dengan menampilkan warna anda juga dapat menampilkan sebuah image sebagai background judul sidebar. Perhatikan cara meletakan alamat image agar tampil sebagai background


    background:url(http://www.alnect.net/blogcontest/banner_blog_contest.gif)no-repeat top left;  



    Ganti alamat image diatas dengan alamat image kepunyan anda.
  • Kode padding;5px; : untuk memberi jarak antara bagian pinggir judul sidebar dengan tulisan judul sidebarnya, dengan maksud agar kelihatan tidak mepet ke bagian pinggir.
  • Silahkan anda coba untuk mengatur penampilan judul sidebar pada blog kesayangan anda
  • Jangan lupa setelah selesai klik Simpan Template.



Catatan : Jika pada template anda tidak ditemukan kode .sidebar h2 { coba anda cari kode h2 {. Belum ditemukan juga...... berarti anda harus menambahkan sendiri pada tempalte.
Caranya cari kode


/* Headings
----------------------------------------------- */



kemudian copy kode judul sidebar diatas dan paste tepat dibawahnya. Editlah kode tesebut sesuai dengan panduan diatas.

Jika artikel ini bermanfaat..? Bagikan lewat :


BACA JUGA ARTIKEL DIBAWAH INI



Comments
3 Comments

3 komentar :

kagol mengatakan...

thanks atas infonya brow..a kenal

buste mengatakan...

wah ini blog keren abis templatenya baguuuuuuuuuuuuus banget

Chomisah Noer mengatakan...

Hmm ana praktekin dikt yg huruf tebalnya thnks infonya ..

tapi ana butuh bntuan nieh .. klw yg ana punya kan ada kotaknya tuh terus biar ada image di dalam kotanya itu tepat di sebalh kiri sebelum tulisannya itu gmna yah??? tpi kotaknya ttp ada thnks

bantu yah...
n ana pernah lihat setiap Sidebar misalnya profile itu beda kotak sidebarnya klw menu jga beda lagi hmm carny gmna tuh??

Poskan Komentar

Ceritakan keberhasilan/kegagalan anda setelah mencoba Tutorial Blogger pada kotak komentar. Kritik dan Saran juga boleh asal sifatnya membangun...!!!