rss

wibiya widget

  • Free Domain Ayo... Buat Blogmu dengan nama domain sendiri!!
  • CO.CC Dapatkan nama domain gratis selama 1tahun di CO.CC

5.21.2009

Kustomisasi Sidebar Title

Apakah title sidebar Anda biasa-biasa aja? Dan ingin merubahnya agar terlihat menarik.Tepat sekali Anda perlu mekustomisasi title sidebar Anda.
Kustomisasi ini sebenarnya dapat membuat keseragaman dalam sidebar title. Disini kita dapat memberikan garis batas serupa kotak, atau dengan background warna, dan background gambar.
Baiklah kita mulai:

1. Masuk ke 'Tata Letak'
2. Klik 'Edit HTML'
3. Jangan lupa back up dulu templatenya
4. Cari kode ini:



.sidebar h2 {
margin:0;
padding:0 0.2em;
line-height:2em;
}
5. Kalau belum tersedia, silahkan copas kode diatas dan tempatkan persih dibawah kode berikut:

/* Sidebar Content
----------------------------------------------- */
.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;
}
Tepatnya akan seperti ini:

/* Sidebar Content
----------------------------------------------- */
.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;
}

.sidebar h2 {
margin:0;
padding:0 0.2em;
line-height:2em;
}
6. Nah, sekarang kita pelajari dulu dengan model border. Caranya tambahkan kode berikut
border:1px solid #kode warna; tepat dibawah .sidebar h2 {
Sebelumnya pilih kode warna yang ingin Anda masukan. Contohnya seperti ini:

.sidebar h2 {
border:1px solid #190101;
margin:0;
padding:0 0.2em;
line-height:2em;
}
7. Untuk model background warna. Tambahkan kode berikut background:#kode warna; tepat dibawah .sidebar h2 {
Sebelumnya pilih kode warna yang ingin Anda masukan. Contohnya seperti ini:

.sidebar h2 {
background:#f3172c;
margin:0;
padding:0 0.2em;
line-height:2em;
}
8. Penggabungan Antara model border dengan background warna.

.sidebar h2 {
border:1px solid #190101;
background:#f3172c;
margin:0;
padding:0 0.2em;
line-height:2em;
}
9. Dan untuk model gambar. Tambahkan kode berikut background:url(URL OF THE PICTURE)no-repeat; tepat dibawah .sidebar h2 {
Tepatnya seperti ini:

.sidebar h2 {
background:url(URL OF THE PICTURE)no-repeat;
margin:0;
padding:0 0.2em;
line-height:2em;
}

10. Jangan lupa Save Template

Ok sekian dulu dan selamat mencoba....

Kustomisasi Sidebar Title
SocialTwist Tell-a-Friend

0 komentar:


Posting Komentar

Silahkan tinggalkahn pesan Anda yang sopan, terimakasih!

←   →
Related Posts with Thumbnails

Other Information

Tutorial Blog

  • Membuat Iklan Melayang dengan Tombol Close
  • Button Maker Online
  • How To Install Alert in Blog
  • Creating Exchange Banner and Text Bar
  • Make Favicon Generator
  • What is blog?
  • Memasang Artikel Terkait Menggunakan LinkWithin
  • Cara Membuat Tab View
  • Cara Memasang Alert Pada Blog
  • Cara Membuat Link Download
  • Cara Membuat Page Navigation
  • Menghilangkan Navbar Blog
  • Menyembunyikan Navbar Blog
  • Memasang bookmark di Setiap Postingan
  • Pasang Audio di Blog
  • Mengganti Tanggalan Dengan Icon Kalender
  • Pasang Iklan di Bawah ReadMore
  • Mengganti Link Blog Pager Dengan Icon
  • Menampilkan Status Online
  • Pasang Emoticon Yahoo di Atas Kotak Komentar
  • Membuat Tulisan Link Berwarna-warni
  • Membuat Teks Dalam Tabel
  • Membuat Teks Berjalan Pada Title Blog
  • Membuat Teks Bergerak Pada Title Bar Blog
  • Membuat ReadMore
  • Membuat Marquee Untuk Banner Iklan
  • Membuat Log in Blogger
  • Membuat Link di Postingan
  • Membuat gambar melayang disudut halaman blog
  • Membuat Button Sebagai Link
  • Membuat Box Pemisah Pada Sidebar
  • Membuat Box Pemisah Pada Postingan
  • Membuat Background Warna / Gambar di Postingan
  • Membuat Awalan Huruf Besar di Awal Postingan
  • Membuat Automatic Scroll Blogroll
  • Membuat Artikel Postingan
  • Membuat Animasi Label Awan
  • Membuat border Pada Gambar Posting
  • Membuat Image Header Buatan Sendiri
  • Memasang Icon Pada Post Footer Element
  • Memasang Google Translate Memakai Icon Bendera
  • Kustomisasi Sidebar Title
  • Kode Warna
  • Kode Emotion
  • Daftar ke Search Engine
  • Cara Pasang Shoutmix
  • Cara Menambah Kolom Pada Footer Blog
  • Cara Membuat Tabel di Postingan
  • Cara Membuat Menu di Atas Header
  • Cara Membuat Link
  • Cara Membuat Favicon
  • Cara Memasukan Kode HTML ke Postingan
  • Cara Memasang Search Engine2
  • Cara Memasang Kotak Pencarian
  • Cara Buat Tukeran Banner dan Teks Barnya
  • Belajar Membuat Shoutmix Tersembunyi
  • Alternatif Teks Pada Gambar
  • Buat Blog
  • Berbagai Macam Metode dan Program Dalam Mencari Uang Melalui Blog
  • Apa itu Blog
  • Kurs Valuta Asing

    Harga Emas dan Minyak Dunia


    Today's Birthday

    Sponsor...

    Adsense Indonesia
     
    My Ping in TotalPing.com Computers Blogs Powered by  MyPagerank.Net
    Yahoo bot last visit powered by MyPagerank.Net
    Msn bot last visit powered by MyPagerank.Net



    RUMAH WEB
    Percayakan Web Hosting Anda Hanya Kepada Rumah Web
    http://www.rumahweb.com

    MASTERWEB
    Mau Punya Blog Dengan Domain Sendiri atau Punya Facebook Dengan Domain Sendiri. Hanya 94ribu
    http://masterkey.masterweb.net

    FREE PREMIUM DOMAIN
    Segera Bergabung Untuk Mendapatkan Domain {.com .net .org} -GRATIS-
    www.FreePremiumDomain.com

    000webhost
    Dapatkan FREE WEB Hosting 250Mb
    http://masterkey.masterweb.net
    Foto saya
    ngeblog saat ini sudah menjadi aktivitas yang dilakukan oleh beberapa kalangan termasuk saya, tapi di blog ini, saya hendak berbagi dengan apa yang sudah saya pelajari maupun yang sedang saya pelajari.
    Jump To Top
    Kembali ke atas