DZPRO

بعد أن أتممنا الجزء الأكبر من سلسلة دروس جعل قالب متوافق مع جميع الأجهزة و الشاشات , اليوم سنبدء بالمقتطفات أو التعديلات الصغيرة و التي تزيد من جمالية القالب في الشاشات الصغيرة مثل الهواتف  . لذا قررت أن أخصص هذه المقالة لشرح كيفية الحصول على قائمة متجاوبة لموقعك، باستخدام تقنيتي الـ CSS3 و jQuery  الطريقة سهلة جدا , أنا سأشرح طريقة اضافة قائمة متوافقة من الصفر و أنت يمكنك أن تستخلص طريقة جعل قائمتك متوافقة بتخصيصاتك  أضف هذا كود الHTML التالي في المكان الذي تريد أن تظهر فيه القائمة  <div id="navigation-dzpro">  <ul class="navigation">  <li><a href=" www.dzprofessionale.com /">الرئيسية</a></li>  <li><a href=" www.dzprofessionale.com /">قسم 1</a></li>  <li><a href=" www.dzprofessionale.com /">قسم 2</a></li>  <li><a href=" www.dzprofessionale.com /">قسم 3</a>  <ul>  <li><a hre...

طريقة جعل قالب متوافق مع جميع الشاشات السلام عليكم ورحمة الله تعالى و براكته ,في هذا الدرس الجديد من حلول لطريقة جعل قالب متوافق مع جميع الأجهزة و الشاشات سنتطرق الى الحل الأكثر استعمالا و هو عبر ال Media queries هذه التقنية تتم عبر ال css3 و مهمتها عمل تصميم متوافق Respansive web design , مثال في المثال أعلاه يوجد تصميم بسيط متوافق مع جميع الشاشات , جرب تصغير نافذة المتصفح عند فتح المثال لترى كيف يتجاوب التصميم مع  عرض  نافذة المتصفح و نفس الشيئ سيفعله مع الشاشات الأخرى . أولا , بما أن الMedia Queries تقنية من تقنيات css3 فعلينا كتابة أكوادها في مكان الcss سواء بين وسمي style أو b:skin في البلوجر . @media screen and (max-width : 1280px) { /* CSS FOR NETBOOK AND DESKTOP ------------*/ } @media screen and (max-width : 1024px) { /* CSS FOR TABLETS ------------*/ } @media screen and (max-width : 768px) { /* CSS FOR SMALL TABLETS ------------*/ } @media screen and (max-width : 640px) { /* CSS FOR IPHONE ------------*/ } @media ...

السلام عليكم و رحمة الله تعالى و براكته , اليوم ان شاء الله سنتطرق الى الدرس الثاني من حلول جعل قالب متوافق مع جميع الشاشات في هذا الدرس سأريك حل اخر لمشكلة توافق قوالب بلوجر مع جميع الشاشات ,هذا الحل يتمثل في اظهار أو اخفاء و بمعنى اخر تخصيص أكثر في أدواة البلوجر , فنعم يمكنك أن تقوم باخفاء و اظهار الأدواة في الهاتف و هذا من أجل تفادي بعض المشاكل حيث هناك بعض الاضافات التي لا تناسب الأجهزة الذكية  فمنصة البلوجر وفرت بعض الاضافات في نسخة الهاتف (متوافقة مع نسخة الهاتف و الحاسوب و شاشات مختلفة) و التي هي : رأس الصفحة (Header) رسائل المدونة الإلكترونية (Blog Posts) AdSens الاسناد (Attribution) الملف الشخصي (Profile) طريقة اظهار أو اخفاء أدوات بلوجر في نسخة الهاتف  الطريقة سهلة فماعليك الا الذهاب الى لوحة تحكم مدونتك ثم قالب ثم تحرير html بعد ذالك تبحث عن اسم الأدات التي تريد أن تخفيها أو أن تظهرها في الهاتف فقط .. كما قمت بتسميتها بالضبط , بعد ايجادها سترى أنها في كود يبدء بوسم b:widget و هذا الوسم يدل على أن هذا كود خاص بأداة  عمو...

السلام عليكم و رحمة الله تعالى و براكته , اليوم ان شاء الله سنتطرق الى الدرس الأول من حلول جعل قالب متوافق مع جميع الشاشات  فهو شيئ رائع أن يكون لك قالب متوافق مع جميع الشاشات , قالب خاص بك و قالب ذكي يستطيع الجميع أن يتصفحه من كل الأجهزة مثل الهواتف و ال TABLETS لذالك اليوم سنتطرق للحل الأول و هو عبر تفعيل خاصية ال pinch to zoom و هذه الخاصية تستعمل بكثرة في المواقع الاخبارية و هي تعنى قابلية التقريب والابعاد باستخدام أصابع اليد لتمكن القارئ من جودة أفضل للقراءة لتدويناتك والاطلاع على مدونتك بصورة أفضل . بطريقة سهلة جدا و بكود واحد بسيط نستطيع توفير هذه الاضافة للزائر  بعد الدخول الى لوحة تحكم مدونتك ثم الى قالب ثم تحرير HTML  تقوم بالبحث عن الكود التالي  </head> بعد ذالك نقوم باضافة الكود التالي فوقه  <meta content='width=device-width, initial-scale=1.0, maximum-scale=12.0, minimum-scale=.25, user-scalable=yes' name='viewport'/>  و لتجربة تصفح موقعك عبر الهاتف أو التابلت أو مختلف الشاشات ...