تطبيق ToonMe لإنشاء صور بأسلوب الكرتون

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

مميزات الأداة

1← الأداة عبارة عن صفحة و إضافة في نفس الوقت وسنتعرف على ذالك في بقية الشرح .

2← شكل جميل وانيق وكذالك متجاوبة مع مختلف الأجهزة .

3← تحكم كامل من التخطيط وعبر اداة روابط .

4← استخدامها كـ صفحة عبر كود قصير .

5← تقوم بعرض صورة و وصف و كذالك رتبة للكاتب .

6← امكانية عرض 5 ايقونات للتواصل الإجتماعي : فيسبوك - تويتر - يوتيوب - إنستجرام - موقع .

ماذا تحتاج هذه الاداة ؟

تحتاج هذه الأداة شئين فقط : مكتبة فونت اوسم و مكتبة جيكويري فقط و موجودة في اغلب القوالب المنشورة على الأنترنيت . كما يمكنك اضافة المكتبتين من خلال إضافة الكود التالي فوق <body/> .

<!--  jquery  -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js'></script>
<!-- Font icon -->
<link href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>

ملحوظة ... في النسخة القادمة سيتم دعم ايقونات svg لـ ضمان اشتغالها على جميع القوالب .

طريقة تركيب اأداة

1← قم بالتوجه الى لوحة التحكم بلوجر .

2← يمكنك إستعمال CTRL + C للنسخ و CTRL + V للصق الأكواد داخل محرر الأكواد .

3← يمكنك إستعمل CTRL + F من اجل إظهار محرك البحث بعد الضغط داخل محرر الأكواد .

4← تابع الخطوات التالية من اجل تركيب الأداة بدون أخطاء ↓ .

- الخطوة الأولى -

1← توجه الى التخطيط/التنسيق ← أضف اداة قائمة الروابط .

2← سمي الأداة بإسم مميز حتى يسهل عليك البحث عليها .

3← الآن إنتقل الى المظهر ← ثم قم بالضغط على تعديل HTML .

4← إبحث عن نفس الإسم الذي سميت به الأداة , ليظهر معك كما يوضح في الصورة ادناه ↓ .

5← الأن قم بإستبدال كود الأداة بـ الكود التالي : .

   <b:widget id='LinkList900' locked='true' title='إعدادات المؤلف' type='LinkList' version='2' visible='true'>
    <b:widget-settings>
      <b:widget-setting name='text-10'>twitter</b:widget-setting>
      <b:widget-setting name='sorting'>NONE</b:widget-setting>
      <b:widget-setting name='link-1'>//1.bp.blogspot.com/-ESNohcQwLLw/XpMSWufVsDI/AAAAAAAAL6A/CwoGs_SvD5EZW0Hy36AqbW0neIQCciXvACK4BGAYYCw/s1600/%25D9%25A2%25D9%25A0%25D9%25A1%25D9%25A9%25D9%25A0%25D9%25A9%25D9%25A1%25D9%25A7_%25D9%25A0%25D9%25A9%25D9%25A5%25D9%25A4%25D9%25A1%25D9%25A3%2B%25283%2529%2B%25281%2529.png</b:widget-setting>
      <b:widget-setting name='link-13'>linkfacebook</b:widget-setting>
      <b:widget-setting name='link-2'>هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة&#1548; لقد تم توليد هذا النص من مولد النص العربى&#1548; حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق.</b:widget-setting>
      <b:widget-setting name='link-12'>http://</b:widget-setting>
      <b:widget-setting name='link-0'>مبروك تك - mabrouk tec</b:widget-setting>
      <b:widget-setting name='link-11'>http://</b:widget-setting>
      <b:widget-setting name='link-10'>http://</b:widget-setting>
      <b:widget-setting name='text-9'>globe</b:widget-setting>
      <b:widget-setting name='link-9'>https://www.mabrouktec.com/</b:widget-setting>
      <b:widget-setting name='text-8'>allow-author</b:widget-setting>
      <b:widget-setting name='link-7'>#000</b:widget-setting>
      <b:widget-setting name='link-8'>true</b:widget-setting>
      <b:widget-setting name='link-5'>تابعني</b:widget-setting>
      <b:widget-setting name='link-6'>#901a3a</b:widget-setting>
      <b:widget-setting name='link-3'>مبرمج</b:widget-setting>
      <b:widget-setting name='link-4'>https://www.mabrouktec.com/</b:widget-setting>
      <b:widget-setting name='text-1'>author-img</b:widget-setting>
      <b:widget-setting name='text-0'>author-name</b:widget-setting>
      <b:widget-setting name='text-3'>author-badge</b:widget-setting>
      <b:widget-setting name='text-2'>author-about</b:widget-setting>
      <b:widget-setting name='text-5'>profile-txt</b:widget-setting>
      <b:widget-setting name='text-4'>author-profile</b:widget-setting>
      <b:widget-setting name='text-7'>txt-color</b:widget-setting>
      <b:widget-setting name='text-6'>author-color</b:widget-setting>
      <b:widget-setting name='text-11'>instagram</b:widget-setting>
      <b:widget-setting name='text-12'>youtube</b:widget-setting>
      <b:widget-setting name='text-13'>facebook</b:widget-setting>
    </b:widget-settings>
    <b:includable id='main'>
  <b:include name='content'/>
</b:includable>
 <b:includable id='content'>
