Add Custom CSS Blogger Dynamic Views Gadgets

Blogger team has released Gadgets for Blogger Dynamic Views for all default templates to add some extra spice up features to all blogs. This dock styled gadgets was designed using latest programming techniques called AJAX, CSS3 and HTML5.
Currently the gadgets enabled users to easily navigate to the desired part of the page by following Blog Archive, Followers, Labels, Profile, Subscribe etc and also it supports 7 Blogger Dynamic Views. Currently, the gadget's color is set to black by default, with white font, but you can customize it with your own custom colors and font as well.




Some of my readers reported me that the gadget bar stays hidden (docked) at the right corner of the window and very difficult to see, and also suggested me to customize the gadget with colors, So, that's the reason, here I am in front of you writing this article. First we fix the hidden gadget issue then later we will customize the gadget with colors and fonts.

How To Fix Hidden Blogger Gadget Issue?

Here is the screenshot of hidden style gadget.


To fix the hidden gadget issue, you need to add little piece of CSS code to your template by following below simple steps.

1. Go to your Blogger Dashboard click on ---> Design tab ---> Template Designer tab.

2. Next click on Advanced and then on Add CSS tab.

3. Copy and Paste the following piece of CSS code inside the box and click on Apply to Blog.

#gadget-dock
{
    right: 0;
}

4. For reference see the screenshot attached below.



Please visit your blog to see that the hidden gadget issue is resolved, if not let me know your queries through comment section below. Here is the screenshot of visible gadget.

How To Customize Blogger Gadget With Colors

1. Go to your Blogger Dashboard click on ---> Design tab ---> Template Designer tab.

2. Next click on Advanced and then on Add CSS tab.

3. Copy and Paste the following piece of CSS code inside the box and click on Apply to Blog.

.gadget-icons, .gadget-title, .gadget-content, .ss {
background: red !important;
color: yellow !important;
}

The 'background' attribute represents the main background color of gadget, while the 'color' attribute represents the gadget's font color. You can add your own background and fonts colors.

More Customize options for Blogger Gadget

1. If you would like to use more personalized colors, then use following CSS code.

.gadget-icons, .gadget-title, .gadget-content, .ss {
background: #FF2B2B !important;
color: #FCD927 !important;
}

2. If you'd like to adjust the gadget's link color as well, add the following code to your CSS.

.gadget-icons a, .gadget-title a, .gadget-content a, .ss a{
color: white !important;
}

3. If you also want to customize the background colors of the gadgets bar, you can apply these styles following the same procedure described above.

.gadget-icons
{
    background-color: red;
}

.gadget-title
{
    background-color: red;
}

.gadget-selected .gadget-icons
{
    background-color: yellow;
}

The gadgets comes with three different block. You can add individual colors to each block. So, play with the colors and enjoy!. Let us know your feedback's via comment box.