Cara Membuat Backround Gambar pada Judul Widget Blog

Jumat, 22 April 2016

Cara Membuat Backround Gambar pada Judul Widget Blog

Good day bloggers.. ^^

Siang ini muntiana mau post tentang cara memberi backround gambar untuk judul widget, tampilan backround widget yang cantik & berwarna dapat semakin memperindah tampilan blog kita. Langkah ini sangat mudah namun untuk para blogger pemula mungkin ini bisa jadi sedikit sulit, but.. lama-lama juga familiar ko dengan coding blog Emot Semangat, Emoticon




Ikuti langkah-langkah di bawah ini ya..

1. Masuk ke dasbor Blogger kamu

2. Klik menu Template lalu pilih Edit HTML

3. Kemudian cari kode yang seperti ini ya

/* Headings
----------------------------------------------- */
h2 {
font: $(widget.title.font);
color: $(widget.title.text.color);


4. Tambahkan kode

background-image:url(URL GAMBAR);
margin: 0px 0px 5px 0px;
border-radius: 3px;
 -moz-border-radius: 1px;
 -webkit-border-radius: 1px;

    Kode tersebut diletakkan setelah kode nomor 3
    URL GAMBAR diganti dengan link gambar backround kamu

5. Nantinya tampilan kodenya kurang lebih akan jadi seperti ini

/* Headings
----------------------------------------------- */
h2 {
font: $(widget.title.font); color: $(widget.title.text.color); background-image:url(URL GAMBAR); margin: 0px 0px 5px 0px; border-radius: 3px; -moz-border-radius: 1px; -webkit-border-radius: 1px;}


6. Jangan lupa sebelum disimpan klik Pratinjau template dulu ya

7. Jika tampilannya sudah sesuai dengan yang diinginkan kemudian klik SAVE Template


Gampang kan caranya?
Kamu bisa dapetin url gambar dari gambar yang kamu upload di Photobucket, dsb.
Muntiana juga mau ngasih url backround yang cute nih :


Backround, Backround Strawberyy
https://2.bp.blogspot.com/-K5mNDTw7bE8/VxmTTnZN4MI/AAAAAAAABO8/Tl779xwnyNgD-KjE0eEIC5zqWm-AoAz1gCLcB/s1600/1003871jy1x3h354f.gif


Backround Blue Notes

https://1.bp.blogspot.com/-7iekWeYJ0tI/VxmTo0lxraI/AAAAAAAABPI/NiOs8CfPs4QbEIMiptvDGPseHWvhS2AfQCKgB/s1600/1666963hbxgyw9kuw.gif



Backround Purple Candy

https://4.bp.blogspot.com/-45fqx3XtxIo/VxmY11_Pt_I/AAAAAAAABPc/I0HzHI-paaIikzf0-_V-6mK5erXukoblACLcB/s1600/1587277tu2ub0l49l.gif 



Backround Pink Flower

https://1.bp.blogspot.com/-MtwUVRiLUgI/VxmZVK5hbGI/AAAAAAAABPg/4Pzii0dTluYg7J5uKgDhCijJc5J9Gb7tQCLcB/s1600/pink-flower-background.jpg 

-
thank you

1 komentar:

Next Previous Home
Related Posts Plugin for WordPress, Blogger...