cara modifikasi background label blogspot
Label Blogspot
Bismillah... tutorial blog pada kesempatan ini saya akan membahas sedikit cara merubah tampilan label pada blogspot. setelah kemarin saya posting tetang cara merubah kolom label menjadi 2, sekarang saya akan share cara menyispkan gambar pada label.


Secara Default label pada blogspot tidak memakai awalan gambar/background terus bagaimana caranya? caraa merubahnya gampang, sobat tinggal menyisipkan sedikit secript CSS pada blogspot.
  • Langkah pertama Login ke Blogger
  • Next Step masuk ke area Edit HTML yang berada di tab Design Blog
  • Centang Expands Widgets
  • Terus Sobat cari Tag ]]></b:skin>
  • Setelah Ketemu sobat sisipkan kode CSS di bawah ini tepat di atas tag ]]></b:skin>

Kode CSS Tag Label
.Label .widget-content ul li { background: url('http://2.bp.blogspot.com/-L4r8UIp9Qq4/ToGUIWCFoYI/AAAAAAAAASY/D8XnGJGdW1U/s368/tag.gif') no-repeat 0 2px; padding: 0 0 3px 20px; }   
Setelah selesai save dan lihat hasilnya. dan jangan lupa tampilan label blog sobat memakai Display List jangan memakau Display Cloud

CSS Label Blogspot
  • .Label : adalah tag label yang akan di modifikasi
  • .widget-content : adalah conten yang terdapat pada widget blog
  • background: url('http://2.bp.blogspot.com/-L4r8UIp9Qq4/ToGUIWCFoYI/AAAAAAAAASY/D8XnGJGdW1U/s368/tag.gif : adalah alamat/URL gambar yang menjadi bakcgroun label.
  • no-repeat 0 2px : background tidak di ulang ulang dan berada pada psosis 2 px dari sebelah kiri.
  • padding: 0 0 3px 20px; : adalah jarak sepasi dari konten label
Di cukupkan sampai disini tutorial blog cara modifikasi label pada widget conten blogspot. semoga berhasil Good Luck Happy Bloging.
Axact

Z-PLATE

Terima Kasih Telah Berkunjung dan Berkanan Membaca artikel dari Blog Kami, Silahkan Masukan Komentar Untuk menambah Motivasi Kami.

Post A Comment:

3 comments:

  1. Yang penting pastikan saja ukuran gambarnya sesuai. Dan lagi, jika kamu ingin menerapkan gambar sebagai murni gambar (bukan Background), kamu bisa memakai CSS pseudo element :before untuk meletakkan gambar seperti ini:

    #Label1 .widget-content ul li a:before {
    content: url(http://2.bp.blogspot.com/-L4r8UIp9Qq4/ToGUIWCFoYI/AAAAAAAAASY/D8XnGJGdW1U/s368/tag.gif);
    }

    BalasHapus
  2. mantap gan.. makasih petunjuknya semoga bermanfaat dan memberikan motivasi lagi buat belajar tentang CSS

    BalasHapus