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

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

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


    تعديل المشاركة
    author-img

    Mabrouk tec

      11 تعليقًا
      إرسال تعليق
      • Anas Elsayed photo
        Anas Elsayed27 أغسطس 2020 في 2:10 م

        انتي لاغي copy من المدونه ؟ لازم انزل التكست الرابط فيها مش شغال ؟
        ليه الغلبه دي ؟

        إرسال تعليقحذف التعليق
        • Mabrouk tec photo
          Mabrouk tec27 أغسطس 2020 في 2:39 م

          مرحبا صديقي نعتذر عن الخطأ المترتب عن ذالك تم إصلاح الكل

          حذف التعليق
        • AWRAQ photo
          AWRAQ28 أغسطس 2020 في 6:48 ص

          يعطيك العافية
          سؤال هل هذه الاضافة حجمها كبير تؤثر على سرعة القالب؟
          لأن مدونتي بطيئة، Very slow حسب إليكسا فهل تنصحني بإضافتها أم لا؟
          https://www.awraqtech.com/

          إرسال تعليقحذف التعليق
          • Mabrouk tec photo
            Mabrouk tec28 أغسطس 2020 في 1:32 م

            الله يبارك فيك صديقي الغالي ،
            الشيء الوحيد في الاضافة الذي يؤثر على السرعة هي اكواد JS و هي مرفوعة على إستضافة حتى لاتؤثر على السرعة ، لذالك لاتقلق وركبها .

            حذف التعليق
            • AWRAQ photo
              AWRAQ29 أغسطس 2020 في 5:05 ص

              شكراً جزيلاً لك

              حذف التعليق
              • Mabrouk tec photo
                Mabrouk tec31 أغسطس 2020 في 4:05 ص

                العفو صديقي ..شرفتنا بمرورك

                حذف التعليق
              • Mohammed Anwar photo
                Mohammed Anwar1 سبتمبر 2020 في 2:07 م

                ضيف معاينه

                إرسال تعليقحذف التعليق
              • Artist Abram photo
                Artist Abram15 نوفمبر 2020 في 10:17 م

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

                إرسال تعليقحذف التعليق
                • Mabrouk tec photo
                  Mabrouk tec16 نوفمبر 2020 في 8:16 ص

                  مشكور للمرورك أخي .. نعم يسعدني وبكل سرور تنفيذ طلبك لكن أريد بعض التفاصيل لتنفيذ الشرح , ارجو من حضرتك التواصل معانا عبر الصفحة [ https://www.facebook.com/mabrouktec1 ] او الواتساب [ https://wa.me/message/B4HRBDHT7JAPN1
                  ] لجمع بعض التفاصيل لو سمحت .

                  حذف التعليق
                • News2427 يناير 2021 في 2:18 ص

                  أزال المؤلف هذا التعليق.

                  إرسال تعليقحذف التعليق
                  الاسمبريد إلكترونيرسالة

                  google-playkhamsatmostaqltradent