أهلا وسهلا بك عزيزي الزائر في المدونة التعليمية للحاسوب فما رأيك بالقالب الجديد؟؟

إضافة قائمة عليا بتقنيتي Css و jQuery

السلام عليكم ورحمة الله تعالى وبركاته
اليوم وكما العادة ساقدم لكم  إخوتي الكرام أجمل إضافة لمدوناتكم
وأتأسف عن التأخر في التدوين وهذا راجع لانشغالي بالدراسة والتصميم
المهم
 
 

عنوان الإضافة

 
إضافة قائمة عليا بتقنيتي Css و jQuery 

معلومات عن الإضافة

 
قائمة منسدلة
يمكن وضعها بأعلى المدونة
بالوان متعددة
بتقنيتي Css و jQuery
 

صورة الإضافة

 
 
 
 

شرح الإضافة


كالعادة نعمل الآتي :
إذهب إلى لوحة التحكم ثم قالب ثم تعديل على HTML ولاتنسى الضغط على توسيع القوالب
إبحث عن الكود التالي
 </head>
 وضع قبله مباشرة هذا الكود
<script src="http://code.helperblogger.com/lavalamp-menu.js" type="text/javascript"></script>
ثم إبحث عن الكود التالي
 ]]></b:skin>
 وضع قبله مباشرة هذا الكود
     /*LAVALAMP MENU BY http://www.helperblogger.com/ 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;

    font-family: calibri;

    }

مرحلة الألوان الإختيارية


بالنسبة لهذه المرحلة ستختار عزيزي الزائر أحد الألوان المناسبة لمدونتك وذللك عبر إضافته بعد الكود السابق 
 
--------------------------------
اللون الوردي أو البنفسجي
--------------------------------
.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);

}

.lavalamp a {

text-decoration: none;

color: #262626;

line-height: 20px;

}

.lavalamp ul {

margin: 0;

padding: 0;

z-index: 300;

position: absolute;

}

.lavalamp ul li {

list-style: none;

float:left;

text-align: center;

}

.lavalamp 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;

}

المرحلة الثالثة و الأخيرة


ثم قم بحفظ القالب بعد ذللك قم بالذهاب إلى لوحة التحكم من جديد لكن هذه المرة ستضغط على تخطيط وإضافة اداة ثم اداة HTML/JavaScript
 وضع الكود التالي داخل الأداة
<div>

<ul>

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

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

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

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

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

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

<li><a href="#">Back to Article</a></li>

<li><a href="#">How it Works?</a></li>

</ul>

<div></div>

</div>

آخر مقالات المدونة

هناك تعليقان (2):

  1. إضافة ممتازة تزين مدونات بلوجر
    بالتوفيق clavier arabe

    ردحذف
  2. شكرا لك على الرد أخي الكريم

    ردحذف

إذا أردت عزيزي الزائر إدراج فيديو من يوتوب بتعليق قم بالتالي
[youtube]رابط فيديو يوتوب هنا[/youtube]
كما يمكنك إدراج صورة عبر الكود التالي
[img]رابط صورتك هنا[/img]

جميع الحقوق محفوظة لمدونة المدونة التعليمية للكومبيوتر 2013

تصميم : بويردن