0 Թափվող Մենյու Blogger-Ի Համար

+ + + + +

Հարգելի այցելուններ  ձեզ եմ ներկայացնում  հերթական հավելումը  այսինքն թափվող մենյու բլօգի համար որը իմ կարծիքով գեղեցիկ տեսք կտա ցանկացած բլօգի:


Քայլ 1- այս քայլում տեղադրում ենք CSS կոդը, այն տեղադրելու համար փնտրում ենք]]></b:skin> կոդը և նրա վերևում տեղադրում ենք ներքևում գրված կոդը:


/*  menu*/

#catmenucontainer{
height:40px;
display:block;
padding:0px 0 0px 0px;
font: 11px Arial,Tahoma,Century gothic,verdana,  sans-serif;
font-weight:normal;
text-transform:uppercase;
}

#catmenu{
margin: 0px auto;
padding: 0px 0px;
height:40px;
overflow:hidden;
width:1000px;
}
#catmenu ul
{
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}
#catmenu li
{
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}
#catmenu li a, #catmenu li a:link, #catmenu li a:visited
{
color: #a5da7e;
display: block;
font-weight: normal;
padding: 0px 10px ;
line-height:40px;
text-shadow:1px 1px 1px #203F04;




}
#catmenu li a:hover, #catmenu li a:active
{


color: #fff;
display: block;
line-height:40px;


}
#catmenu li li a, #catmenu li li a:link, #catmenu li li a:visited
{
background:#274C07;
border-bottom: 1px solid #23272A;
color: #a5da7e;
float: none;
margin: 0px;
line-height:34px;
width: 150px;
}
#catmenu li li a:hover, #catmenu li li a:active
{
background: #182F03;
color: #fff;
float: none;
line-height:34px;
margin: 0px;
width: 150px;


}
#catmenu li ul
{
height: auto;
left: -999em;
margin: 0px;
padding: 0px;
position: absolute;
width: 170px;
border-left: 1px solid #23272A;
border-right: 1px solid #23272A;
z-index: 9999;
}
#catmenu li li
{
}
#catmenu li ul a
{
width: 140px;
}
#catmenu li ul a:hover, #catmenu li ul a:active
{
}
#catmenu li ul ul
{
margin: -35px 0 0 170px;
}
#catmenu li:hover ul ul, #catmenu li:hover ul ul ul, 
#catmenu li.sfhover1 ul ul, #catmenu li.sfhover1 ul ul ul
{
left: -999em;
}
#catmenu li:hover ul, #catmenu li li:hover ul, 
#catmenu li li li:hover ul, #catmenu li.sfhover ul, 
#catmenu li li.sfhover1 ul, #catmenu li li li.sfhover1 ul
{
left: auto;
}
#catmenu li:hover, #catmenu li.sfhover1
{
position: static;
}



/*DAVITSARDARYAN.BLOGSPOT.COM*/

Հիմա պետք է տեղադրենք Html/JavaScript կոդը այնտեղ վորտեղ որ ցանկանումենք տեսնել:
1. Հերթականությամբ բացեք Design -&gt; Page elements,
2. Սեղմեք Add a Gadget և ընտրեք Html/JavaScript,
3. Բացված պատուհանում գրեք կոդը և սեղմեք  Save.


<div id='masthead'>


<div id='catmenucontainer'>
<div id='catmenu'>
<ul>
<li><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></li>
<li><a href='#' title='Sample Page'>Sample Page</a>


<ul>
<li><a href='#' title='Child Page'>Child Page1</a></li>
<li><a href='#' title='Child Page2'>Child Page2</a>
<ul>
<li><a href='#' title='Subpage'>Subpage</a></li>
</ul>
</li>
<li><a href='#' title='Sample Page'>Sample Page</a></li>


</ul>
</li>
<li><a href='#' title='About'>About</a></li>
<li><a href='#'>Archives</a></li>
<li><a href='#'>Contact</a>
<ul>
<li><a href='#' title='Profile'>Profile</a></li>
</ul>
</li>
</ul>
</div></div></div>