خمسة قوائم افقية css

بسم الله الرحمن الرحيم  لاول مرة خمسة  قوائم افقية لمدونات بلوجر في غاية الاحتراف والبساطة والجمال ,لقد اعجبتني كلها ,تستخدم في القوائم العليا للمدونة تمت برمجتها بلغة css البسيطة ساعرضها عليك لتتصفحها في هده المدونة واعرف انها ستنال اعجابك في العديد من الاحيان عندما اقوم بتصفح المدونات والمواقع والمنتديات ابحث عمن يمكنه نشر موضوع كامل مثل هدا على سبيل المثال لكن لأسف كل المواضيع المتداولة في المنتديات والمدونات اغلبها بل 50 في المائة منقولة ومكررة القوائم التي سنتعرف عليها ملونة بالوان جدابة وخفيفة على العين وتليق بكل المدونات مهما كانت الون قالبها

وهي على الشكل التالي

حسنا كما يبدو لنا في الصورة اعلاه فإن القوائم جدابة واحترافية يلزمنا الان معاينة مثال حي 
http://testblog907.blogspot.com




لندهب الان لشرح كيفية اضافة هد القوائم لمدونتك
كما الحال دائما نبحث عن رمز

]]></b:skin>

 باستعمال خاصية اختصار لوحة المفاتيح
CTRL+F
فوقه مباشرة ضع الرمز التالي

/*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.arabicash2.blogspot.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" >

<u>

<li class="active"><a href="/">Home</a></li>

<li><a href="Link-Here">About</a></li>

<li><a href="Link-Here">Blog</a></li>

<li><a href="Link-Here">Services</a></li>

<li><a href="Link-Here">Portfolio</a></li>

<li><a href="Link-Here">Contacts</a></li>

<li><a href="Link-Here">Back to Article</a></li>

<li><a href="Link-Here">How it Works?</a></li>

</ul>

<div class="floatr"></div>

</div>

وقم بوضع روابط الخاصة في المكان المناسب وهدا توضيح بسيط

<li><a href="www.arabicash2.blogspot.com">الرائسية</a></li>

كيف نقوم باختيار القائمة المناسبة لنا اي القائمة المناسبة لمدونتنا من حيث لون القائمة
الرمز التالي هو الدي يرمز الى لون القائمة 

<div class="lavalamp" >

لاضافة اي قائمة من القوائم نقوم بتغيير الرمز الدي في الاعلى الى احد الرموز التالية

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