[BBcode] سلسلة تعلم ★ كيف تصنع توقيع ★ | تحديث 1/2/2018

[hugeblack]

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

قررت ان ابدا موضوع يمكنني فية مشاركة خبرتي البسيطة في لغة ال >bbcode<وتعلم كيف يمكن صنع التوقيعات

اظن ان اغلبكم سمع بحملة التوقيعات والبعض قد يتسال كيف يمكن صنع هذه التوقيعات . سوف اقدم سلسلة دروس اسبوعية تمكننا من فهم الكيفية وحتي الوصول الي الاحتراف

اذا واجهتك اي مشكلة اطرحها بالاسفل وسوف تجد الحل ان شاء الله

الدرس الاول : قواعد تصميم التوقيعات

الدرس الثاني : الالوان و تدرجها

الدرس الثالث : الاحجام

الدرس الرابع : قواعد اساسية للرسم

دروس تطبيقية الدرس الاول:





تذكر ان كل التوقيعات علي الموقع لها نفس الارتفاع وهو ارتفاع ثلاثة اسطر ولكن العرض تحكمة قواعد

1
2
3

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

اكواد عامة

Code:

[b]هذا النص عريض[/b]
[i]هذا النص مائل[/i]
[u]هذا النص تحته خط[/u]
[color=اللون]النص[/color]
[size=النص]حجم النص[/size] ** لرسم الصور في التوقيعات يفضل 2pt او 1pt
[font=النص]نوع الخط[/font]
[url=النص]الربط[/url]


[table]
[tr]
[td]
الصف الاول العمود الاول
[/td]
[td]
الصف الاول العمود الثاني
[/td]
[td]
الصف الاول العمود الثالث
[/td]
[td]
الصف الاول العمود الربع
[/td]
[/tr]
[tr]
[td]
الصف الثاني العمود الاول
[/td]
[td]
الصف الثاني العمود الثاني
[/td]
[td]
الصف الثاني العمود الثالث
[/td]
[td]
الصف الثاني العمود الرابع
[/td]
[/tr]
[/table]

التنفيذ

هذا النص عريض
هذا النص مائل
هذا النص تحته خط
النص
النص
النص
الربط

الصف الاول العمود الاول	الصف الاول العمود الثاني	الصف الاول العمود الثالث	الصف الاول العمود الربع
الصف الثاني العمود الاول	الصف الثاني العمود الثاني	الصف الثاني العمود الثالث	الصف الثاني العمود الرابع

جدول القوانين

الرتبة	التصميم	اسلوب عريض	الجداول	اقصي حروف
Newbies	لا	لا	لا	50
Jr. Members	لا	لا	لا	150
Members / copper member	لا	لا	لا	4000
Full Members	مسموح بالالوان	نعم	لا	4000
Sr. Members	مسموح بدون خلفية	نعم	نعم	4000
Hero/LegendaryزMembers	نعم	نعم	نعم	4000

مثال لتصميم حساب Jr.member

من الجدول اعلاة الطول لهذا الحساب 150 كلمة والعرض 3 اسطر

Code:

[url=الرابط هنا]●▬ زوروا صفحتي للمزيد ▬●[/url]
اسال = تعلم
❖

التنفيذ

1 2 3

●▬ زوروا صفحتي للمزيد ▬● اسال = تعلم ❖

يستكمل

[hamade]

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

[w-m-h]

هذا موضوع يستحق التحيه
لك كل التقدير والاحترام
استمر اخي الكريم

[klambo]

شكرا لك اخي كونت بانتظار هذا الموضوع وكان لدي سوال 
 copper= Member
وكيف ذالك وكيف الترقية لي copper

[Drop99]

تستحق كل الدعم والتنويه والتشجبع على هذه السلسلة المتميزة والهادفة . واصل اخي . دمت  متألقا

[samo_samosam]

هل هده السلسلة لها اجزاء اخرى

[hugeblack]

الالوان هي من اهم العناصر التي تعطي جمالية لتصميمك وتدرج الالوان هو الذي يجعل مصمم افضل من اخر

الكود الرئيسي لجميع الالوان هو

Code:

[color=القيمة]النص[/color]

القيمة هي اللون الذي تريد للنص ان يظهر بة وهي اما نص او صيغة هيكساديسمل

يكون النص باللغة الانجليزية ويدعم عدد معين من الالوان كالاحمر والاسود وغيرهما  اما للحصول علي جميع الالوان يجب ايجاد الكود بالهكساديسمل من جداول

