Wednesday, May 18, 2011

Cool Sunrise gloss drop down menu for blogger

 This is cool drop down menu for your blogger.


sunrise ,sunrise gloss



1. Log in to your blogger account and Go to Design >> Edit HTML

2. Put checked marked in Expand Widget Templates

3. Find this tag by using Ctrl+F    ]]></b:skin>

4. Paste below code after ]]></b:skin> tag

@charset "utf-8";

/* CSS Document */
body{
padding: 25px;
}

/*^'^ Navigation Structure ^'^*/

.nav-container-outer{

background: #990000;

padding: 0px;

height: 74px;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuSy1hHqdjkR8tDY8aLWkwCHgTGOHSribxD-LhHiuqw6CI9gkGw3ZeJMYOEyydPy62hPo20Hev1-AaaZGUzMafVjlnTqnY64KRPSlD07B2tavXDu8Z_mZInu1bznrWVt50G2ZBERRsJQUr/s1600/nav-bg.jpg);

}

.float-left{

float: left;

}

.float-right{

float: right;

}

.nav-container .divider{

display:block;

font-size:1px;

border-width:0px;

border-style:solid;

}

.nav-container .divider-vert{

float:left;

width:0px;

display: none;

}

.nav-container .item-secondary-title{

display:block;

cursor:default;

white-space:nowrap;

}

.clear{

font-size:1px;

height:0px;

width:0px;

clear:left;

line-height:0px;

display:block;

float:none;

}

.nav-container{

position:relative;

zoom:1;

margin: 0 auto;

}

.nav-container a, .nav-container li{

float:left;

display:block;

white-space:nowrap;

}

.nav-container div a, .nav-container ul a, .nav-container ul li{

float:none;

}

.nav-container ul{

left:-10000px;

position:absolute;

}

.nav-container, .nav-container ul{

list-style:none;

padding:0px;

margin:0px;

}

.nav-container li a{

float:none

}

.nav-container li{

position:relative;

}

.nav-container ul{

z-index:10;

}

.nav-container ul ul{

z-index:20;

}

.nav-container ul ul ul{

z-index:30;

}

.nav-container ul ul ul ul{

z-index:40;

}

.nav-container ul ul ul ul ul{

z-index:50;

}

li:hover>ul{

left:auto;

}

#nav-container ul {

top:100%;

}

#nav-container ul li:hover>ul{

top:0px;

left:100%;

}



/*^'^ Primary Items ^'^*/

#nav-container a{

padding:7px 17px 7px 18px;

margin: 10px 0px 0px 0px;

color: #FFFFFF;

font-family: Trebuchet MS, Arial, sans-serif, Helvetica;

font-size:14px;

text-decoration:none;

font-weight: bold;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnghogG5op9bfF1fsJLISsfWxAEpgYNEFzWHF5hGUrp5fHcls547VoUX8n7Ql7uub3wufvuRs5-GSyYwhj9H5bfiQ8k_JlwUQTL5U1EFKWbS3niTm-U_d6UgA9nQBMhczOeuS45mSe9kOQ/s1600/item-primary-bg.gif);

background-repeat: no-repeat;

background-position: top;

}



#nav-container a:hover{

color: #6C3600;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnghogG5op9bfF1fsJLISsfWxAEpgYNEFzWHF5hGUrp5fHcls547VoUX8n7Ql7uub3wufvuRs5-GSyYwhj9H5bfiQ8k_JlwUQTL5U1EFKWbS3niTm-U_d6UgA9nQBMhczOeuS45mSe9kOQ/s1600/item-primary-bg.gif);

background-repeat: no-repeat;

background-position: center;

}



/*^'^ Secondary Items Container ^'^*/

#nav-container div, #nav-container ul{

padding:10px 4px 10px 4px;

margin:0px 0px 0px 0px;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjajDuFjAkiCR9ErrUpy8UgijXFGX9z5r3NlSjHhSuODr97afyrdrAb0GSvhOUv6J5LhSeu9ZnPsmP3K8HESrrB2W-3L1OgTlX-sKEe71GdDVPY4T1CYJwdH-e1FfPQYyYMOwnuN4puTpAJ/s1600/item-secondary-container-bg.jpg);

background-repeat: repeat-x;

background-color: #FF9900;

