كيف أضيف هذه القائمة الى مدونة بلوجر ؟
الطريقة سهلة جدا لاضافة القائمة نمر بالمراحل الثلاث التالية :
- اضافة السكريبت
- اضافة تاثيرات css
- اضافة القائمة
1. اضافة السكريبت
- من لوحة تحكم بلوجر اذهب لـ تصميم >> تحرير HTML
- ابحث عن :
</head>
3. بعد ايجاد الكود اعلاه ضع فوقه مباشرة الكود التالي : (ملحوظه ان كنت قد ركبت مسبقا كود الجيكويري في مدونتك فانت لست بحاجه لوضع الكود ذو اللون الاحمر)
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> <script src="http://code.helperblogger.com/lavalamp-menu.js" type="text/javascript"></script>
2. اضافة تاثيرات css
1. والان ابحث عن :]]></b:skin>
2.ثم نلصق الكود اسفله فوقه مباشرة :
/*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; } /*LAVALAMP MENU BY http://www.helperblogger.com/ END*/
3. اضافة القائمة
1. من تصميم >> عناصر الصفحة
2. اضافة اداة (اسفل الهيدر)
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>
والان لم يتبقى سوى تخصيص القائمة :
1.استبدل # بروابط صفحاتك
2.استبدل Home ,About, Services ...بصفحاتك الخاصة حسب رغبتك
3.اما لتغيير لون القائمة استبدل <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"> |  |
والان نحفظ الاداة و مبروك عليك الاضافة !
ليست هناك تعليقات:
إرسال تعليق