44 Membuat background Pada Judul Sidebar

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

Ingin mengganti background pada judul atau titel sidebar seperti contoh dibawah ini?
mengganti background pada judul atau titel sidebar< mengganti background pada judul atau titel sidebar<






Berikut cara mengganti background pada judul sidebar, tutorial ini sudah anaa praktekan diblog anaa disini dan disini

  • Loggin ke Blogger => Layout =>Edit HTML dan cari kode dibawah.
.sidebar h2 {
  • Tambah kode berikut dibawah kode tadi
background:url(alamat image anda disini)repeat-x;
  • Isi tulisan berwarna merah diatas dengan alamat gambar anda
  • Kalau ditemplate anda tidak menemukan kode .sidebar h2 {
  • Tambahkan saja kode berikut pada sidebar content
.sidebar h2 {
background:url(alamat image anda disini)repeat-x;
color: #FFFF66;
font-size: 11px;
font-family: Georgia;
font-weight: strong;
margin: 0px 0px 5px 0px;
padding: 3px 0px 3px 10px;
text-align:center;
}
  • Note edit tulisan berwarna merah dengan alamat image/ gambar anda, warna ungu warna tulisan, warna biru ukuran tulisan, warna hijau kedudukan tulisan!
Untuk mengedit warna font anda bisa lihat kode warna disini
  • Simpan template!
Semoga bermanfaat!


ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Tips Trik Blogging

44 komentar :

  1. Hehehe..sesederhana itu??kirain gimana gitu..!ckckck,,tp hasilnya keliatan bagus sekali ya.
    Nyoba ah, hehe
    Makasih y ukhti selalu merespon pertanyaan2 sy dgn sabar...

    BalasHapus
  2. Oh mba, bagi dong tipsnya..kok loading pagenya ringan amat sih?? pdhl kan blog ini cukup banyak java scriptnya ya...

    BalasHapus
  3. makasih infonya ya sob berguna banget nih buat aku

    BalasHapus
  4. ini dia yang ku cari cari makasih ya sob

    BalasHapus
  5. all: Terimaksh apresiasix!

    BalasHapus
  6. dan yg ini juga... aduuuh tahu ajah deh yg ina butuhin... thanks sekali lagi kag...
    seneng ina disini hihihi....

    BalasHapus
  7. he2 yg benar aja de'? sama2 ina snang dgn kunjungan dan cuap2x!

    BalasHapus
  8. Siiip, bagus banget sob... aku jg udah pake.
    Salm sukses selalu.. =))

    BalasHapus
  9. kak, kalo mau ngubah font judul sidebar dengan font yang kita inginkan, trus ditambah icon juga, gimana caranya ya kak?makasi sebelumnya kak.

    BalasHapus
  10. btw.. aku pake template minima, tapi kok aku ga nemu kode .sidebar h2 { ya kak? padahal udah pake ctrl+f, emang ga ada ya kak kalo di minima template? trus kalo ga ada, apa masih bisa nambah icon atau ganti font title sidebar kak?
    makasi kak. aku borong pertanyaan nih.. :D

    BalasHapus
  11. @ syifa: iya de' ditemplate minima mmg tidak ada sidebar h2. Ade tambahkan aja kode sidebar h2....
    ngikutin kode kk diatas, jadi ttp masih bisa nambahin icons dan mengganti font titel

    BalasHapus
  12. ukhti gmna nieh liat pyaku blog ku kan??
    disitu padahl ku tambah sprti yg di atas tapi pada top sedebar cz ndak ada sidebar h2..
    jadinya lucu aku pengen sprti yg dicontoh jadi kan bagus rapi gtu... ukh, gimna yah??

    .topsidebar, .botsidebarleft{
    line-height: 1.5em;
    }

    .topsidebar h2,.botsidebarleft h2{
    background:url(http://dl3.glitter-graphics.net/pub/2280/2280553vgdco5kixd.gif)repeat-x;
    color: #2E2E2E;
    font-family:Georgia, Times New Roman;
    font-size: 25px;
    font-weight: normal;
    margin: 0 0 6px;
    padding: 0;
    }

    BalasHapus
  13. ukhti yg recent koment itu gak muncul ntar an akirim lewat email yah..

    mohon di terima... mengapa tidak bisa??
    aopa ada kesalahan

    BalasHapus
  14. @ Chomisah Nur: Khan udah ana jelasin tu ukh pada tutorial diatas, klu sidebar h2 tidak ada, ukhty tambahin aja ngikutin kode yang dah ana tuliskan diatas? Ukhty stlh g' nemu sidebar h2 langsung berhenti ya baca tutorial selanjutnya?

    Untuk widget recent comment: iya, mau ngirim apa? file template ukhty?

    BalasHapus
  15. wah..bener2 mantaap boss......tq ya....

    BalasHapus
  16. assallamualaikum,

    wah mbak koq pux sy tdk bs brbh ya. Sy sdh mengkt tutorial ini tp masi sj tdk brbh. Sy memakai template minima klasik.
    Oya, apakah jk ingin memberi warna background sidebar harus membagi sidebar x dlm beberapa kolom dulu?
    Thx

    BalasHapus
  17. ralat : maksud saya apakah jika ingin membuat background pada 'judul' sidebar hrs membg sidebar nya dlm beberapa kolom dl ?
    Jika iy, sy mhn diberikan tutorial x cr membagi sidebar dlm beberapa kolom2 terpisah

    BalasHapus
  18. @ lovely graphics: tidak kok tdk harus membagi kolom sbgmn yg anda mksdkn.

    sy lihat blog anda sudah memakai background tu titel sidebarx?

    BalasHapus
  19. Bagus infonya...jd pengen bnget ikutin,tp g tau masukin alamat url image nya mba...

    kl boleh kasih pencerahan ke email saya mba..terima kasih

    BalasHapus
  20. maaf klo w di anggap float... tapi tolong bantu saya... di template gua hanya terdapat ini aja klo gua ctrl+F dan sudah centang expand...







    www.ind0-hacker.blogspot.com <---masih dalam renovasi

    BalasHapus
  21. thank ya sob? Silahkan kunjug balik...!!!

    BalasHapus
  22. wow, blognya keren banget mas...
    makasih infonya, langsung praktek

    salam sukses...

    BalasHapus
  23. mantebs.. ni yang gua cari" gan..
    nice bangetss.. :)

    BalasHapus
  24. assalamu a'laikum. ukhti kok di blog saya gak ada kode seperti ".sidebar h2 {" dan juga ada beberapa kode yang tidak saya temukan pada template yang saya gunakan..Apa saya harus menggunakan template yang sama seperti yang ukhti gunakan?..mhh..puyeng juga nyarinya...saya berharap dpat referensi dari ukhti?

    BalasHapus
  25. @ Wa'alaikumusslm warahmatullah. # Kalau ditemplate anda tidak menemukan kode .sidebar h2 {
    # Tambahkan saja kode sidebar h2 seperti contoh diatas pada sidebar content. Terimakasih, smg dpt membantu!

    BalasHapus
  26. atas referensi yang ukhti berikan,maka ijinkanlah saya untuk mngucapkan Jazaakumullah Khairan

    BalasHapus
  27. sip sudah diterapkan sidebarnya sesuai dengan cara di blog ini
    mantap :)

    BalasHapus
  28. mbak/mas, klo ingin merubah tinggi backgroundnya gimana ya..?
    soalnya background saya gk tampil full, terpotong bagian bawahnya...
    soalnya backgroundnya sperti awan..jadinya cuma kotak aja, bukan awan.
    tolong bantuannya.

    BalasHapus
  29. Tempat untuk mencari backgroud header sidebarnya di mana ukhty...??????

    BalasHapus
    Balasan
    1. Silahkan search di google image, bnyk insyaAllah. Lbh kreatif bgsnya buat sendiri pakai ukuran kb yg kecil sj, atau pakai kode warna sj dan u/modifikasi bordernya bisa lbh aktraktif pakai kode bertenaga CSS3. Selamat berkreasi.

      Thanks apresiasinya.

      Hapus
  30. (alamat image anda disini) itu maksudnya gimana? bagi infonya ya makasi :)

    BalasHapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB:Sebelum menyisipkan kode silahkan gunakan tool konversi kode terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar
Konversi Kode di Sini!