U3F1ZWV6ZTExMjI1NjE2ODE2X0FjdGl2YXRpb24xMjcxNzA3NTMyMjc=

أضافة أداة معلومات عن الكاتب اسفل المواضيع

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



  • 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 - حيث يتم اضافتهم من الإعدادات بالشكل الآتي .

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

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

    الاسمبريد إلكترونيرسالة