border-bottom: 1px solid #CA6500;

}



/*^'^ Secondary Items ^'^*/

#nav-container div a, #nav-container ul a{

padding:3px 10px 3px 6px;

background-color: #FFFFFF;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv1Qtziw5wGOpilk5HN4BBJGnFfmd96WqpWgMPmOqoQ2NpfRhCO-mrl_baHMQrf4a0VqpF-LQWd3wx2E51zGgVOPGkNfv0RpQJ7-MK-TBTsm7RW5m55aEDLLFXa0izfdgDzm4znpG48Yvj/s1600/item-secondary-bg.jpg);

background-repeat: no-repeat;

background-position: 0px 22px;

font-size:11px;

border-width:0px;

border-style:none;

margin: 0px 0px 0px 0px;

width: 149px;

}



/*^'^ Secondary Items Hover State ^'^*/

#nav-container div a:hover, #nav-container ul a:hover{

background-color: #FFFFFF;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv1Qtziw5wGOpilk5HN4BBJGnFfmd96WqpWgMPmOqoQ2NpfRhCO-mrl_baHMQrf4a0VqpF-LQWd3wx2E51zGgVOPGkNfv0RpQJ7-MK-TBTsm7RW5m55aEDLLFXa0izfdgDzm4znpG48Yvj/s1600/item-secondary-bg.jpg);

background-repeat: no-repeat;

color:#CC0000;

}



/*^'^ Secondary Item Titles ^'^*/

#nav-container .item-secondary-title{

cursor:default;

padding:4px 0px 3px 7px;

color: #6C3600;

font-family: Arial, Trebuchet MS, Arial, sans-serif, Helvetica;

font-size:11px;

/* background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaT9KCFRttwZrmpKGvF4xFDh-bODf6G2QhiBoUwBCL4fZZvpuHTRIG9ug67QlCUAp04jMvN_K0ep5kfbAqtN-H2Txg6pMpedhW51WYytfqJBilLj2RmoR_22SELh5oUj51B6Ij2pYA-i6d/s1600/item-secondary-title-bg.jpg); */

background-repeat: no-repeat;

font-weight:bold;

}



/*^'^ Horizontal Dividers ^'^*/

#nav-container .divider-horiz{

border-top-width:1px;

margin:5px 5px;

border-color: #C16100;

}



/*^'^ Vertical Dividers ^'^*/

#nav-container .divider-vert{

border-left-width:1px;

height:15px;

margin:4px 2px 0px 2px;

border-color:#AAAAAA;

}

5. Now Go to Design >>page Element

6.Click Add gadget and Select HTML/JavaScript 

7. Now paste paste below code

<div class="nav-container-outer">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9n14pFJmY2Lr2JTcUKrKEh6jBT8kQjncOiaXSeWFTik1ENgMtmm_I8Ql6tOm8DChIjZXyYFinu5DnUZqTnoqX81I7PLNhIsRxwWObtYUSCfx6FU3_1tXhivrWbQ6EHtuny1qduemj45l4/s1600/nav-bg-l.jpg" alt="" class="float-left" />

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCcOmuS-Uv113pHDsxzDJBAF8mccxL3e_IO4rbkWFF7VY6T5jEsah9ukAGeEwpRdp-cKPjC1h_j_4_cRuAfMS7a1DUhVxQqfuY3FChIE6kN_EZrhY4Vg9ejcvJHOgrwCnmA-kXnO2DcieH/s1600/nav-bg-r.jpg" alt="" class="float-right" />

<ul id="nav-container" class="nav-container">

<li><a class="item-primary" href="#">HOME</a>

</li>



<li><span class="divider divider-vert" ></span></li>

<li><a class="item-primary" href="#">Products</a>



<ul style="width:150px;">

<li><a href="#">SoftwarePlus</a></li>

<li><a href="#">MagicDriver</a></li>

<li><a href="#">GreatFX</a></li>

<li><a href="#">SampleSoft</a></li>

<li><a href="#">UnDoIt</a></li>

<li><a href="#">100% CSS Menu</a></li>

<li><a href="#;">With Cross-Browser</a></li>

<li><a href="#;">Dropdowns</a></li>

<li><a href="#;">Absolutely NO Javascript</a></li>

<li><a href="#;">Being Used On</a></li>

<li><a href="#;">These Menus</a></li>

