Mengganti Sidebar Background Dengan Animasi

Kali ini saya akan membuat tutorial tentang cara mengganti background sidebar widget. kalo ada yang belum tahu background sidebar widget itu apa ini, adalah contoh background sidebar widget pada blog saya:



 mengganti sidebar widget

Nah...sudah tahu kan... Saya akan menerangkan cara mengganti background sidebar widget ini dan menggantinya dengan background lain yang lebih menarik. Untuk menggantinya kita harus sedikit mengotak-atik kode CSS template. Apabila kita akan mengotak-atik CSS template, backup lah template anda terlebih dahulu...biar aman. Cari aman aja lah....hehehe

Untuk menggantinya kita tidak menggunakan script tetapi dengan gambar biasa dengan format .gif, jadi tidak akan memberatkan blog. Oleh karena itu kita harus menyediakan gambar terlebih dahulu. Dari pada teman-teman bingung cari gambar yang tepat, Saya telah menyediakan gambar yang siap teman-teman gunakan :



sidebar widget



sidebar widget





Ini adalah link image hosting dari gambar diatas:
gambar 1 :http://i560.photobucket.com/albums/ss44/erge32/RGsdbar.gif
gambar 2 :http://i560.photobucket.com/albums/ss44/erge32/EkaSidebar.gif

Okey...kalau teman teman sudah dapat gambarnya, saya akan memulai tutorialnya.


Login dulu ke bloger > Tata Letak > Edit HTML > Kemudian cari Kode seperti di bawah ini (pake ctrl + f supaya cepet nyari kemudian isikan .sidebar h2)



.sidebar h2, .middlecol h2, .bottom h2{
color: $sidebarcolor;
text-transform: capitalize;
font-size: 14px;
font-family: Arial, Tahoma, Verdana;
font-weight: bold;
margin: 0px 0px 5px 0px;
padding: 0px 0px 2px 0px;
border-bottom:1px solid $bordercolor;
}


Nah kalo udah ketemu sobat tinggal tambahin aja Background nya seperti dibawah ini:



background:#f7f7f7 url(http://i560.photobucket.com/albums/ss44/erge32/RGsdbar.gif?imgmax=800)repeat;

atau




background:#f7f7f7 url(http://i560.photobucket.com/albums/ss44/erge32/EkaSidebar.gif?imgmax=800)repeat;


terserah yang mana dipakai image nya ... jadi kodenya seperti di bawah ini :



.sidebar h2, .middlecol h2, .bottom h2{
color: $sidebarcolor;
text-transform: capitalize;
font-size: 14px;
font-family: Arial, Tahoma, Verdana;
font-weight: bold;
margin: 0px 0px 5px 0px;
padding: 0px 0px 2px 0px;
border-bottom:1px solid $bordercolor;
background:#f7f7f7 url(http://i560.photobucket.com/albums/ss44/erge32/RGsdbar.gif?imgmax=800)repeat;
}


Simpan. Kalau sudah selesai, insyaAllah sidebar anda telah berganti dengan sidebar yang disertai lampu berjalan yang indah. Apabila teman-teman semua suka dengan tutorial ini, pasang banner blog ini di blog anda. Atau klik iklan di blog ini atuh...pssttt...pssttt, kalau ketahuan bisa kena dibanned nih. hehehe...

