طريقة تركيب القائمه الافقيه لمدونة بلوجر

]]></b:skin>

/*LAVALAMP START*/


.lavalamp {
position: relative;
border: 1px solid #d6d6d6;
background: #fff;
padding: 15px;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
border-radius : 10px;
-moz-border-radius : 10px;
-webkit-border-radius : 10px;
background : -webkit-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204)));
background : -moz-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204)));
height: 18px;
}


.magenta {
background : rgb(190,64,120);
background : -webkit-gradient(linear, left top, left bottom, from(rgb(190,64,120)), to(rgb(177,24,91)));
background : -moz-gradient(linear, left top, left bottom, from(rgb(190,64,120)), to(rgb(177,24,91)));
border: 1px solid #841144;


}


.cyan {
background : rgb(64,181,197);
background : -webkit-gradient(linear, left top, left bottom, from(rgb(64,181,197)), to(rgb(7,165,187)));
background : -moz-gradient(linear, left top, left bottom, from(rgb(64,181,197)), to(rgb(7,165,187)));
border: 1px solid #2f8893;


}


.yellow {
background : rgb(255,199,79);
background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,199,79)), to(rgb(255,188,43)));
background : -moz-gradient(linear, left top, left bottom, from(rgb(255,199,79)), to(rgb(255,188,43)));
border: 1px solid #c08c1f;


}


.orange {
background : rgb(255,133,64);
background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,133,64)), to(rgb(255,107,24)));
background : -moz-gradient(linear, left top, left bottom, from(rgb(255,133,64)), to(rgb(255,107,24)));
border: 1px solid #c04f11;


}


.dark {
background : rgb(89,89,89);
background : -webkit-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54)));
background : -moz-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54)));
border: 1px solid #272727;


}


.magenta li a , .cyan li a, .yellow li a , .orange li a, .dark li a{
color: #fff;
text-shadow: 0 -1px 0 rgba(0,0,0,.40);


}




a {
text-decoration: none;
color: #262626;
line-height: 20px;
}


ul {
margin: 0;
padding: 0;
z-index: 300;
position: absolute;
}


ul li {
list-style: none;
float:left;


text-align: center;
}


ul li a {
padding: 0 20px;
text-align: center;
}


.floatr {
position: absolute;
top: 10px;
z-index: 50;
width: 70px;
height: 30px;
border-radius : 8px;
-moz-border-radius : 8px;
-webkit-border-radius : 8px;
background : rgba(0,0,0,.20);
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
}
/*End Lavalamp Css Info @ http://www.spiceupyourblog.com */

</head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>

<script src='http://spiceupyourblogextras.googlecode.com/files/lavalamp.js' type='text/javascript'/>

نضع في الاداه الكود الذي بالاسفل

<div class="lavalamp" >

<ul>
<li class="active"><a href="/">الصفحه الرئيسيه</a></li>
<li><a href="ضع الرابط هنا">اتصل بنا</a></li>
<li><a href="ضع الرابط هنا">قسم1</a></li>
<li><a href="ضع الرابط هنا">قسم2</a></li>
<li><a href="ضع الرابط هنا">قسم3</a></li>
<li><a href="ضع الرابط هنا">قسم4</a></li>
<li><a href="ضع الرابط هنا">قسم5</a></li>
<li><a href="ضع الرابط هنا">قسم6</a></li>
</ul>
<div class="floatr"></div>
</div>

<div class="lavalamp" >

<div class="lavalamp magenta" >
<div class="lavalamp cyan" >
<div class="lavalamp yellow" >
<div class="lavalamp orange" >
<div class="lavalamp dark" >