Cara Modifikasi Label Blogspot Dengan Gambar

Baca Juga

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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZhizxHyBatZYXBaGeE8y8T8Dv3hnpYMgveC_trgstk2ms2cOuJfDirKRfut_Xry4O_2vO1X3JhS4pwUlV98GtuEEzzeu6ULMkIzirMU-fCoTz4iNko-c02MU3xVNHMNjP6aqGGw9DF20/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZhizxHyBatZYXBaGeE8y8T8Dv3hnpYMgveC_trgstk2ms2cOuJfDirKRfut_Xry4O_2vO1X3JhS4pwUlV98GtuEEzzeu6ULMkIzirMU-fCoTz4iNko-c02MU3xVNHMNjP6aqGGw9DF20/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.