Tuesday 29 April 2014

How to Add Background Color to Your Gadget

Assalamualaikum...

this tutorial will teach you step by step on how to add background color to each of your gadget in the blog...enjoy!~ ^_^
(click on the pictures to get a larger view)

you can't proceed with the tutorial without gadget ID of each of the gadget that you want to add the background color to. How to find the gadget ID?

FINDING GADGET ID


1. Sign in to your blogger and click layout


2. Here you will see all of your gadgets. Click "edit" on the one that you want to add background color to. I use an example of Profile (I changed the gadget name to blog owner)


3. On the window that opens, look in the Address bar of that window in the upper right corner. At the end of that URL, you will see the ID of the Profile widget. It could be "Gadget2" or "HTML1". Mine was covered with the Protected Site Icon =_='. The gadget ID for my Profile is 'Profile1'


now that you have the gadget ID, you can proceed with adding the background color ^_^v


ADDING BACKGROUND COLOR



1. Sign in to your blogger and click "TEMPLATE DESIGNER"


2. Click "Advanced" and "Add CSS"


3. Copy the code below

                                          #Profile1{background:#faeed9 ;}


Highlighted yellow code is the colour code which you can find it in the web. Change it of your own choice.
Highlighted blue code is the gadget ID of each of the gadget in your blog. 

4. Paste the code in the space provided


5. Click "ENTER" on your keyboard and you are DONE!

6. You need to repeat step 3-5 for each of the gadget in your blog. Below are example of mine.


any questions or problem don't hesitate to leave a comment ya ^_^


Happy Blogging!

No comments:

Post a Comment

Related Posts Plugin for WordPress, Blogger...