تثبيت القائمة العلوية عند تمرير الصفحة

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

ملاحظة : كما تلاحظون في مدونة عند هبوط إلى أسفل الصفحة القائمة علوية تتثبت في الأعلى

شرح طريقة التركيب

• 1 . نتوجه لقالب >> تحرير 

• 2. ابحث بإستعمال CTRL+F عن <b:skin/><[[

• 3. ضع الكود التالي قبله [ فوقه ]

.stick-navigation{ z-index: 9999; position: fixed; top: 0; width: 100%; }

• 5. ابحث عن : <head/>

• 6. ضع الكود التالي قبله [ فوقه ]

<script type="text/javascript"> var _rys = jQuery.noConflict(); _rys("document").ready(function () { _rys(window).scroll(function () { if (_rys(this).scrollTop() > 136) { _rys('.stick-navigation').addClass("fixed-nav"); } else { _rys('.stick-navigation').removeClass("fixed-nav"); } }); }); </script>

•  الأن وصلنا للمرحلة الأخيرة والتي ستطبق بها ثبيت القائمة

• ـ إذا كانت لديك قائمة علوية أو ثانوية وتريد تثبيت القائمة العلوية كل ما عليك فعله هو البحث عن كلمة متواجدة بالقائمة مثلا الرئيسية عندها سنجد فوقها أكواد مثال 

<div class="stick-navigation"><div id='sidebar'> <ul> <li><a href="#">الرئيسية</a></li> <li><a href="#">نبذة</a></li> <li><a href="#">خدمات</a></li> <li><a href="#">اتصل بنا</a></li> </ul> </div>

العنصر الملون بالأصفر هو الكود الخاص بالقائمة كل قائمة تختلف عن بقيتها لذا قد يكون هناك أكثر من كودين ضع فوقهما هذا

الكود  : <div class="stick-navigation">

7. حفظ العمل ثم إذهب للمعاينة

ماهو تصميم مسطح ( فلات ديزاين ) ??

بدأت العديد من الشركات الشهيرة مثل جوجل وآبل وتويتر وفيسبوك ومايكروسوفت وغيرها بانتهاج سلوك جديد في التصميم؛ فبعد أن كانت التصاميم والشعارات والأيقونات تعتمد على الشكل الثلاثي الأبعاد والظل وغيرها من تقنيات التصميم، ها هي الشركات تعود لما يُسمى Flat Design، والتي تعني التصميم المسطح، فقبل أسبوع مضى قامت تويتر بإعادة تصميم تطبيقها على iOS ليحصل على تصميم مُسطح، تبعتها الفيسبوك، ثم ياهو بالإضافة إلى العديد من الشركات، والتي كان آخرها نظام آبل الجديد iOS 7 والذي أعلنت عنه خلال مؤتمرها للمطورين WWDC 2013، والذي حصل على شكل جديد بشكل كامل يعتمد على التصاميم المُسطحة. في هذه المقالة سنقوم بتسليط الضوء على هذا النوع الجديد من التصاميم.

كيف يكون التصميم مُسطّح؟
التصميم المسطّح هو أسلوب يتصف بالجمال والبساطة المطلقة والاستغناء عن العناصر غير الاساسية في التصميم، إنّه تصميم تصويري يرافق تصاميم مواقع الإنترنت الحديثة، يتمثّل باستخدام تصاميم بسيطة خالية من مؤثّرات الأجسام ومن الـtextures. الألوان المستخدمة هي غالبا ألوان حيّة، بعض العناصر المتكرّرة تطبع هذا التوجّه مثل الأيقونات المرسومة بشكل مسطّح ومع تدرّجات لونية مهذّبة وبسيطة، ولا نعني بأنّ البساطة الكبيرة للتصميم المسطح ستصبح معها عملية التصميم سهلة وبسيطة. أصبح للمصمم عمل صعب بالخروج بتصميم مجرّد من التعقيد والأجسام الحقيقة إلى تصميم مسطّح بسيط يستطيع المستخدم التعامل معه والتميز بين العناصر العادية والعناصر التي تنتظر من المستخدم أن يقوم بحدث معين كالأزرار مثلاً. ويمكننا أن نُجمل بعض صفات التصاميم المسطحة في النقاط التالية:
يحتوي التصميم المسطّح على تدرجات ألوان قليلة.
يبدو بشكل عام ثنائي الأبعاد.
لديه حواف حادّة أو مربعة.
نادرًا ما يحتوي على ظلال.
في العادة يبدو كتصميم بدائي وبسيط.
يجب ألا يحتوي على تفاصيل عميقة.
عناصر التصميم المسطّح المتواجدة فيه قليلة جدًا.

الوضوح في الكتابة والخطوط العريضة هي أهم ما يميز هذا الأسلوب المتأثر بالأفكار الحديثة



وبعد أن ذكرت بعض ميزات التصاميم المُسطّحة دعونا الآن نأخذ بعض المقارنات التي قد تسلّط على الموضوع بشكل أكبر، فعندما أطلقت آبل نظامها الجديد iOS 7 والذي اختلف جذريًا عن الأنظمة التي تسبقه، خاصةً في طريقة التصميم، فقد تميز ببساطة شديدة وألوان حادة وحواف بلا ظل، إنّه ببساطة اعتمد على طريقة التصميم المسطح. فعلى سبيل المثال حينما ننظر إلى الفرق بين أيقونة الساعة في نظام iOS في النظام الجديد والذي قبله، لوجدنا قمّة البساطة في النظام الجديد.



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



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

التصميم المسطّح ليس في واقع الأمر نزعة جديدة ولا خالدة، فهذا الأسلوب في التصاميم كان العديد من المصممين يستخدمونه بصورة مبسطة وأحيانًا بغير وعي منهم بهذه التسمية المستقبلية؛ لكننا لابد وأن نعترف بأنّ هذه التصاميم كانت تستخدم منذ عشرينيات القرن الماضي تحت مسمى آخر هو “الأسلوب السويسري” أو (Swiss Style). التطوّر السريع لمنصات الويب المختلفة والتقاء ظروف عدّة سمحت بإعادة إحياء هذا التوجّه، مع ذلك تظل تحديّات عديدة لجمهور المصمّمين من قبيل تشابه المواقع لبساطتها المفرطة وهو ما قد يدفع بظهور توجّهات جديدة أكثر تطرّفا، التوجّه القادم هو بلا شكّ في مكانٍ ما من الأرجاء وينتظر دوره ليلفت انتباه جمهور المصممين، ليس علينا سوى انتظار بعض الوقت حتى تنفجر هذه النزعة لتشكل دورة حياتها من جديد!

تخصيص صفحة المواضيع بعرض المدونة

مرحبا بكل زائر ومتابع عدنا لكم من جديد مع درس جديد ومن طلبات الأعضاء لتخصيص وجعل صفحة المواضيع و الصفحات 

المثبتة بعرض محدد أو عرض كامل للمدونة سأقوم بشرح لكم الطريقة بحيث سنتخلص من السيدبار لكي نعطي مساحة كافية 

للعرض لمن يريد تخصيص الصفحات الثابتة وحدها فقط

فسنحتاج فقط لكود واحد لمن يريد تطبيق العرض للمدونة و الصفحات فسيضيف الكودين بإثنين ولكي أعطيكم توضيح كامل 

سأدخل لشرح مباشرة 

دائما خد نسخة إحتياطية للقالب قبل التعديل

__________________________________________________

شرح طريقة التركيب

1 . نتوجه لقالب ===>

2. ابحث بإستعمال CTRL+F عن :

 <head/>

* الكود الأول لجعل صفحة المواضيع بعرض المدونة

3. ضع الكود التالي قبله [ فوقه]

<b:if cond='data:blog.pageType == &quot;item&quot;'> <style> .sidebar,.footer {display:none;} #main-wrapper{width: 99%; float: none; margin: 0px auto;} html {overflow-x: hidden;} .post {width: 97%; margin: 15px auto;} .post h3 a { text-align: center; padding:5px;} </style> </b:if>

1 - في الكود يوجد : .sidebar,.footer 

2 - أمامهم يوجد : {display:none;}

3 - ذلك الكود وظيفته إخفاء العناصر مثل السيدبار إذا أردت إظهار الفوتر . قم بحذف العنصر footer.

4 -الأمر يحتاج دراية بسيطة بالاكواد و الوسوم لذا لمن واجهته مشكلة فإطرحها بالتعليقات وسيتم حلها بإذن الله

_____________________________________________

الأن سنمر لطريقة جعل الصفحات الثابتة بعرض المدونة

2. ابحث بإستعمال CTRL+F عن : <head/>

---  الكود الثاني لجعل الصفحات الثابتة بعرض المدونة

3. ضع الكود التالي قبله [ فوقه]

<b:if cond='data:blog.pageType == &quot;static_page&quot;'><style> .sidebar,.footer {display:none;} #main-wrapper{width: 99%; float: none; margin: 0px auto;} html {overflow-x: hidden;} .post {width: 97%; margin: 15px auto;} .post h3 a { text-align: center; padding:5px;} </style> </b:if>

أيضا تطبق نفس الخاصية إذا أردت حذف شيئ ما وذلك عبر وضع الكود وراء {display:none

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

|

|

|

|

حصريا اضافة تابعنا علي شبكات بشكل جديد

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

طريقة تركيب علي المدونة بلوجر

تقوم بذهاب الي لوحة تحكم مدونتك ثم تخطيط ثم اضافة اداة html / java

ثم قم بوضع الكود التالي وعمل حفظ

<div class="widget-amrweb"><style type="text/css">#th3protechsocial{list-style:none;}#th3protechsocial li{background-size:60px 60px !important;display:inline-block;width:60px;height:60px;transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-webkit-transition:all 0.5s ease-in-out;}#th3protechsocial li:hover{transform: rotate(360deg);-ms-transform: rotate(360deg);-webkit-transform: rotate(360deg);}#th3protechsocial .facebook{background:url('http://im80.gulfup.com/TCD59C.png') no-repeat;}#th3protechsocial .twitter{background:url('http://im80.gulfup.com/1J6BqQ.png') no-repeat;}#th3protechsocial .plus{background:url('http://im80.gulfup.com/Ua8QRN.png') no-repeat;}#th3protechsocial .youtube{background:url('http://im80.gulfup.com/P0Blhq.png') no-repeat;}</style><div id="th3protechsocial" align="center" <ul><a href="https://www.facebook.com" target="_blank"><li class="facebook"></li></a><a href="<a href="<a href="<a href="https://twitter.com/" target="_blank"><li class="twitter"></li></a><a href="<a href="<a href="<a href="https://plus.google.com/" target="_blank"><li class="plus"></li></a><a href="<a href="<a href="<a href="https://www.youtube.com/" target="_blank"><li class="youtube"></li></a></ul></div></div></ul></div></div></ul></div></div></ul></div></div>

غير روابط المشار لها بالاحمر بما يناسبك 

والان انتها موضوعنا انتظرونا كل دقيقة في موضوع جديد وحصري 

وسلام عليكم ورحمته الله وبركاته

جيك عربي تفتح أبوابها

بسم الله الرحمن الرحيم الصلات والسلام على أشرف المسرلين سيدنا محمد صلى الله عليه وسلم

كما قرأتم في العنوان تم لإفتتاح مدونة جيك عربي بنجاح بعد أن واجهتنا كثير من مشاكل تقنية وبرمجية ولكن بفضل الله أكملنا بنجاح

سوف نقدم بالمدونة شروحات برمجية وخاصة بتصميم وتكويد قوالب بلوجر وتطوير لهاذا كونوا في إنتظار جديدنا

ولتواصل معنا راسلونا على

فيسبوك

يوتيوب

أو مراسلتنا على 

geek-arabia@mail.com