Hello Everyone!
You people may think that there is so much pink and polka dots on my blog. But I love these colors and patterns so much that I always end up creating something with these. I promise next time I'll come up with something completely different. But today I'm all set to show these pretty pink polka dots menu bars which can add charm to your blog. These are light-weight and created with pure css only. No Images have been used. So these wont affect the loading time of your blog. Also adding these little cute menu bars to your blogger is so easy. Just follow the steps given below.
Features of this Menu Bar For Blogger:
- No Images used.
- Created with pure css only.
- Doesn't affect the loading time of your blog at all.
- Light-weight code.
- Supported by all major browsers
- Degrades gracefully in lower browsers.
How To Add this Menu Bar to Blogger:
Step1~ Go to Blogger Dashboard->Layout>Add a gadget below header>HTML/JavaScript
Step2~ Leave the title empty and paste one of the codes given below.
Step3~Click on "Save" button.
Note:~ Replace # with your Page/ Label's URL.
~Replace text in green with your own Label/Page name.
~If you feel that your menu bar is either falling two much on the left side or running out of size, then just increase/decrease value in font-size:17px;
~To add more options in the list, just add more lines like this in the list.
<li> <a href="#"> Option </a> </li>
Preview
(Note that background is transparent in this menu bar with pink dots and pink border)
Code
<div id="nav">
<ul>
<li> <a href="#"> HOME </a> </li>
<li> <a href="#"> Products </a></li>
<li> <a href="#"> Services</a></li>
<li> <a href="#">About Us</a></li>
<li> <a href="#">Privacy Policy</a></li>
<li> <a href="#">Disclaimer</a></li>
</ul>
</div>
<style>
#nav{
position:relative;
z-index:5;
}
#nav ul {
background:white;
background: radial-gradient(pink 15%, transparent 16%),
radial-gradient(pink 15%, transparent 16%);
background: -moz-radial-gradient(pink 15%, transparent 16%),
-moz-radial-gradient(pink 15%, transparent 16%);
background: -o-radial-gradient(pink 15%, transparent 16%),
-o-radial-gradient(pink 15%, transparent 16%);
background: -webkit-radial-gradient(pink 15%, transparent 16%),
-webkit-radial-gradient(pink 15%, transparent 16%);
background-size:30px 30px;
background-position: 0 0, 15px 15px;
border:1px solid pink;
padding: 0 20px;
list-style: none;
position: relative;
display: inline-table;
}
#nav a:link{
margin:8px 8px;
}
#nav ul:after {
content: ""; clear: both; display: block;
}
#nav ul li {
float: left;
}
#nav ul li:hover a {
background: #ffd6d6;
}
#nav ul li a {
display: block; padding: 10px 20px;
color: white; text-decoration: none;
background:pink;
font-size:17px;
border-radius:3px;
border:1px solid pink;
}
</style>
Preview
Code
<div id="nav">
<ul>
<li> <a href="#"> HOME </a> </li>
<li> <a href="#"> Products </a></li>
<li> <a href="#"> Services</a></li>
<li> <a href="#">About Us</a></li>
<li> <a href="#">Privacy Policy</a></li>
<li> <a href="#">Disclaimer</a></li>
</ul>
</div>
<style>
#nav{
position:relative;
z-index:5;
}
#nav ul {
background:white;
background-color:white;
background-image: radial-gradient(pink 15%, transparent 16%),
radial-gradient(pink 15%, transparent 16%);
background-image: -moz-radial-gradient(pink 15%, transparent 16%),
-moz-radial-gradient(pink 15%, transparent 16%);
background-image: -o-radial-gradient(pink 15%, transparent 16%),
-o-radial-gradient(pink 15%, transparent 16%);
background-image: -webkit-radial-gradient(pink 15%, transparent 16%),
-webkit-radial-gradient(pink 15%, transparent 16%);
background-size:30px 30px;
background-position: 0 0, 15px 15px;
border:1px solid pink;
padding: 0 20px;
list-style: none;
position: relative;
display: inline-table;
}
#nav a:link{
margin:8px 8px;
}
#nav ul:after {
content: ""; clear: both; display: block;
}
#nav ul li {
float: left;
}
#nav ul li:hover a {
background: #ffd6d6;
}
#nav ul li a {
display: block; padding: 10px 20px;
color: white; text-decoration: none;
background:pink;
font-size:17px;
border-radius:3px;
border:1px solid pink;
}
</style>
Preview
Code
<div id="nav">
<ul>
<li> <a href="#"> HOME </a> </li>
<li> <a href="#"> Products </a></li>
<li> <a href="#"> Services</a></li>
<li> <a href="#">About Us</a></li>
<li> <a href="#">Privacy Policy</a></li>
<li> <a href="#">Disclaimer</a></li>
</ul>
</div>
<style>
#nav{
position:relative;
z-index:5;
}
#nav ul {
background:#ff9999;
background-color:#ff9999;
background-image: radial-gradient(#ffffff 15%, transparent 16%),
radial-gradient(#ffffff 15%, transparent 16%);
background-image: -moz-radial-gradient(#ffffff 15%, transparent 16%),
-moz-radial-gradient(#ffffff 15%, transparent 16%);
background-image: -o-radial-gradient(#ffffff 15%, transparent 16%),
-o-radial-gradient(#ffffff 15%, transparent 16%);
background-image: -webkit-radial-gradient(#ffffff 15%, transparent 16%),
-webkit-radial-gradient(#ffffff 15%, transparent 16%);
background-size:30px 30px;
background-position: 0 0, 15px 15px;
border:1px solid #ffffff;
padding: 0 20px;
list-style: none;
position: relative;
display: inline-table;
}
#nav a:link{
margin:8px 8px;
}
#nav ul:after {
content: ""; clear: both; display: block;
}
#nav ul li {
float: left;
}
#nav ul li:hover a {
background: #ff9999;
color:white;
}
#nav ul li a {
display: block; padding: 10px 20px;
color:#ff9999; text-decoration: none;
background:#ffffff;
font-size:17px;
border-radius:3px;
border:1px solid #ffffff;
}
</style>
Preview
Code
<div id="nav">
<ul>
<li> <a href="#"> HOME </a> </li>
<li> <a href="#"> Products </a></li>
<li> <a href="#"> Services</a></li>
<li> <a href="#">About Us</a></li>
<li> <a href="#">Privacy Policy</a></li>
<li> <a href="#">Disclaimer</a></li>
</ul>
</div>
<style>
#nav{
position:relative;
z-index:5;
}
#nav ul {
background:black;
background-color:black;
background-image: radial-gradient(#ff66cc 15%, transparent 16%),
radial-gradient(#ff66cc 15%, transparent 16%);
background-image: -moz-radial-gradient(#ff66cc 15%, transparent 16%),
-moz-radial-gradient(#ff66cc 15%, transparent 16%);
background-image: -o-radial-gradient(#ff66cc 15%, transparent 16%),
-o-radial-gradient(#ff66cc 15%, transparent 16%);
background-image: -webkit-radial-gradient(#ff66cc 15%, transparent 16%),
-webkit-radial-gradient(#ff66cc 15%, transparent 16%);
background-size:30px 30px;
background-position: 0 0, 15px 15px;
border:1px solid #ff66cc;
padding: 0 20px;
list-style: none;
position: relative;
display: inline-table;
}
#nav a:link{
margin:8px 8px;
}
#nav ul:after {
content: ""; clear: both; display: block;
}
#nav ul li {
float: left;
}
#nav ul li:hover a {
background: #ff3399;
}
#nav ul li a {
display: block; padding: 10px 20px;
color: black; text-decoration: none;
background:#ff66cc;
font-size:17px;
border-radius:3px;
-moz-border-radius:3px;
-o-border-radius:3px;
border:1px solid #ff66cc;
}
</style>
Preview
Code
<div id="nav">
<ul>
<li> <a href="#"> HOME </a> </li>
<li> <a href="#"> Products </a></li>
<li> <a href="#"> Services</a></li>
<li> <a href="#">About Us</a></li>
<li> <a href="#">Privacy Policy</a></li>
<li> <a href="#">Disclaimer</a></li>
</ul>
</div>
<style>
#nav{
position:relative;
z-index:5;
}
#nav ul {
background:black;
background-color:black;
background-image: radial-gradient(pink 15%, transparent 16%),
radial-gradient(pink 15%, transparent 16%);
background-image: -moz-radial-gradient(pink 15%, transparent 16%),
-moz-radial-gradient(pink 15%, transparent 16%);
background-image: -o-radial-gradient(pink 15%, transparent 16%),
-o-radial-gradient(pink 15%, transparent 16%);
background-image: -webkit-radial-gradient(pink 15%, transparent 16%),
-webkit-radial-gradient(pink 15%, transparent 16%);
background-size:30px 30px;
background-position: 0 0, 15px 15px;
border:1px solid pink;
padding: 0 20px;
list-style: none;
position: relative;
display: inline-table;
}
#nav a:link{
margin:8px 8px;
}
#nav ul:after {
content: ""; clear: both; display: block;
}
#nav ul li {
float: left;
}
#nav ul li:hover a {
background: black;
color:pink;
}
#nav ul li a {
display: block; padding: 10px 20px;
color: black; text-decoration: none;
background:pink;
font-size:17px;
border-radius:3px;
border:1px solid pink;
}
</style>
Also Read:
CUTE CUSTOM POPULAR POST WIDGETS FOR BLOGGER
CUTE CUSTOM LABELS WIDGET FOR BLOGGER BLOG
CUSTOM READ MORE BUTTONS FOR BLOGGER BLOG
CUTE CUSTOM FACEBOOK LIKE BOX FOR BLOGGER
