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).
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
.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.
http://i634.photobucket.com/albums/uu61/adetea/RGsdbar.gif
http://i634.photobucket.com/albums/uu61/adetea/side1.gif
http://i634.photobucket.com/albums/uu61/adetea/side3.gif
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.
http://img87.imageshack.us/img87/5862/image1an1.gif
http://img110.imageshack.us/img110/6218/image2ie0.gif
http://img98.imageshack.us/img98/9617/image3cr0.gif
http://img134.imageshack.us/img134/633/image4hx4.gif
http://img139.imageshack.us/img139/83/image5oa7.gif
http://img509.imageshack.us/img509/6449/image6fu0.gif
http://img527.imageshack.us/img527/6543/image7go9.gif
http://img507.imageshack.us/img507/5774/image8wn8.gif
http://img150.imageshack.us/img150/5784/image9qo1.gif
http://img404.imageshack.us/img404/1214/image10vr1.gif
http://img412.imageshack.us/img412/3808/image11pc0.gif
http://img100.imageshack.us/img100/4658/image12du2.gif
http://img132.imageshack.us/img132/4733/image13lj1.gif
http://img145.imageshack.us/img145/7793/image14zg9.gif
http://img412.imageshack.us/img412/4403/image15jc7.gif
http://img264.imageshack.us/img264/7575/image16kn8.gif
