Cara Mengatur Judul Sidebar

7/07/2009 Dsain Template dsign template Tips Trik Blog
Alhamdulilah walapun kerjaan banyak, di sekolah sibuk dan gak bisa liburan akhirnya kang fatur selesai juga membuat tips sederhana ini, demi teman khususnya buat para sobat blogger, kali ini kang fatur postting tentang cara "Mengatur Judul Sidebar"

Penampilan judul sidebar dapat sobat percantik dengan melengkapi kode-kode yang diperlukan agar penampilannya berbeda dengan sebelumnya (maksudnya kaya yang punya kang fatur gitu looch).

Kode awal untuk judul sidebar adalah .sidebar h2 { yang dibawahnya dapat sobat tambahkan kode-kode lain sesuai keperluan atau yang diinginkan.
O.K dech jangan ngomel-ngomel terus, yuk..sama-sama kita pelajari kode-kode yang dapat ditambahkan pada judul sidebar.
Jika para sobat ingin melalukan pengeditan pada judul sidebar, seperti biasa sobat harus melakukan langkah-langkah standar yaitu :

Masuk ke Blogger dengan ID sobat
Pilih Tata Letak
Pilih Edit HTML
Download Template Lengkap dengan tujuan jika hasil yang diharapkan tidak sesuai dengan keinginan sobat, 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 sobat perhatikan kode sidebar dibawah ini yang telah dilengkapi dengan berbagai kode

PERHATIKAN YAA???

.sidebar h2 {

font-size:110%;

font-weight:bold;

text-transform:uppercase;

text-align:right;

border: 1px solid #000;

background:#6df466;

padding;5px;

}

Mari Kita bahas satu persatu :

  • Kode font-size:110%; : berfungsi untuk mengatur besarnya huruf. Satuan yang digunakan bisa pakai % atau pixels (px). Angkanya dapat sobat ganti sesuai keinginan
  • Kode font-weight:bold; : menunjukan judul yang tampil dengan huruf tebal. Kata bold dapat sobat 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). Sobat 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. Sobat dapat mengganti dengan left jika ingin berada dikiri atau center jika ingin 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:#6df466; : untuk menampilkan warna latar dari judul sidebar. Ganti kode warnanya dengan warna kesukaan sobat. Selain dengan menampilkan warna sobat 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 para sobat. Kalau para sobat belum punya gambarnya atau gak mao repot repot silahkan sobat pake aja gambar hasil karya kang fatur di bawah ini, tinggal pilih sesuai keinginan sobat.

    Photobucket

    Alamatnya ini :

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


    Photobucket

    Alamatnya ini:

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

    Photobucket

    Alamatnya ini:

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

    Photobucket

    Alamatnya ini:

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

  • 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 sobat coba untuk mengatur penampilan judul sidebar pada blog kesayangan sobat
  • Jangan lupa setelah selesai klik Simpan Template.

Lihat hasilnya, selamat mencoba semoga bermanfaat buat sobat-sobat koe, jangan lupa comentnya O.K.

Artikel Terkait

Previous
Next Post »
Penulisan markup di komentar
  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

14 comments

makasi akang atas pelajarannya
manteb bener

Balas

Keren banget mas..
minta ijin buat taruh di artikel saya..
tenang aja nanti sy taruh sumbernya kok sekalian linknya.. boleh kan?

Balas

Happy Saturday, enjoy your week end and please visit my blog :)

Balas

Terimakasih tipsnya kang.. Udah nyoba nih dan berhasil alhamdulillah...

Balas

@dini arianty termiakasih juga dini, dah mao mampir di blog sederhana ini

Balas

Thank ya, infonya sangat bermanfaat buat semuanya...

Balas

kang fatur kogh punya gug bisa ya..?
punya aku masih baru buat

Balas

saya tidak mengerti tentang menambah elemen di atas posting dan cara mengganti kode di blog apa yang di buka??

Balas

Thanks ya kang udah share ilmunya, semoga bermanfaat buat kita semua...

Balas

Ass.Wr.Wb.
Top pokoknya, makasih semua artikelnya banyak mafaatnya dan mudah di fahami...termasuk sy sebagai pemula pendatang baru...sangat mudah mengukti langkahnya..hebat kang fatur......semoga banyak bermunculan kang Fatur kang Fatur lainya yang bisa membagi ilmu dan bermanfaat.....SUKSES BUAT KANG FATUR...teruskan perjuangannya....
Wass.wr.wb

Balas