How to add a black navbar in blog:
- Go to blogger.
- Go to layout.
- Click on add a gadget.
- Choose HTML/Javascript box.
- Copy the below code.
- And paste the code into an HTML/Javascript gadget.
- That's all. You are done.
<style type="text/css">
#menu{width:100%; margin:0; padding:10px 0 0 0; list-style:none; background:#111; background:-moz-linear-gradient(#444,#111); background:-webkit-gradient(linear,left bottom,left top,color-stop(0,#111),color-stop(1,#444)); background:-webkit-linear-gradient(#444,#111); background:-o-linear-gradient(#444,#111); background:-ms-linear-gradient(#444,#111); background:linear-gradient(#444,#111); -moz-border-radius:50px; border-radius:50px; -moz-box-shadow:0 2px 1px #9c9c9c; -webkit-box-shadow:0 2px 1px #9c9c9c; box-shadow:0 2px 1px #9c9c9c}
#menu li{float:left; padding:0 0 10px 0; position:relative}
#menu a{float:left; height:25px; padding:0 25px; color:#999; text-transform:uppercase; font:bold 12px/25px Arial,Helvetica; text-decoration:none; text-shadow:0 1px 0 #000}
#menu li:hover >a{color:#fafafa}
*html #menu li a:hover{/* IE6 */color:#fafafa}
#menu li:hover >ul{display:block}
#menu ul{list-style:none; margin:0; padding:0; display:none; position:absolute; top:35px; left:0; z-index:99999; background:#444; background:-moz-linear-gradient(#444,#111); background:-webkit-gradient(linear,left bottom,left top,color-stop(0,#111),color-stop(1,#444)); background:-webkit-linear-gradient(#444,#111); background:-o-linear-gradient(#444,#111); background:-ms-linear-gradient(#444,#111); background:linear-gradient(#444,#111); -moz-border-radius:5px; border-radius:5px}
#menu ul li{float:none; margin:0; padding:0; display:block; -moz-box-shadow:0 1px 0 #111,0 2px 0 #777; -webkit-box-shadow:0 1px 0 #111,0 2px 0 #777; box-shadow:0 1px 0 #111,0 2px 0 #777}
#menu ul li:last-child{-moz-box-shadow:none; -webkit-box-shadow:none; box-shadow:none}
#menu ul a{padding:10px; height:auto; line-height:1; display:block; white-space:nowrap; float:none; text-transform:none}
*html #menu ul a{/* IE6 */ height:10px; width:150px}
*:first-child+html #menu ul a{/* IE7 */ height:10px; width:150px}
#menu ul a:hover{background:#0186ba; background:-moz-linear-gradient(#04acec,#0186ba); background:-webkit-gradient(linear,left top,left bottom,from(#04acec),to(#0186ba)); background:-webkit-linear-gradient(#04acec,#0186ba); background:-o-linear-gradient(#04acec,#0186ba); background:-ms-linear-gradient(#04acec,#0186ba); background:linear-gradient(#04acec,#0186ba)}
#menu ul li:first-child a{-moz-border-radius:5px 5px 0 0; -webkit-border-radius:5px 5px 0 0; border-radius:5px 5px 0 0}
#menu ul li:first-child a:after{content:''; position:absolute; left:30px; top:-8px; width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; border-bottom:8px solid #444}
#menu ul li:first-child a:hover:after{border-bottom-color:#04acec}
#menu ul li:last-child a{-moz-border-radius:0 0 5px 5px; -webkit-border-radius:0 0 5px 5px; border-radius:0 0 5px 5px}
#menu:after{visibility:hidden; display:block; font-size:0; content:""; clear:both; height:0}
* html #menu{zoom:1}/* IE6 */
*:first-child+html #menu{zoom:1}/* IE7 */
</style>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){if ($.browser.msie &&$.browser.version.substr(0,1)<7){$('li').has('ul').mouseover(function(){$(this).children('ul').show()}
).mouseout(function(){$(this).children('ul').hide()}
)
}
}
);
</script>
<ul id="menu">
<li><a href="https://www.blogger.com/blogger.g?blogID=1591492048552621997#">Home</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=1591492048552621997#">Categories</a>
<ul>
<li><a href="https://www.blogger.com/blogger.g?blogID=1591492048552621997#">CSS</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=1591492048552621997#">Graphic design</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=1591492048552621997#">Development tools</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=1591492048552621997#">Web design</a></li>
</ul>
</li>
<li><a href="https://www.blogger.com/blogger.g?blogID=1591492048552621997#">Work</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=1591492048552621997#">About</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=1591492048552621997#">Contact</a></li>
</ul>
See the Pen
Black navigation menu bar widget for blogger by Erna Ayuning Nareswari (@ashavenger)
on CodePen.
(f)
BalasHapus