Blog Tutorial

Tutorial Blog, Cheat Games, Tutorial Ponsel, Tutorial Komputer, Tutorial Browser

Rabu, 19 Mei 2010

Membuat Background Pada Widget

Kategori : ,
Background adalah salah satu hal yang bisa memperindah template anda, namun apabila terlalu banyak background akan membuat template sobat menjadi lambat untuk di akses. Mungkin pilihan itu berat anda mau indah atau mau cepat? Template keren, percuma templatenya keren tapi lambat saat di akses. Loading cepat, mungkin pengunjung akan sedikit betah dengan cepatnya template atau blog anda cepat untuk di akses tapi akan membosankan atau monoton apabila template sobat kurang variasi.

Mungkin di atas hanya sedikit saja tips dari Cepat VS Keren, sebenarnya tips di atas ada hubungannya dengan trik yang saya akan jelaskan yaitu Membuat Background Pada Widget. Apa hubungannya dengan trik ini? nanti saya akan jawab setelah menjelaskan langkah-langkahnya. Pada postingan sebelumnya saya pernah membahas tentang membuat background dan membuat background gambar blog. Di masing-masing trik membuat background di blog saya mempunyai cara yang berbeda-beda dan menempati background yang berbeda-beda juga. Nah kalau yang ini memberi background pada widget, dari pada cuap-cuap yang tidak pernah di baca nangis mendingan saya langsung kecaranya aja y.
  1. Seperti biasa login ke blogger
  2. masuk ke tata letak => Edit HTML
  3. lalu cari kode .sidebar .widget lalu tambahkan background: #000; ke dalamnya, contoh


    .sidebar .widget {
    border-bottom:1px dotted $bordercolor;
    margin:0 0 1.5em;
    padding:0 0 1.5em;
    }

    Menjadi

    .sidebar .widget {
    border-bottom:1px dotted $bordercolor;
    margin:0 0 1.5em;
    padding:0 0 1.5em;
    background: #000;
    }


    Screen Shout .sidebar .widget
    Screen Shout .sidebar .widget 2
  4. nah pada kode property background terdapat nilai kode warna, apabila sobat ingin menggunakan image tinggal tambahkan saja url ('LOKASIGAMBAR') no-repeat ke dalam property background, contoh :


    .sidebar .widget {
    border-bottom:1px dotted $bordercolor;
    margin:0 0 1.5em;
    padding:0 0 1.5em;
    background: #000;
    }

    Menjadi

    .sidebar .widget {
    border-bottom:1px dotted $bordercolor;
    margin:0 0 1.5em;
    padding:0 0 1.5em;
    background: #000 url ('LOKASIGAMBAR') no-repeat;
    }

    Penjelasan :
    • #000 => warna dari background
    • LOKASIGAMBAR => alamat gambar yang telah di upload untuk di jadikan background, misalnya : http://oketrik.blogspot.com/image/contohbackground

  5. setelah itu simpan deh dan sobat bisa melihat hasilnya

    Hasil Membuat Background Pada Widget
Bagaimana dengan trik "Membuat Background Pada Widget"? mudah bukan? di atas hanya contoh saja dan di atas adalah kode css pada template default dari blogger dan penempatannya pada sidebar jadi apabila ada perbedaan atau ingin di taruh di lain tempat sobat hanya memerlukan kode .widget saja. Sekian dari saya Terima Kasih Terima kasih dan Happy Blogging :).
Bagikan Artikel : Facebook Twitter Google+ Linkedin Technorati Digg

15 Komentar untuk Membuat Background Pada Widget

sip, dicobain dulu, kalau background di kotak komen caranya gimana sob?

Iya.....kalau background di kotak komen caranya gimana?

Sip kawan. sbnrnya ini simple banget, tp emang bagi orang yang gak tau, jadi bingung..... makin maju aja nich......... salam ya dari blogger sidoarjo.

keren Sobat... widget jadi ngga monoton dan terlihat lebih menarik...

@Ardhiansyam & @KangTiar => sip sob besok akan di buat, klo sekarang g bisa soalnya cukup satu postingan dalam sehari. Terima kasih semua ^_^

caranya ternyata mudah dan tidak begitu rumit ....

Siiip sob..
sukses sll..

nambah ilmu lagi nih...

mantapzzzz tipsx......

Mudah banget ternyata,ya,kirain sulit.Tapi belum sempat kuterapkan.Maybe next time.

kapan2 pasti ku coba... sy dah follow sob.. follback ya..

mas kalau hanya widget tertentu saja yang mau dikasih background image bagaimana caranya?

tinggal cari id widget tersebut, lalu buat kode htmlnya, misal widget tersebut idnya Profil1 berarti kode cssnya

#Profil1 {background:#fff;}

text yg bertulisan tebal dan miring itu adalah kode warna jadi sesuaikan dengan keinginan kamu :)

yess ketemu juga habis muter cari2 postingan kaya gini

Makasih Sob...sudah berbagi