هذا الموقع يعطيك كل الالوان المتاحة للعمل علي شاشات الحاسوب
http://htmlcolorcodes.com/color-picker/
قم بزيارة الموقع ومن ثم اختر اللون وانسخ قيمتة بالهكساديسمل وضعها مكان القيمة بالكود


الكود

Code:

[color=black]هذا اللون الاسود[/color]
[color=red]هذا اللون الاحمر[/color]
[color=#333]هذا اللون الرمادي[/color]

التنفيذ

هذا اللون الاسود
هذا اللون الاحمر
هذا اللون الرمادي

امثلة لاستخدام الهيكساديسمل


الكود

Code:

[color=#FFF933]11111111111111[/color]
[color=#83FF33]222222222222[/color]
[color=#33E0FF]333333333333[/color]
[color=#334CFF]44444444444[/color]
[color=#4933FF]5555555555[/color]

التنفيذ

11111111111111
222222222222
333333333333
44444444444
5555555555

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

التدرج هو بعد اللون من اللون الاسود او الابيض فكما كان اللون اقرب للاسود كلما كان غامق والعكس للابيض

الكود من دون استخدام تدرج للون

Code:

[color=#FF3333]this is the red color [/color]

التنفيذ

this is the red color

الكود باستخدام التدرج

Code:

[color=#FF3333]this [color=#CB2929]is [color=#971F1F]the [color=#631515]red [color=#2F0B0B]color [/color]

التنفيذ

this is the red color

ويمكن فعل التدرج باعطاء لون لكل حرف قيمة هذا اللون يمكن ايجادها من الموقع
https://highintegritydesign.com/tools/tinter-shader/

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



مثال عمل توقيع لحساب مستخدما انظمة الالوان

Code:

[color=#ff8a03]▰[/color] [color=#fe8c08]▰[/color] [color=#fc8e0c]▰[/color] [color=#fb9111]▰[/color] [color=#f99315]▰[/color] [color=#f8951a]▰[/color]
[color=#65d67c]m[/color][color=#68ce7e]y[/color] [color=#6fbd83]f[/color][color=#70b281]i[/color][color=#70a77e]r[/color][color=#719c7c]s[/color][color=#5e8567]t[/color] [color=#37583e]D[/color][color=#325139]e[/color][color=#2d4b35]s[/color][color=#284430]i[/color][color=#253b2b]g[/color][color=#223225]n[/color] 
[color=#ff8a03]➖[/color][color=#fc8e0c]➖[/color][color=#f99315]➖[/color][color=#ff8a03]➖[/color]

▰ ▰ ▰ ▰ ▰ ▰
my first Design 
➖➖➖➖

الشكر للزميل مشرف القسم العربي لتثبيت الموضوع واتمني ان تكون كل الردود هي عبارة عن اسئلة نريد ان نرتقي بمستوي التعليقات قليلا

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

هذا موضوع يستحق التحيه
لك كل التقدير والاحترام
استمر اخي الكريم

             شكرا لك عل المعلومات

شكرا جزيلا لك اخي
موضوع يستحق الشكر و التقدير
بالتوفيق

اخي الكريم شكرا لك فعلا هو موضوع مهم جدا لكن رجاءا هل ممكن تعريف للتوقيع وشكرا

تستحق كل الدعم والتنويه والتشجبع على هذه السلسلة المتميزة والهادفة . واصل اخي . دمت  متألقا

شكرا لك  في انتضار باقي الدروس 

شكرا لك هده المعلومات المهمة والمفيده وفي انتظار شرحاكتر

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

الله يبارك فيك أخي على الدرس والذي جاء في وقته

بانتظار جديدك...

هل هده السلسلة لها اجزاء اخرى

مشكورين جميعا واذا كان هنالك سؤال تفضلوا بطرحة

[moder3333]

شكرا اخوي لكن ما فائدة التوقيع؟؟

[Drop99]

مشكور على الجهد الجبار والطرح المتميز
 وحبذا لو  تشرح لنا الفائدة من التوقيعات
وفي ماذا تستخدم
سمعت انه يمكن الربح انطلاقا من التوقيعات ؟ كيفا ذلك 

[almostapha1983]

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

[HAKHALI]

اشكرك من صميم القلب.. النفوس الكريمة فقط هي من تسعى لافادة الاخرين بعلومها وخبراتها المكتسبة وبدون مقابل.. جزيل الشكر والامتنان لك اخي العزيز .

[hugeblack]

الاحجام ويقصد بها حجم النص المراد ادراجة في التوقيع . وبتكبير و تصغير الاحجام نوضح اونخفي بعض النصوص
تاتي التوقيعات بحجم اقصي 42 px

نقصد بال px المعامل الذي يوضح حجم النص وقيمتة من 1 الي 42 في التوقيعات

الكود الاساسي

Code:

[size=هنا الحجم من 1 الي 42pt]هنا النص[/size]

الامثلة

Code:

[size=2pt]هذا الحجم صغير جدا[/size]
[size=6pt]هذا الحجم صغير[/size]
[size=12pt]هذا الحجم عادي[/size]
[size=20pt]هذا الحجم كبير[/size]
[size=30pt]هذا الحجم كبير جدا[/size]
[size=44pt]هذا الحجم سيتم قصه في التوقيع[/size]

هذا الحجم صغير جدا
هذا الحجم صغير
هذا الحجم عادي
هذا الحجم كبير
هذا الحجم كبير جدا
هذا الحجم سيتم قصه في التوقيع

في قوانين التوقيع تم ذكر اكبر حجم 42 px لماذا الكود الاساسي يحتوي علي pt

الوحدتين هما اساسيتين في قياس الحجوم ويكمن التحويل بينهم باستخدام  الموقع الاتي

https://websemantics.uk/articles/font-size-conversion/
 
ذكرنا سابقا ان اقصي ارتفاع هو 3 خطوط علية فان اقصي حجم هو
1 خط بارتفاع 42 او خطين بارتفاع 21 او ثلاث خطوط بارتفاع 14 لكل خط


  تطبيق علي الدروس السابقة انشاء الله "سوف اقوم بشرحة في الحلقة القادمة"

Code:

[center][font=calibri][size=14pt][b][url=???][color=#ED5758][color=transparent]..[/color]Your [color=#D54E4F]TEXT [color=#BD4546]Here [color=#A53C3D]Add  [color=#8D3334]it now[color=transparent]..[/color][/url]
[font=calibri][size=9pt][color=#2C2C2C]O [url=url here][color=#ED5758] Slack [/url]O[url=url here][color=#D54E4F] Telegram [/url]O [url=url here][color=#BD4546] Facebook [/url]O [url=url here][color=#A53C3D] Discord [/url]O [url=url here][color=#8D3334] Reddit [/url]O [url=url here][color=#451819] Twitter [/url][/td]

..Your.TEXT.Here.Add..it.. O..Slack.O.Telegram.

شكرا اخوي لكن ما فائدة التوقيع؟؟

مشكور على الجهد الجبار والطرح المتميز
 وحبذا لو  تشرح لنا الفائدة من التوقيعات
وفي ماذا تستخدم
سمعت انه يمكن الربح انطلاقا من التوقيعات ؟ كيفا ذلك  

التوقيع يظهر اخر اي منشور للعضور كالذي باسفل اي منشور لي ويتم استخدامة في الدعاية والدفع لك

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

تابع هذا المنشور و ستتعلم ان شاء الله

شكرا لك عل المعلومات

تسلم اخي على الموضوع المهم

اشكرك من صميم القلب.. النفوس الكريمة فقط هي من تسعى لافادة الاخرين بعلومها وخبراتها المكتسبة وبدون مقابل.. جزيل الشكر والامتنان لك اخي العزيز .

ممتاز جدا

اذا كان هنالك اي سؤال تفضلوا

[hugeblack]

رسم الاشكال باستخدام لغة ال BBcode هو واحد من اصعب الاشياء في التصميم وهو الشي الذي يفرق بين مصمم واخر.
تذكر ان لغة الbbcode ليس منصة تعمل علي كل المتصفحات بمعني ان النتائج سوف تكون مختلفة من متصفح لاخر وعموما فانة للحصول علي افضل النتائج يرجي اتباع الاتي:

يفضل استخدام pt بدلا من px لانه يعطي تكبير ممتاز لكل المتصفحات
يفضل استخدام 2 pt او 2px بقدر الامكان

يفضل استخدام  "▂▃▄▅▆▇█▓▒░▌▬▐  ▂ ▃" وانا افضل ▓
الخط من عائلة Monospace يعطي شكل افضل لانة يسمح بالفراغات
كود "tt" عبارة عن خدعة لجعل الشكل كلة متزن

الكود الاساسي

Code:

[size=2pt][font=Monospace][tt][/size]

امتلة تطبيقية

Code:

[b][u]رسم مربع[/u][/b]

[size=2pt][font=Monospace][tt]█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
[/size]

[b][u]رسم خط مستقيم[/u][/b]

[size=2pt][size=2pt][font=Monospace][tt]█████████████████████████████████████
█████████████████████████████████████[/size]

[b][u]شكل حر[/u][/b]

[td][size=2pt][font=arialMonospace][tt]██  ██
██  ██
██  [color=transparent]██[/color]
██  ██
[color=transparent]██[/color]  ██
██  ██
██  [color=transparent]██[/color]
██  ██
[color=transparent]██[/color]  ██
██  ██
██  [color=transparent]██[/color]
██  ██
██  ██[/td]

 ** تذكر فقط باستعمال درس الالوان يمكنك الحصول علي اشكال ممتازة
[size=2pt][font=arialMonospace][tt][color=#FFA500]██  ██
██  ██
██  [color=transparent]██[/color]
[color=#E59400]██  ██
[color=transparent]██[/color]  ██
██  ██
[color=#CB8300]██  [color=transparent]██[/color]
██  ██
[color=transparent]██[/color]  ██
[color=#B17200]██  ██
██  [color=transparent]██[/color]
[color=#976100]██  ██
██  ██[/size]

رسم مربع

█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████

رسم خط مستقيم

█████████████████████████████████████
█████████████████████████████████████

شكل حر

██  ██ ██  ██ ██  ██ ██  ██ ██  ██ ██  ██ ██  ██ ██  ██ ██  ██ ██  ██ ██  ██ ██  ██ ██  ██

██  ██
██  ██
██  ██
██  ██
██  ██
██  ██
██  ██
██  ██
██  ██
██  ██
██  ██
██  ██
██  ██

دروس تطبيقية الدرس الاول:

بناء علي المعلومات من الدروس السابقة عرفنا ان اقصى ارتفاع للتوقيع هو 3 اسطر وان اكبر حجم له هو 42 بيكسل او 32 علي مقياس النقاط.
الان انا اريد ان انشي توقيع من خطين الاول بة شعار الشركة والثاني به روابط التواصل الاجتماعي.
اكبر ارتفاع هو 32 علي مقياس النقاط هذا يعني ان اكبر ارتفاع للخطوط هو 16 لكل خط اذا تمت الزيادة علي ذلك فان الخط سيتم قطعة .
في الغالب فان التركيز يكون علي شعار الشركة لذلك سيتم اختيار حجم اكبر له من حجم مواقع التواصل الاجتماعي وليكن 13 للشعار  و 11 لمواقع التواصل.
بالنسبة للخط فان من الافضل اخيار خط مدعوم من كل صفحات الويب وليكن arial.
هذاالموقع سيساعدك علي معرفة نوع الخط موقع لمعرفة الخط
شعار الشركة يعتمد علي اللون الازرق وباستخدام هذا الموقع يمكننا معرفة تدرجات الالوان المناسبة . موقع لمعرفة تدرجات الالوان

Code:

[center][td][center][url=https://bitcointalk.org/index.php?topic=2705814.20][font=arial black][b][size=13pt][color=#FFF][glow=#196BA3,2,300][color=#196BA3]..[color=#FFF]Your [glow=#196BA3,2,300]word [glow=#166093,2,300]here [glow=#135583,2,300] just [glow=#104A73,2,300] add[glow=#0D3F63,2,300] it[/color]..[/color][/glow][/size][/url]
[b][font=calibri][size=11pt]❍[url=][color=#D54E4F]  Telegram  [/url]❍ [url=][color=#BD4546]  Facebook  [/url]❍ [url=][color=#8D3334]  Reddit  [/url]❍ [url=][color=#451819]  Twitter  [/url][/b][/td][/center]

قم بالتعديل علية ويمكنك انشاء اي كود ايضا اضاقة الكود من الدرس السابق سيمكننا من الحصول علي

في الدرس القادم سوف اقوم بشرح المزيد ان شاء الله

[fouazbentraa]

موضوع جيد شكراا لك اتمنى ان نرى دروسا مثلها والشكر ايضا للذين علقو وافادونا لدي سؤال عن اهمية التوقيع وبماذا يفيد حسابك وشكراا مقدما

[muscrypto13]

موضوع جميل وشرح رائع ..من فضلك عندي سؤال : عندما أضع التوقيع لا أستطيع النقر على الموقع و إنما يظهر بالابيض و الأسود على شكل جمل

[misteid]

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

[mn754]

اول موضوع يشرح النفس وشيء جميل

[firasbc]

ماهو التوقيع ؟ في ماذا نستعمله ؟ وماذا نستفيد منه ؟ عفواً أنا عضوٌ جديد هل يمكن الاجابت عن هذه الأسئلة

[Sheikh Crypto]

شكرا اخوي لكن ما فائدة التوقيع؟؟

اولا ديكور ثانيا هنالك باونتي يمكن كسبه من خلال التوقيع فقط. 

[HossamHafez]

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