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

السلام عليكم ورحمة الله وبركاته ,,, من جديد موعدنا اليوم مع تقنية الجي كويري التي عودتنا على الخفه والاناقه
والتي اصبحت لا تستغنى عنها اي مدونه اليوم فهي صارن ندا قويا للجافا سكربت
اليوم لدينا 6 قوائم افقيه والتي يتم وضعها تحت الهيدر في مدونة بلوجر ويمكنك وضع فيها روابط
لاقسام مدونتك وتسمياتها بكل سهوله مع اضافه اسم لكل رابط يوضح ما سيذهب اليه الرابط عند الضغط على الكلمه
انظر بنفسك للمثال الحى هذا وستجد تقنية الجي كويري تتجلى في ابهى صورها
مع تقنية ال css3 وللعلم تلك القوائم متوافقه تماما مع تلك المتصفحات وكذلك انترنت اكسبلور الحديثFirefox Or Chrome.

View Demo Button

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

تابع مافي الصوره وكذلك المكتوبل بالاسفل
الخطوه الاولى. اذهب الي لوحة تحكم مدونتك ثم الي تصميم Design > ثم الي تحرير Html

Design Edit Html Blogger

الخطوه الثانيه.ابحث عن هذا الكود الصغير
]]></b:skin>

الخطوه الثالثه. انسخ الكود الذي بالاسفل وضعه قبل هذا الكود الصغير ]]></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>

الخطوه الخامسه. انسخ الكود الموجود بالاسفل وضعه قبل تلك العباره مباشرة </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'/>

الخطوه السادسه. قم بحفظ قالب مدونتك.

ما فعلناه بالاعلى اننا وضعنا كود ال css  وكود الجي كويري في قالب مدونتك

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

تاكد انك قمت بانشاء الاداه اسفل الهيدر او فوق رسائل المدونه الالكترونيه فهذان هما انسب مكانين للقائمه الافقيه

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




<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>
قم بتغيير المتغيرات التي بالكود الي التي ترغب فيها وقم بحفظ الاداه
 الان ناتي الي كيفيه التبديل بين الوان القوائم فانا قد قلت في اول الموضوع وعنوانه
انها 6 قوائم بالوان مختلفه
اعلم عزيزي ان اللون الافتراضي الذي تم وضعه في الشرح هو اللون الاصفر الذي تراه بالاعلى.
وهو ذلك الذي بالاسفل مباشره  :

<div class="lavalamp" >

ولتغيير اللون الاصفر لاي لون اخر من الالوان السته المتبقيه ماعليك الا تغيير  الكود الذي بالاعلى
الي اى واحد اخر تختاره من الاكواد التي بالاسفل واظن انها سهله التطبيق ولا تحتاج لتبسيط اكثر.

<div class="lavalamp magenta" >
<div class="lavalamp cyan" >
<div class="lavalamp yellow" >
<div class="lavalamp orange" >
<div class="lavalamp dark" >
.الان قد تم الانتهاء من هذا الدرس وتلك الاضافه الرائعه والمفيده لكل مدونه
مع موعد قادم باذن الله تعالي واضافه جديده من اضافات مدونة بلوجر.
أصدقاء(تطوير ويب)
تعليقات Facebook
6تعليقات Blogger

6 عدد التعليقات على موضوع 6 قوائم افقيه لاقسام مدونة بلوجر في غاية الاناقة بتنقنية الجي كويري

محمد ثروت يقول...

جميل والله مدونة شيقة وموضوعاتها ممتعة بارك الله فيك
مزيد من التوفيق إن شاء الله
تفضلوا بزيارة مدونتى الأخبارية
http://ouoonelsaeed.blogspot.com

أحمد ( مدونة تقارب ) يقول...

@ اخي محمد ثروت شكرا على اطرائك ومديحك دمت بكل ود
واتمنى ان تفيدك موضوعات مدونتى المتواضعه وقد قمت بزيارة مدونتك واعجبتنى كثيرا!!

ArabMoviez.org يقول...

ازاى اعدل في الحجم بتاعها اصغرها شوية ازاى ؟

ArabMoviez يقول...

بص ياغالي الطول

http://www.arabmoviez.org/

مش حلو خالص عايز اعرف ازاى اعدل الطول

إرسال تعليق

التعليقات متاحه لمستخدمي حساب جوجل فقط.ولاضافة كود: أستعن بهذه الأداة السريعة Encode/HTML .