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

 

معرض قوالب معهد خبراء بلوجر - دليل مدونات بلوجر - موقع نشر بلوجر - اضافات بلوجر




العودة   معهد خبراء بلوجر > الدعم الفني > إضافات وأدوات بلوجر
تحديث الصفحة اضافة قائمة جانبية css - اضافات بلوجر
التسجيل التعليمـــات التقويم البحث مشاركات اليوم اجعل كافة الأقسام مقروءة


إضافة رد
نسخ الرابط
نسخ للمنتديات
 
أدوات الموضوع انواع عرض الموضوع
قديم 03-13-2014, 11:01 PM   #1
Blog-Add
مدون نشيط
 
تاريخ التسجيل: Feb 2014
المشاركات: 124
افتراضي اضافة قائمة جانبية css - اضافات بلوجر
أنا : Blog-Add
سجل معنا لتتمتع بهذه الخاصية




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

معنا اليوم قائمة جانبية انيقة وجميلة بتقنية css تتحرك مع الصفحة

التركيب :

افتح صفحة القالب ثم تحرير HTML وابحث عن : ]]></b:skin>

واضف اعلاها الكود التالي :

كود PHP:
#navigationMenu span{
    /* Container properties */
    width:0;
    left:38px;
    padding:0;
    position:absolute;
    overflow:hidden;

    /* Text properties */
    font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
    font-size:18px;
    font-weight:bold;
    letter-spacing:0.6px;
    white-space:nowrap;
    line-height:39px;

    /* CSS3 Transition: */
    -webkit-transition: 0.25s;

    /* Future proofing (these do not work yet): */
    -moz-transition: 0.25s;
    transition: 0.25s;
}

#navigationMenu a{
    /* The background sprite: */
    background:url('http://1.bp.blogspot.com/-jwOb6rML3W0/TrWP2WBsvaI/AAAAAAAAFFg/NK2hIQSRO-E/s1600/navigation.jpg') no-repeat;

    height:39px;
    width:38px;
    display:block;
    position:relative;
}

/* General hover styles */

#navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; }
#navigationMenu a:hover{
    text-decoration:none;

    /* CSS outer glow with the box-shadow property */
    -moz-box-shadow:0 0 5px #9ddff5;
    -webkit-box-shadow:0 0 5px #9ddff5;
    box-shadow:0 0 5px #9ddff5;
}
/* Green Button */

#navigationMenu .home {    background-position:0 0;}
#navigationMenu .home:hover {    background-position:0 -39px;}
#navigationMenu .home span{
    background-color:#7da315;
    color:#3d4f0c;
    text-shadow:1px 1px 0 #99bf31;
}

/* Blue Button */

#navigationMenu .about { background-position:-38px 0;}
#navigationMenu .about:hover { background-position:-38px -39px;}
#navigationMenu .about span{
    background-color:#1e8bb4;
    color:#223a44;
    text-shadow:1px 1px 0 #44a8d0;
}

/* Orange Button */

#navigationMenu .services { background-position:-76px 0;}
#navigationMenu .services:hover { background-position:-76px -39px;}
#navigationMenu .services span{
    background-color:#c86c1f;
    color:#5a3517;
    text-shadow:1px 1px 0 #d28344;
}

/* Yellow Button */

#navigationMenu .portfolio { background-position:-114px 0;}
#navigationMenu .portfolio:hover{ background-position:-114px -39px;}
#navigationMenu .portfolio span{
    background-color:#d0a525;
    color:#604e18;
    text-shadow:1px 1px 0 #d8b54b;
}

/* Purple Button */

#navigationMenu .contact { background-position:-152px 0;}
#navigationMenu .contact:hover { background-position:-152px -39px;}
#navigationMenu .contact span{
    background-color:#af1e83;
    color:#460f35;
    text-shadow:1px 1px 0 #d244a6;
} 
ثم اذهب الي صفحة التخطيط واضافة اداة جديدة HTML واضف بها الكود التالي :

كود PHP:
<div style='position: fixed; top: 40%; left: 0%;'/> 
<ul id="navigationMenu"> 
<li> 
<a class="Home" href=""> 
<span>الرئيسية</span> 
</a> 
</li> <li> 
<a class="about" href=""> 
<span>عن المدون</span> 
</a> 
</li> 
<li> 
<a class="services" href=""> 
<span>خدمات</span> 
</a> 
</li> 
<li> 
<a class="portfolio" href=""> 
<span>فهرس المدونة</span> 
</a> 
</li> 
<li> 
<a class="contact" href=""> 
<span>إتصل بنا</span> 
</a> 
</li> 
</ul> 
</div> 
ضع الروابط المراد وضعها بالقائمة والاسماء واحفظ العمل

الدعم العربي

Blog-Add غير متواجد حالياً   رد مع اقتباس

مركز رفع موسوعة العربية
إضافة رد

مواقع النشر (المفضلة)

الكلمات الدلالية (Tags)
مشاركات شائعة, مواضيع ذات صلة, مواقع الاجتماعية, مواقع التواصل, قائمة جانبية

« الموضوع السابق | الموضوع التالي »

الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1)
 
أدوات الموضوع
انواع عرض الموضوع
العرض العادي العرض العادي

تعليمات المشاركة
لا تستطيع إضافة مواضيع جديدة
لا تستطيع الرد على المواضيع
لا تستطيع إرفاق ملفات
لا تستطيع تعديل مشاركاتك
BB code is متاحة
كود [IMG] متاحة
كود HTML معطلة
الانتقال السريع

المواضيع المتشابهه
الموضوع كاتب الموضوع المنتدى مشاركات آخر مشاركة
اضافة قائمة باهم روابط مدونتك - اضافات بلوجر Blog-Add إضافات وأدوات بلوجر 0 02-24-2014 02:26 PM
اضافة قائمة رباعية احترافية - اضافات بلوجر Blog-Add إضافات وأدوات بلوجر 0 02-20-2014 02:22 PM
عمل قائمة جانبية للمواضيغ المختارة خاص ببلوجر روعة alam3arbcom إضافات وأدوات بلوجر 0 10-21-2013 07:54 PM
طلب اضافة قائمة جانبية في القالب تائه في الزمن طلبات تعديل القوالب 3 06-01-2013 11:53 PM
حصري على خبراء بلوجر إضافة قائمة روابط جانبية منسدلة خالد الاحمري إضافات وأدوات بلوجر 5 02-13-2013 01:00 PM



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


لتصفح أفضل وللاستفادة القصوى من خصائص المعهد ننصحكم باستعمال :

Powered by vBulletin® Copyright ©2000 - 2025 Dov By EGYNT.Co
new notification by 9adq_ala7sas
Developed By Marco Mamdouh
معهد خبراء بلوجر - 2012 Google
أعلن على المعهد : اتصل بنا - منتدي كنوز - الدعم العربي - قوالب بلوجر - او او انيمي
رئيسية المعهد
الساعة الآن 09:46 AM - بتوقيت جرينتش
المعهد غير مسؤول عن أي اتفاق تجاري أو تعاوني بين الأعضاء
فعلى كل شخص تحمل مسؤولية نفسه تجاه ما يقوم به من بيع وشراء وإتفاق وإعطاء معلومات مدونته
التعليقات المنشورة لا تعبر عن رأي معهد خبراء البلوجر ولا نتحمل أي مسؤولية قانونية حيال ذلك (ويتحمل كاتبها مسؤولية النشر)