معهد خبراء بلوجر

معهد خبراء بلوجر (https://www.bloggerexp.com/index.php)
-   إضافات وأدوات بلوجر (https://www.bloggerexp.com/forumdisplay.php?f=10)
-   -   حصريا اضافة القائمة المنسدلة بتقنية css بجميع اشكل المدونات فى معهد خبراء بلوجر (https://www.bloggerexp.com/showthread.php?t=3570)

السيد ابو جبل 09-06-2012 12:54 PM

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

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

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

اضافة القائمه بكثر من شكل شاهد الصورة للمعاينه او الدخول على ربط الاسفل لمعاينه الاضافة فى مدونة تجربيه
http://bilokr1.blogspot.com


وهذا صورة الاضافة بجميع اشكل الى بعض المدونات


http://www.bloggerexp.com/attachment...1&d=1346934823




بعد مشاهد الاضافة





تابع التركيب وهو سهل جداا ان شاء الله



طريقة التركيب :

بلنسبة للواجهة الجديدة : - بالنسبة للواجهة القديمة :

لاتنسى اخد نسخة احتياطية للقالب لاتنسى اخد نسخة احتياطية للقالب

1.لوحة التحكم 1 -.لوحة التحكم
2.القالب 2 - .تخطيط أوتصميم
3. ثم تحريرhtml;. ثم 3 - تحريرhtml.
4.متابعة 4-.توسيع القالب
5.توسيع القالب
ثم ابحث عن الكود التالي :بالضغط على alt+f







كود بلغة HTML:

]]></b:skin>



اضف قبله الكود التالى


كود بلغة HTML:

/*lavalamp fancy menu 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 fancy menu End*/



ثم ابحث عن الكود التالى




كود بلغة HTML:

</head>

ثم اضف الكود التالى فوقه مباشر



كود بلغة HTML:


<script src='http://bilokr.googlecode.com/files/ajaxlibsjquery.css' type='text/javascript'/>
<script src='http://bilokr.googlecode.com/files/lavalamp2.js' type='text/javascript'/>



ثم احفظ



الخطوة الاخير تركيب جافة سكربت





طريقة التركيب

.1 اذهب للوحة التحكم
2. تخطيط
3.عناصر الصفحة
4. اضف اداة
6.اختار Html/Javascript

هذا هو الكود



كود بلغة HTML:

<div class="lavalamp orange">
 <ul>
  <li class="active"><a href="/">تعديل</a></li>
  <li><a href="ربط">تعديل</a></li>
  <li><a href="ربط">تعديل</a></li>
  <li><a href="ربط">تعديل</a></li>
  <li><a href="ربط">تعديل</a></li>
  <li><a href="ربط القسم">تعديل</a></li>
  <li><a href="ربط">تعديل</a></li>
  <li><a href="ربط">تعديل</a></li>
 </ul>
 <div class="floatr"></div>
</div>






ثم حفظ مع سحب الاداه فى المكان المناسب فى مدونتك لتغيير شكل الاضافة بالون الاحمر تابع اشكل لاضافة


الشكل رقم {1}



http://www.bloggerexp.com/attachment...1&d=1346935053


كود الشكل استبدله بلكود الاحمر



كود بلغة HTML:

<div class="lavalamp orange">

http://www.bloggerexp.com/attachment...1&d=1346935559



كود بلغة HTML:

<div class="lavalamp yellow">

http://www.bloggerexp.com/attachment...1&d=1346935567



كود بلغة HTML:

<div class="lavalamp magenta">

http://www.bloggerexp.com/attachment...1&d=1346935579



<div class="lavalamp">


http://www.bloggerexp.com/attachment...1&d=1346935881



كود بلغة HTML:

<div class="lavalamp cyan">

http://www.bloggerexp.com/attachment...1&d=1346935934



كود بلغة HTML:

<div class="lavalamp dark">



بعد اختيار الشكل المناسب الى مدونتك عدل ما فى الكود الجافه بلاينسبك



يا رب يكون الموضوع قض اعجبكم


والسلام عليكم ورحمه الله وبركاته








السيد ابو جبل 09-06-2012 05:01 PM

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

admin 09-06-2012 07:36 PM

رد: حصريا اضافة القائمة المنسدلة بتقنية css بجميع اشكل المدونات فى معهد خبراء بلوجر
 
هناك مشكل في اتجاه الخلفية (غير معربة) جرب تعدل كود الجافا

السيد ابو جبل 09-06-2012 09:27 PM

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

المشاركة الأصلية كتبت بواسطة عثمان بن الطالب (المشاركة 10178)
هناك مشكل في اتجاه الخلفية (غير معربة) جرب تعدل كود الجافا

هذا الاضافة شغاله ما فيها اى مشكله يا اخ عثمان

السيد ابو جبل 09-06-2012 10:45 PM

رد: حصريا اضافة القائمة المنسدلة بتقنية css بجميع اشكل المدونات فى معهد خبراء بلوجر
 
ازى كانت المشكله فى اتجاه ابحث عن الكود التالى

كود بلغة HTML:

.lavalamp ul li {
list-style: none;
float:left;


واستبدال بالكود التالى
كود بلغة HTML:

.lavalamp ul li {
list-style: none;
float:right;


ثم حفظ






الساعة الآن 02:01 PM

Powered by vBulletin® Copyright ©2000 - 2024 Dov By EGYNT.Co
new notification by 9adq_ala7sas
Developed By Marco Mamdouh
معهد خبراء بلوجر - 2012