CSS Horizontal Menu Gadget for Blogger

English French German Spain Italian Dutch Russian Portuguese Japanese Korean Arabic Chinese Simplified
Follow these steps to install the menu into your blog:
  •  Login to Blogger 
  • Layout / Add gadget 
  • Select HTML / JavaScript 
  • Paste the following code:
<style>
.menupic{width:100%;margin:0 auto;padding:0 auto;}
.menuhorisontal{float:right;background-color:#2b5385;background-image: -moz-linear-gradient(top,#4488dd 0,#2b5385 100%); background-image: -ms-linear-gradient(top,#4488dd 0,#2b5385 100%); background-image: -o-linear-gradient(top,#4488dd 0,#2b5385 100%); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#4488dd),color-stop(100%,#2b5385)); background-image: -webkit-linear-gradient(top,#4488dd 0,#2b5385 100%); background-image: linear-gradient(to bottom,#4488dd 0,#2b5385 100%);border-bottom:1px solid #112136;border-top:4px solid #1a3352;height:45px;width:100%;margin:0 auto; padding:0 auto;text-shadow:1px 1px 2px #112136}
.menuhorisontal ul{margin: 0; padding-left: 0px;color:#357798;text-transform: capitalize;list-style-type: none;font:bold 12px Arial, Helvetica,Arial,Verdana,sans-serif;}
.menuhorisontal li{display: inline; margin: 0;}
.menuhorisontal li a{border-left:1px solid #1a3352;border-top:4px solid #112136;color:#fff;float:left;font-size:12px;line-height:20px;margin-top:-4px;padding:3px 10px;text-align:right;transition:all 600ms ease-in-out;-webkit-transition:all 600ms ease-in-out;-moz-transition:all 600ms ease-in-out;-o-transition:all 600ms ease-in-out;-ms-transition:all 600ms ease-in-out;}
.menuhorisontal li a span{color:#b6d5fd;display:block;font-size:10px;font-weight:400;}
.menuhorisontal li a:hover {background:#112136;border-top:4px solid #4488dd;}
</style>
<div class='menupic'>
<div class='menuhorisontal'>
<ul>
<li><a href='/'>Home <span>My Frontpage</span></a></li>
<li><a href='#'>TITLE <span>DESCRIPTION</span></a></li>
<li><a href='#'>TITLE <span>DESCRIPTION</span></a></li>
<li><a href='#'>TITLE<span>DESCRIPTION</span></a></li>
<li><a href='#'>TITLE<span>DESCRIPTION</span></a></li>
<li><a href='#'>TITLE<span>DESCRIPTION</span></a></li>
</ul>
</div>
</div>

  • Put your items on the page and click save.

0 σχόλια:

Post a Comment

Subscribe to: Post Comments (Atom)