إضافة قائمة LavaLamp / CSS3 & jQuery جميلة و بالوان متعددة إلى مدونة blogger

أغسطس 08, 2012

0

هذه المرة أشارككم 'LavaLamp' قائمة CSS3 وjQuery المدهشة وكما هو مذكور في العنوان أنها تعمل مع CSS3 وjQuery . يمكنك استخدام هذه القائمة في 6 ألوان فقط عن طريق تغيير كلمة واحدة في كود HTML. تم تصميم هذه القائمة من قبل Insidesigns و إنها تعمل تماما مع أي مدونة بلوجر . الآن دعونا نذهب إلى أشرح ، ونرى كيف تضيف هذه القائمة إلى مدونتك بلوجر.

كيفية إضافة هذه القائمة إلى Blogger؟

لفهم أسهل وأنا أقسم الدرس إلى ثلاثة أجزاء والتي هي على النحو التالي،

       1- إضافة سكربت
       2- إضافة أنماط
       3- إضافة القائمة

1- إضافة سكربت

1- انتقل إلى لوحة الرئيسية blogger > قالب

         2- انقر على تحرير HTML
   3- إضغط على المتابعة
   4- ابحث عن الكود أدناه في القالب

</head>

إضافة الكود أدناه مباشرة فوقه، (إذا كنت قد قمت بالفعل بإضافة مكتبة jQuery لمدونتك قم بحذف الكود الأحمر )

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="https://sites.google.com/site/blogstupcomp/avalamp-menu.js" type="text/javascript"></script>

2- إضافة أنماط

الآن البحث على الكود أدناه،

]]></b:skin>

إضافة كود CSS أدناه مباشرة قبل ذلك،

/*LAVALAMP MENU BY http://www.stupcomp.blogspot.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;
}

/*LAVALAMP MENU BY http://www.Stupcomp.blogspot.com/ END*/

الآن حفظ القالب.

3. إضافة القائمة

أنتقل الآن إلى تخطيط الصفحة

1- أنتقل الآن إلى تخطيط الصفحة

2- انقر على إضافة أداة ( تحت رأس الصفحة /Header)

3- اختر HTML / JavaScript
4- نسخ ولصق كود أدناه في داخله،

<div class="lavalamp dark">

 <ul>

  <li class="active"><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 class="floatr"></div>

</div>

استبدل # إلى الروابط
استبدل Home، و About،و Blog. وما إلى ذلك مع نص الارتباط الخاصة بك والتي تريد أن يظهر في القائمة.

إذا كنت ترغب في تغيير لون الخلفية في القائمة استبدال <div class="lavalamp dark"> مع أحد الأكواد أدناه.

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

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

لقد حاولت جهدي للحفاظ على هذا الدرس سهلة بقدر الإمكان، إذا كنت لا تزال تحصل على أي مشكلة واحدة ثم لا تتردد في مشاركتها أدناه عن طريق التعليقات، وسأحاول إعطاء الرد في أقرب وقت إذا سمح الوقت.

إضافة قائمة LavaLamp / CSS3 & jQuery جميلة و بالوان متعددة إلى مدونة blogger

إرسال تعليق

Formulir Kontak