<li><span class="divider divider-horiz" ></span></li>

<li><a href="#;">Example Of a Divider</a></li>

<li><a href="#;">With No Title</a></li>

</ul></li>



<li><span class="divider divider-vert" ></span></li>

<li><a class="item-primary" href="#">Quality</a>



<ul style="width:150px;">

<li><a href="#">SoftwarePlus</a></li>

<li><a href="#">MagicDriver</a></li>

<li><a href="#">GreatFX</a></li>

<li><a href="#">SampleSoft</a></li>

<li><a href="#">UnDoIt</a></li>

<li><a href="#">100% CSS Menu</a></li>

<li><a href="#;">With Cross-Browser</a></li>

<li><a href="#;">Dropdowns</a></li>

<li><a href="#;">Absolutely NO Javascript</a></li>

<li><a href="#;">Being Used On</a></li>

<li><a href="#;">These Menus</a></li>

<li><span class="divider divider-horiz" ></span></li>

<li><a href="#;">Example Of a Divider</a></li>

<li><a href="#;">With No Title</a></li>

</ul></li>



<li><span class="divider divider-vert" ></span></li>

<li><a class="item-primary" href="#">Services</a>



<ul style="width:150px;">

<li><span class="item-secondary-title" >Title For Links</span></li>

<li><a href="#">These Links Still Appear</a></li>

<li><a href="#">Just Like The Others</a></li>

<li><a href="#">Even When Under A Title</a></li>

<li><span class="divider divider-horiz" ></span></li>

<li><span class="item-secondary-title" >Title After Divider</span></li>

<li><a href="#">Once Again...</a></li>

<li><a href="#">These Links Still Appear</a></li>

<li><a href="#">Just Like The Others</a></li>

<li><a href="#">Even When Under A Title</a></li>

</ul></li>



<li><span class="divider divider-vert" ></span></li>

<li><a class="item-primary" href="#;">Very Long Item</a>



<ul style="width:150px;">

<li><span class="item-secondary-title" >Title For Links</span></li>

<li><a href="#">These Links Still Appear</a></li>

<li><a href="#">Just Like The Others</a></li>

<li><a href="#">Even When Under A Title</a></li>

<li><span class="divider divider-horiz" ></span></li>

<li><span class="item-secondary-title" >Title After Divider</span></li>

<li><a href="#">Once Again...</a></li>

<li><a href="#">These Links Still Appear</a></li>

<li><a href="#">Just Like The Others</a></li>

<li><a href="#">Even When Under A Title</a></li>

</ul></li>



<li><span class="divider divider-vert" ></span></li>

<li><a class="item-primary" href="#;">Fully Flexible</a>



<ul style="width:150px;">

<li><span class="item-secondary-title" >Title For Links</span></li>

<li><a href="#">These Links Still Appear</a></li>

<li><a href="#">Just Like The Others</a></li>

<li><a href="#">Even When Under A Title</a></li>

<li><span class="divider divider-horiz" ></span></li>

<li><span class="item-secondary-title" >Title After Divider</span></li>

<li><a href="#">Once Again...</a></li>

<li><a href="#">These Links Still Appear</a></li>

<li><a href="#">Just Like The Others</a></li>

<li><a href="#">Even When Under A Title</a></li>

</ul></li>

<li class="clear">&nbsp;</li></ul>

</div>

Replace # your URL
Replace Home with any names like.
There have many link and name you can change.


8. Now save  HTML/JavaScript  


You are done.




Dont Miss Another Post Connect With Us

Get informed when we publish the new post.So, you have to subscribe below

4 comments:

  1. hiwaarMay 18, 2011 at 10:45 PM

    thank you for the good content

    ReplyDelete
  2. hasanMay 19, 2011 at 1:47 PM

    thanks for this cause i was looking for this types of menu!
    BD Dir

    ReplyDelete
  3. howskincareSeptember 19, 2011 at 4:16 PM

    while doing this i made some mistakes and many writings appeared above my blog. The writngs are still there. plz help me out to remove them.http://www.beautyinlyf.blogspot.com.

    ReplyDelete
  4. BloggertrixSeptember 19, 2011 at 7:47 PM

    Check 4th step tag and, remove what and paste on there.if its confuse, contact me from "contact us"

    ReplyDelete