كيفية اضافة قائمه جميلة و أنيقة بنقنية CSS3

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

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

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

خد نسخة احتياطيه من قالب المدونة من اجل لو حدث أي خطأ يمكنك تداركه

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): */
   -moz-transition: 0.25s;
   transition: 0.25s;
}

#navigationMenu a{
   /* The background sprite: */
   background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig6H5w0pSbFVLOt9DRCz4UlnAmHY0YxjPfhiglCsgcyZc16wrmB-8OtBV_9kr2eEZI_29bbG_L0cOsY66ZSuLUd7maemNYxev6azgWrzMsa0FFTTFnf1xRQoh5-dEp5eSG0Fi4S1uX5Yg/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/Javascript
ثم قم بلصق الكود التالي :

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

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

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