wesamdev

افلام هندية$type=sticky$count=4$show=home

$show=home

|روبوتات_$type=slider$source=random-posts$snippet=hide$cate=20$show=home

|اضافات بلوجر$type=three$m=0$rm=0$h=400$c=3$show=home

$show=home

wesamdev

شرح الإتجاه في بلوجر

لاشك في أن أي مبرمج للقوالب يطمح في أن يكون القالب الخاص به متوافق مع الـ rtl و ltr في آن واحد , ماذا إن قلت لك أننا في هذا المقال سنتطرق لهذا الأمر

شرح الإتجاه في بلوجر

شرح الإتجاه في بلوجر - direction blogger


 لاشك في أن أي مبرمج للقوالب يطمح في أن يكون القالب الخاص به متوافق مع الـ rtl و ltr في آن واحد , ماذا إن قلت لك أننا في هذا المقال سنتطرق لهذا الأمر ونشرحه بالتفصيل .


ماهي خاصية direction أو الإتجاه :

طبعا الكثير منا وخاصة المبتدءين في المجال لايعرفون معنى الخاصية direction مما يتوجب علينا توضيحها .. الخاصية direction تظبط إتجاه النص بحيث نستخدم rtl للإشارة إلى اللغات التي تكتب من اليمين إلى اليسار و ltr للغات التي تكتب من اليسار الى اليمين كـ اللغة الإنجليزية وذالك بإستخدام الخاصية dir على العنصر html .

في قوالب بلوجر يمكننا توليد الوضيعة rtl و ltr تلقائيا حسب اللغة المستخدمة في المدونة بحيث : يتم توليد الوضعية rtl للعربي أما ltr للأجنبي مما يسمح للمصمم ضبط المسار المناسب لكل وضعية كيفما يشاء .

يمكننا إضافة السمة dir بحيث تكون معدة تلقائيا وتتغير بتغير اللغة وذالك بإضافة expr:dir='data:blog.languageDirection'  داخل الوسم <HTML> , قم بتركيب هذه السمة في المكان المطلوب كما لاننسى أننا قد إستعملنا هذه السمة في شرحنا عن أكواد الميتا تاج .

بعد تركيب السمة لاحظ من خلال فتح مصدر الصفحة عند عنصر الـ html ستجد من بين التعاريف السمة dir='rtl' وهذا في حال كانت اللغة عربية أما لو إنتقلت للغة الأجنبية من إعدادات اللغة أو ببساطة قمت بإضافة ?hl=en  في أخر الرابط ستلاحظ أن السمة تغيرت إلى dir='ltr' وهذا هو المطلوب .

حسنا , المفروض الآن الفكرة تكون قد وصلت لكم لذالك فل نتحدث عن طريقة التخصيص بـ مثال عملي :


من أجل تطبيق هذا المثال يتوجب علينا إضافة كلاس - class يتغير بتغير إتجاه عرض المدونة , إتبع الشرح التالي حتى تتمكن من إضافته :

  1. 1 - توجه إلى بلوجر ثم المظهر - إضغط على تعديل <HTML> .
  2. 2 - إبحث عن وسم الفتح <body> .
  3. 3 - يمكن إضافتها بطريقتين بسيطتين :


الطريقة الأولى :1


أضف السمة التالية مباشرة في الـ <BODY> : expr:class='data:blog.languageDirection'
بحيث تكون بالشكل التالي :

  

شرح الإتجاه في بلوجر


الطريقة الثانية :1


والتي سـ نستعمل فيها العلامة <b:class> التي تسمح لنا بإضافة قيمة في السمة class مفردة .

- لإضافتها فقط نقوم بإضافة العلامة <b:class expr:name='data:blog.languageDirection'/>


 تحت وسم فتح <BODY> مباشرة بحيث تكون بالشكل التالي :

 

شرح الإتجاه في بلوجر


