قائمة جانبية أنيقة و جميلة بتقنية CSS

بسم الله الرحمن الرحيم

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

 

تعتمد هذه افضافة على تقنية CSS3 و هي فعلا جميلة يمكنك معاينة الإضافة بالظغط على الأيقونة بالأسفل.

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

1- توجه للوحة التحكم / تصميم / تحرير Html / و لا تنسى أخد نسخة من المدونة لو حدث أي خطأ يمكنك تذاركه.

2- إبحث عن الوسم ]]></b:skin> و ألصق الكود الموجود في الأسفل قبله تماما.

   

3- قم بحفظ القالب الأن

4- توجه لإضافة أداة

 

5- ضع الأن الكود التالي

<div style='position: fixed; top: 40%; left: 0%;'/>
<ul id="navigationMenu">
<li>
<a class="Home" href="http://widget-blogs.blogspot.com/">
<span>الرئيسية</span>
</a>
</li>
<li>
<a class="about" href="http://widget-blogs.blogspot.com/p/blog-page_5332.html">
<span>عن المدون</span>
</a>
</li>
<li>
<a class="services" href="http://widget-blogs.blogspot.com/">
<span>خدمات</span>
</a>
</li>
<li>
<a class="portfolio" href="http://widget-blogs.blogspot.com/p/blog-page_6091.html">
<span>فهرس المدونة</span>
</a>
</li>
<li>
<a class="contact" href="http://widget-blogs.blogspot.com/p/blog-page_5585.html">
<span>إتصل بنا</span>
</a>
</li>
</ul>
</div><a href="http://widget-blogs.blogspot.com/" target="_blank"><small>Get The Fixed Menu Gadget</small></a>

6- قم بتغير ما هو باللون الأحمر بروابط مدونتك، و إن أردت قم بتغير ما هو باللون الأخظر بالكلمات التي تريد.

7- الأن إحفظ الأداة و اسحبها لأسفل التصميم، و قم بالمعاينة