<b:if cond='data:view.isPost or data:blog.url == &quot;https://www.mtec.com/p/author.html&quot;'>
<b:tag name='script' type='text/javascript'>mabrouktec={<b:loop index='i' values='data:links' var='link'>&quot;<data:link.name/>&quot;:<b:if cond='data:link.target in {true,false}'><data:link.target/><b:else/>&quot;<data:link.target/>&quot;</b:if><b:if cond='data:links.length gt (data:i+1)'>,</b:if></b:loop>}</b:tag>
<div id='soc-mtec'><ul><b:loop index='i' values='data:links' var='link'><b:if cond='data:link.name in {&quot;facebook&quot;}'>
<li><a expr:class='&quot;soc-mabrouktec fa fa-&quot; + data:link.name' expr:href='data:link.target' expr:title='data:link.name' rel='nofollow noopener' target='_blank'/></li></b:if></b:loop><b:loop index='i' values='data:links' var='link'><b:if cond='data:link.name in {&quot;youtube&quot;}'><li><a expr:class='&quot;soc-mabrouktec fa fa-&quot; + data:link.name' expr:href='data:link.target' expr:title='data:link.name' rel='nofollow noopener' target='_blank'/></li></b:if></b:loop><b:loop index='i' values='data:links' var='link'><b:if cond='data:link.name in {&quot;twitter&quot;}'><li><a expr:class='&quot;soc-mabrouktec fa fa-&quot; + data:link.name' expr:href='data:link.target' expr:title='data:link.name' rel='nofollow noopener' target='_blank'/></li></b:if></b:loop><b:loop index='i' values='data:links' var='link'><b:if cond='data:link.name in {&quot;instagram&quot;}'><li><a expr:class='&quot;soc-mabrouktec fa fa-&quot; + data:link.name' expr:href='data:link.target' expr:title='data:link.name' rel='nofollow noopener' target='_blank'/></li></b:if></b:loop><b:loop index='i' values='data:links' var='link'><b:if cond='data:link.name in {&quot;globe&quot;}'><li><a expr:class='&quot;soc-mabrouktec fa fa-&quot; + data:link.name' expr:href='data:link.target' expr:title='data:link.name' rel='nofollow noopener' target='_blank'/></li></b:if></b:loop></ul></div><div id='by-mabrouktec'><div class='mabtec-author-profile'><div class='mab-tec'><div class='mabrouk__tec'><div class='aut'><span><div id='mtec-author-badge'/></span><div id='mtec-author-img'/></div><div class='author-name'><div id='mtec-author-name'/></div><div class='author-desc'><div id='mtec-author-about'/></div><div id='mtec-author-soc'/><div id='mtec-author-profile'/></div></div></div></div></b:if>
</b:includable>
  </b:widget>

- الخطوة الثانية -

1← إبحث عن الوسم <data:post.body/> وأضف كود الـ HTML التالي و المسؤول عن إظهار الأداة تحته مباشرة .

<!-- author Start -->
<div id='author-profil'></div>
<!-- author End -->

2← الأن بعد الإنتهاء ابحث عن الوسم </BODY> و اضف كود الـ JS التالي فوقه مباشرة .

<!-- author JS -->
<script src='//cdn.jsdelivr.net/gh/mabrouk22/mabb/mtec.min.js'/>

ملحوظة ... تم رفع اكواد الـ JS على إستضافة خارجية حتى لا تأثر الإضافة على سرعة القالب .

3← قم بالضغط على حفظ المظهر .

تخصيص الاداة

- أولا - توجه الى التخطيط و ابحث عن أداة تحت إسم ← إعدادات المؤلف → .
- ثانيا - ستجد أن الأداة تم إعدادها بالشكل التالي :

- ثالثا - قم بالإطلاع على الخيارات المتوفرة في اعدادات الاداة :

الإدخال	الوظيفة	القيمة الإفتراضية
author-name	إدخال خاص بتغيير الإسم الخاص بالكاتب	مبروك تك - mabrouk tec
author-img	إدخال خاص بتغيير رابط الصورة البديلة للكاتب	صورة
author-about	إدخال خاص بتغيير نبذة عن الكاتب	..........
author-badge	إدخال خاص بتغيير رتبة الكاتب	مبرمج
author-profile	إدخال خاص بتغيير رابط الملف الشخصي للرابط	رابط
profile-txt	إدخال خاص بتغيير نص - author-profile -	الملف الشخصي
author-color	إدخال خاص بتغيير لون الاداة	#901a3a
txt-color	إدخال خاص بتغيير لون نص الأداة	#000000
allow-author	إدخال خاص بتشغيل و تعطيل الأداة - للتشغيل true للتعطيل false	true

إعداد صفحة المؤلف

1← توجه الى الصفحات ← ثم إنشاء صفحة جديد .

2← قم بالتوجه الى تبويب HTML - ثم الصق الكود التالي داخل محرر الأكواد :

<!-- author Start -->
<div id='author-profil'></div>
<!-- author End -->

3← قم بنشر الصفحة و عرضها .

4← انسخ رابط الصفحة ← ثم قم بالدخول الى تعديل html و ابحث عن ← https://www.mtec.com/p/author.html → .

5← بعد العثور على الرابط المطلوب إستبدله برابط الصفحة التي قمت بإنشائها سابقا .

6← إضغط على حفظ المظهر وإذهب الى الصفحة للمعاينة .

- رابعا - طريقة اضافة ايقونات للأداة :
الاضاافة تدعم 5 ايقونات للتواصل الاجتماعي وهي :
youtube - twitter - instagram - globe - facebook - حيث يتم اضافتهم من الإعدادات بالشكل الآتي .

شرح مصور

نأسف عن جودة الصوت وكذالك ردائة الشرح بسبب قلة النوم والتعب .

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