Blogger Tutorial - How to change the background color of a specific Gadget

In this tutorial i will show you how to change the Background color of Each Gadget Individually...

There are 2 ways you can do it, one is by editing the HTML of your blog, and the other is by adding a CSS code. I have decided to share the CSS method simply because it's easier, and there is less danger with CSS then if i get you into messing with HTML coding... Here we go:


First of all you will need your Gadget/s ID. You cannot do this without the ID of each gadget you want to add a background color to. To find the ID of a gadget, go to your blog's Dashboard, then click on Layout, here you will see all of your Gadgets. Click Edit on the one you want to edit, and 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 that particular widget... It may be for example = "Gadget2", or "HTML1"......


Now that you have your Gadget's ID, go back and click on Template on your Dashboard menu. Then click on Customize, then Advanced, and then Add CSS... Now in the Add Custom CSS window, you want to copy the following Code:

#Gadget ID
{background:your color ;}

Now, you will need to add 2 things. First replace where it says "Gadget ID" with the ID of the Gadget you want to add a specific color to. Next, you want to add the color of your choice. For a list of Codes and colors click here for HTML color codes. When you find and pick a color, REPLACE the "your color" text in the code above, with the code of the color your chose.

Save.. Done..


NOTE: You can add the same exact code, one after the other, for Each Gadget you want to customize... All you need is the Gadget's ID, and the HTML color code of your choice... Good luck, and if you have any questions, i'm always here to help... :)



My Previous Tutorials:

1. Creating a Blogger Blog:
http://soap-bubbles-land.blogspot.com/2015/12/blogger-tutorial-creating-blogspot-blog.html

2. Blogger tutorial for sharing links on Facebook!: 
http://soap-bubbles-land.blogspot.com/2016/06/blogger-blogspot-tutorial-sharing-links-facebook-debug-thumbnail.html

3. Blogger Archive Tutorial - Expand/Collapse:
http://soap-bubbles-land.blogspot.com/2016/06/blogger-archive-expand-collapse-tutorial-guide-blogspot.html

4. Blogger Tutorial - How to add borders to gadgets:
http://soap-bubbles-land.blogspot.com/2016/07/blogger-tutorial-how-to-add-borders-to-gadgets.html

5. Blogger Tutorial - How to add a separation line & how to adjust the space between Gadgets:
http://soap-bubbles-land.blogspot.com/2016/08/blogger-tutorial-how-to-add-separation-adjust-space-gadgets-backup-template.html


============================
My Blogger Blog:
http://seriouslyfunnyhumor.blogspot.com/
============================
Find me on Twitter:
https://twitter.com/Lionsnr892
============================
Find me on Google+
https://plus.google.com/+JamesYoung24
============================

+Blog +Free-blog +Blogger +Blogspot +Create-blog +Blog-creation +Starting-a-blog +Starting-blogspot +Creating-blogspot +Gmail +Google +Website +Personal-blog +Blogger-tutorial +Facebook +Facebook-thumbnail +HTML +Blogger-HTML +Facebook-cache +Facebook-preview +Website +Archive +Blogger-archive +Blogspot-archive +Blogger-archive-expand +Blogger-archive-collapse +Blogger-archive-gadget +Blogger-gadget +Blog-widget +Blog-gadget +Blog-border +Blog-gadget-border +Blog-widget-border +Add-borders-to-gadgets +Add-borders-to-widgets +Blogger-add-gadget-borders +Backup-restore +Backup-template-blogger +Separation-lines-gadgets +Separation-lines-widgets +Adjust-space-between-gadgets +Css +Add-CSS +Add-custom-CSS +Blogger-gadgets-separation-lines +Blogger-widgets-separation-line +Blogger-adjust-space-between-gadgets +Blogger-adjust-space-between-widgets +Background-gadget-color +Edit-specific-gadget-background-color

Picture --> I took the Screenshot from Blogger's page


↠ This post was originally published on Bubblews in the Tutorials category by me (Bubblerian) on August 26th 2013.