Adding Gradient Color in Blogger Menu Navigationwith CSS
Simple Step ways to Make Color Gradation On Blogger Navigation Menus with CSS3. CSS3 gradient colors for background website
Simple Step to Make Color Gradation On Blogger Navigation Menus with CSS3
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language.[1] Although most often used to set the visual style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any XML document, including plain XML, SVG and XUL, and is applicable to rendering in speech, or on other media.
With CSS, a website page can be customized with ease. For example, we want to change the background color, we can do it by creating css and calling the color code we want.
If usually the background color on the navigation menu of a website is only colored with 1 color, what if the navigation menu is colored with gradation color. Is it possible a website could use a combination of several colors as a navigation menu?
With CSS3, of course it is very possible. As in the example of this blog. I changed the color of navigation with gradation using CSS3.
Want to know how to do it? It's easy. Follow these steps.
1. Go to the Theme menu in your Blogger dashboard, then click Edit HTML.
2. Copy this CSS code.
#menu-navigation {
background: #1d3c91;
/* Old browsers */
background: -moz-linear-gradient(top, #1d3c91 44%, #2989d8 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(top, #1d3c91 44%, #2989d8 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #1d3c91 44%, #2989d8 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='
#1d3c91'
, endColorstr='
#2989d8'
, GradientType=0);
/* IE6-9 */
margin: 0 auto 10px auto;
padding: 0;
}
- Change the #menu-navigation code with your navigation DIV ID. Please use the inspect element of your blogger blog to find out the DIV code for the navigation menu on your blog..
- For the color combination you want, please create your own.
3. Paste the code above, and paste in the amp-custom code for the valid AMP blog. And for non-amp blog, you paste the code above code ]]>/b: skin >.
4. Click SAVE for final step.
Very easy? Let's try it. CSS is not just for navigation yes. You can also set the code with other DIV classes, such as the background website or footer.