اضافة قائمة جانبية جميلة بتقنية CSS

السلام عليكم

اليوم راح اقدم لكم اضافة قائمة جانبية جميلة بتقنية CSS

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

هى فعلا اضافة جميلة يمكنك معاينة الاضافة

اضغط هنا للمعاينة

طريقة تركيب الإضافة

خد نسخة احتياطية من قالب المدونة من تجنب اى خطاء ممكن ان تداركة

1- اذهب الى لوحة التحكم / ثم تصميم / ثم تحرير html

2-قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F)

]]></b:skin>

والصق الكود التالى قبلة تمام

 

#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): */

 وبعدين انتقل الى لوحة تحكم مدونتك/ اختر تصميم / ثم اضافة اداة اثم اختر html/Javascript

<div style='position: fixed; top: 40%; left: 0%;'/>

<ul id="navigationMenu">
<li>
<a class="Home" href="http://dev-wld.blogspot.com/">
<span>الرئيسية</span>
</a>
</li> <li>
<a class="about" href="http://dev-wld.blogspot.com/">
<span>عن المدونة</span>
</a>
</li>
<li>
<a class="services" href="http://dev-wld.blogspot.com/">
<span>خدمات</span>
</a>
</li>
<li>
<a class="portfolio" href="http://dev-wld.blogspot.com/">
<span>فهرس المدونة</span>
</a>

 وقم الان بتغير ما هو باللون الاحمر بروابط مدونتك وقم بتعيير ماهو باللون الازراق

والان احفظ الاداة واسحبها لاسفل التصميم وقم بالمعاينة

وشكرا