بعد إضافتها ستلاحظ من خلال فتح المصدر إضافة كلاس يتغير بتغير لغة العرض .
الآن هيا نفترض أن عندنا عنصر ما نعمل عليه ونريد أن نجعله متوافق مع لغتي العرض .. وليكن زر تحميل مثلا , وهو الذي يظهر أمامك في المعاينة أسفله و class الخاص به هو .mtec-btn فـ إذا كانت لغة العرض عربية rtl نضع الزر في الجهة اليمنى فـ الكود الخاص بها سيكون بالشكل التالي :

  • .rtl .mtec-btn {
    float: right;
    }
    
    

  •   


أما إذا كنا في لغة العرض الإنجليزية مثلا ltr نقوم بوضع الزر في الجهة اليسرى ويكون الكود بهذا الشكل :

  • .ltr .mtec-btn {
    float: left;
    }
    

  •   

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


wesam developer

إذا أعجبك المقال أو كان مفيدًا - ضع "أعجبني". اشترك في المدونة اوشارك برأيك في التعليقات! أراك لاحقا

COMMENTS

BLOGGER
الاسم

اخبار,45,اداة للكمبيوتر,7,اضافات بلوجر,88,افلام اجنبي,9,افلام روسية,32,افلام عربي مترجمة الي الروسية,1,افلام قديمة,2,افلام هندي,8,البرمجة,8,الجديد في التكنولوجيا,46,العاب,9,النمر,7,اليوتيوب,16,اندرويد,15,اندرويد استوديو,3,برامج كمبيوتر,11,بلوجر,8,تركيا,6,تصميم,3,تطبيقات,20,جافاسكريبت,3,حوادث,5,حول العالم,65,حيوانات,25,خلفيات,1,دروس HTML| بالعربية,2,روبوتات,8,روسيا,60,سياحة,4,سيارات,12,سياسة,16,شروحات,34,شريط الاخبار,1,صحتي,2,طائرات,22,فن,35,قناة الوعي نور,4,قناة قعدة تاريخ,8,قوالب بلوجر,3,كتب الكترونية,7,مالتي ميديا,6,متصفح,2,محليات,4,مسلسل لعبة الحبار,1,مسلسلات اجنبية,2,مسلسلات رمضان 2022,1,مسلسلات رمضان 2120,1,مصر والعرب,1,معدات حربية,34,معدات زراعية,6,مقالات,99,مواصلات النقل,1,مواقع للتصميم,14,وثائقي,14,وسوم بلوجر,2,ويندوز,15,Antivirus,3,Button,1,c++,1,css,37,HTML,11,wesam,2,
rtl
item
Wesam: شرح الإتجاه في بلوجر
شرح الإتجاه في بلوجر
لاشك في أن أي مبرمج للقوالب يطمح في أن يكون القالب الخاص به متوافق مع الـ rtl و ltr في آن واحد , ماذا إن قلت لك أننا في هذا المقال سنتطرق لهذا الأمر
https://1.bp.blogspot.com/-w_Woh0lUwzo/YQrYLc4M4qI/AAAAAAAAWQY/jzTOx2RAWyI9UVrBNKsuYpwe_WVOSv2nQCLcBGAsYHQ/s16000/%25D8%25B4%25D8%25B1%25D8%25AD%2B%25D8%25A7%25D9%2584%25D8%25A5%25D8%25AA%25D8%25AC%25D8%25A7%25D9%2587%2B%25D9%2581%25D9%258A%2B%25D8%25A8%25D9%2584%25D9%2588%25D8%25AC%25D8%25B134.png
https://1.bp.blogspot.com/-w_Woh0lUwzo/YQrYLc4M4qI/AAAAAAAAWQY/jzTOx2RAWyI9UVrBNKsuYpwe_WVOSv2nQCLcBGAsYHQ/s72-c/%25D8%25B4%25D8%25B1%25D8%25AD%2B%25D8%25A7%25D9%2584%25D8%25A5%25D8%25AA%25D8%25AC%25D8%25A7%25D9%2587%2B%25D9%2581%25D9%258A%2B%25D8%25A8%25D9%2584%25D9%2588%25D8%25AC%25D8%25B134.png
Wesam
https://www.wesamdev.com/2021/08/blog-post.html
https://www.wesamdev.com/
https://www.wesamdev.com/
https://www.wesamdev.com/2021/08/blog-post.html
true
1297279864306511161
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy Table of Content