اضافة قائمة جانبية أنيقة و جميلة بتقنية CSS
السلام عليكم ورحمة
الله تعالى وبركاته سوف نتطرق في هذه التدوينة إلى كيفية اضافة قائمه
جميلة و أنيقة بنقنية 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/AVvXsEjm-21sCc0D9d-ggPlMIcHauZXUtqLgzbOWP6L_ETc6uuASx8VwwjfEqOeRewuQ9dZKzoVRaMKEi8U2w3nbpCaOU0BecG75HPbb4nEZmL6TnF7lWL24mjRPWV6e-xvHCH8jmPDbHq3AudA/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">
<span>الرئيسية</span>
</a>
</li> <li>
<a class="about" href="http://j3l3l.blogspot.com/">
<span>عن المدون</span>
</a>
</li>
<li>
<a class="services" href="http://alb33dani.blogspot.com">
<span>خدمات</span>
</a>
</li>
<li>
<a class="portfolio" href="http://alb33dani.blogspot.com/p/blog-page.html">
<span>فهرس المدونة</span>
</a>
</li>
<li>
<a class="contact" href="http://alb33dani.blogspot.com/p/blog-page_6165.html">
<span>إتصل بنا</span>
</a>
</li>
</ul>
</div><a href="http://alb33dani.blogspot.com/" target="_blank"><small>Get The Fixed Menu Gadget</small></a>
7- الأن إحفظ الأداة و اسحبها لأسفل التصميم، و قم بالمعاينة
و أخيراذا نججت في تركيب هذه الاضافه لاتبخل بمشاركة الموضوع
يعطيك الف عافيه اضافه جميله وشرح واضح ومختصر
ردحذفالله يعافيك اخوي بس ياريت تسجل الدخول في المره المقبله
حذفأزال أحد مشرفي المدونة هذا التعليق.
ردحذف@gharip
ردحذفالعفو اخي شكرا لمرورك
يسلو ايديك والله يوفقك
ردحذف@smadi امين وياك اخي ربي يسلمك ويحفظك من كل شر شكرا لمرورك
ردحذفمشكوووووووووور أخي الكريم :)
ردحذف@مدونة سوس
ردحذفالعفو شكرا لمرورك
مشكور
ردحذفبس ممكن تعيد الشرح بالصور لانه يطلعلي ذا :
http://im42.gulfup.com/haBjB.gif
وشكرا
اخي تاكيد من نسخ الكود الاول بطريقه سليمه
حذفالخاص بوسم ]]></b:skin>
طيب صح علي كذا ؟؟
ردحذفhttp://im35.gulfup.com/KNuSg.gif
وشكرا
نعم اخي هذا الكود صحيح
حذفعموما اخي اذا ما ظهرت معك الاضافه بشكل سليم يمكنك ارسال قالبك على ايميلي alb33dani@yahoo.com وسوف اقوم باضافة هذه القائمه الى قالبك
آهى طيب ارسلت لك القالب على ايميلك وشكرا على المساعده
ردحذفتم اضافة القائمه الى القالب وتركيبه على مدونتك
حذفمشكور وما قصرت بس ممكن اعرف ليش ما ضبط يوم ركبته..؟؟
ردحذفوعذرا على الازعاج وتحياتي ...
انتي قمتي باضافة الكود بطريقه سليمه ولكن اكواد قالبك الخاصه بالـskin لاتتوافق مع الاضافه عشان كذه ماضبط معاكي الكود
حذف@-)
ردحذف(h) (h) (h) (h) (h)
حذفاخي عندي اول اختيارين لم استطيع الضغط عليهم للانتقال الى الصفحه ارجو منك التوضيح السبب
ردحذفوباقي الاختيارات استطيع الضغط عليهم
وتقبل تحياتي وشكراااا لك استقدت كثيراااا من مدونتك
قد يكون هذا بسبب تداخل القائمه مع اضافة المواقع الاجتماعيه العائمه التي في مدونتك
حذفطب اخي وما الحل
ردحذفاخي الكريم انا ابحث عن هذا الكلمة لكن لا اجده ارجو الجواب
ردحذف(h) (h) (h) (h) تحياتي لك
ردحذفيعطيك الله العافيه
ردحذفشرح سهل جدا :D واضافة جد رائعة (o)
ردحذف