( Sumber : http://ekakom.blogspot.com )

37 komentar:

  1. Sebelumnya makasih udah berkomentar diblog saya,,,,


    Postingannya bermanfaat ne,,,

    kemarin saya udah coba buat sendiri tapi gambarnya masing kurang baik,,numpang sedot gambarnya y sobat....

    BalasHapus
  2. Sobat kalau tak keberatan saya minta dibuatin yang warna hitam ukuran 385x38

    BalasHapus
  3. Introduce me I’m harry
    hello my friends is my first time to visiting here, wow ur blog is very good and ur articles is very awesome, i'm glad to be here for read it. thanks for share anything. is a place to learn something

    BalasHapus
  4. We we we jadi penuh animasi, jadi penuh warna hidup ini.
    Salam sukses

    BalasHapus
  5. @The Jaev, silakan sedot gambarnya
    @Harry, Trims sudah berkunjung
    @Stop Dreaming, smoga succes jua......

    BalasHapus
  6. pengelola blog yang budiman..
    perkenalkan, saya warga baru du dunia blog.
    saya telah mencoba untuk mengubah sidebar background dengan animasi dengan menggunkan gambar ke 3. tapi berulang kali dengan berbagai cara, saya belum berhasil.? terima kasih atas bantuannya.?

    BalasHapus
  7. pengelola blog yang budiman..
    koq..pertanyaan saya belum dijawab.?; tapi untung sich, coz saya sekarang milih tipe gambar nomor 1. thanks ya atas penjelasannya
    ditunggu..

    BalasHapus
  8. waH,,,keRen euY,,,,
    tP kaLo buaT sendiRi ukuRannya brP y mz???

    BalasHapus
  9. tapi diblog saya gx ada tulisan: sidebar h2


    jadi gimana??????

    BalasHapus
  10. Thank ya bro atas sarannya....

    mampir donk ke blog saya, jangan lupa beri saran untuk blog saya

    BalasHapus
  11. Assalamu'alaikum......
    Aku dah coba pasang di sidebar aku, dan berhasil,tapi untuk sidebar yg bagian atas belum. Jadi untuk sidebar yang bagian atas gimana caranya..??

    BalasHapus
  12. sob, itu maksudnya ganti sidebar yang mana? maksudnya tulisan judul sidebarnya atau background sidebar itu sendiri? aku masih binun nih, maaf ya? T.T

    BalasHapus
  13. trims ya tutorialnya, tapi aku kok gak bisa2 ya..gak ketemu yg .sidebar h2)nya padahal aku pake template minima loh. :n:

    BalasHapus
  14. terima kasih tipsnya ...izin copy warnanya ya

    BalasHapus
  15. assalamu'alaikum,
    mau coba ah,,
    bisa gak ya.. kira-kira ane...

    BalasHapus
  16. klo dikasih ke sidebar h1 bisa gag kag???
    sama ajah kan?? pi kok Na gag bisa??

    BalasHapus
  17. SEEP seep ngikut brother...

    BalasHapus
  18. Thank's...

    INFO : Mau dapet dollar gratis....?
    kunjungi http://dapetdollargratis.co.cc

    BalasHapus
  19. mas mau tanya kok .sidebar h2 di blog saya g ada y???padahal saya pakek tamples blogger.mohon penjelasannya........

    BalasHapus
  20. .main-inner .widget {
    #FF0000background-color: $(widget.background.color);
    border: 1px solid $(widget.border.color);
    padding: 0 $(widget.padding.side) 15px;
    margin: 20px -16px;

    cari tulisan yg berkedip"t,,, trus diganti dgn,,, background:#f7f7f7 url(LINK FOTONYA?imgmax=800)repeat;

    BalasHapus
  21. .main-inner .widget {
    #FF0000background-color: $(widget.background.color);
    border: 1px solid $(widget.border.color);
    padding: 0 $(widget.padding.side) 15px;
    margin: 20px -16px;

    cari tulisan yg berkedip"t,,, trus diganti dgn,,, background:#f7f7f7 url(LINK FOTONYA?imgmax=800)repeat;

    BalasHapus
  22. assalamu'alaikum,saya mau izin share yah sobat!!!

    BalasHapus
  23. thanks...to tips nya...tp ngomong2 ngga bisa d terapkan ke wordpress,ngga nich?

    BalasHapus
  24. ok bos saya undah menggati sidebar ku good luck

    BalasHapus
  25. sangat bermanfaat.
    ditunggu blogwalkingnya bro.
    http://blo9-er.blogspot.com

    BalasHapus
  26. sangat keren sekali sob,sumpah
    ditunggu kunjungan balik nya di Dhani's Blog
    thanks sob

    BalasHapus

Mau tukeran link? silakan buka Link Sahabat dan apabila ada pertanyaan silakan tulis di Kotak Pertanyaan. Terima Kasih...

Kami akan menghapus komentar yang: Tak sopan, memakai HURUF BESAR, berupa caci maki, mengandung kata-kata kebun binatang, debat kusir, provokasi, di luar konteks, berupa undangan/ reklame. Komentar yang terlalu panjang, tanpa paragraf dan sulit dipahami. Komentar copy-paste, silakan di-link saja.

Isi komentar adalah tanggung jawab penulis komentar, bukan tanggung jawab pengelola blog/situs ini. Harap maklum.