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


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

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

view demo

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

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- الأن إحفظ الأداة و اسحبها لأسفل التصميم، و قم بالمعاينة

0 comments:

Post a Comment