إضافة أزرار مشاركة على مواقع التواصل الإجتماعى

 

مرحباً متابعين مستر.نت الأعزاء وزوارنا الكرام - أقد لك اليوم أزرار المشاركة علي مواقع التواصل الأجتماعي بشكل إحترافي جداً و خفيف جداً علي القوالب، هذه الأزار هي نفسها الذي نستخدمها في مستر.نت تستطيع معاينة الازرار في أسفل المقال.

محتويات المقال

• التثبيت
• ملاحظات
  • الأيقونات لأ تظهر
    • أزالة الأزرار القديمة
• الخاتمة

التثبيت

 لا تنسي أخذ نسخة إحتياطية من القالب

انتقل إلى لوحة تحكم بلوجر  المظهر  انقر فوق  وقم بوضع الكود التالي أعلي الوسم ]]></b:skin>

للبحث في أي شيء في بلوجر اضغط على Ctrl + F واكتب أو الصق المصطلح للبحث في شريط البحث.

/*!
    * Simple Social Buttons v1.0
    * Copyright 2020 Mint Web
    */
    /*! الأساسية (لا تعدل) {{*/
    .mint-share {
    box-sizing: border-box;
    margin-top: calc(var(--mint-share-spacing) * -1);
    margin-right: calc(var(--mint-share-spacing) * -1);
    }
    .mint-share-item {
    margin-right: var(--mint-share-spacing);
    margin-top: var(--mint-share-spacing);
    }
    .mint-share-item,
    .mint-share-item:hover,
    .mint-share-item:active {
    text-decoration: none;
    color: inherit;
    }
    .mint-share-item {transition: background .3s, color .3s;}
    .mint-share-item i {
    transition: transform .3s;
    margin: 0;
    }
    .mint-share, .mint-share-item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    }
    .mint-share-fb {background-color: var(--mint-share-facebook);}
    .mint-share-tt {background-color: var(--mint-share-twitter);}
    .mint-share-pt {background-color: var(--mint-share-pinterest);}
    .mint-share-tb {background-color: var(--mint-share-tumblr);}
    .mint-share-rd {background-color: var(--mint-share-reddit);}
    .mint-share-vk {background-color: var(--mint-share-vk);}
    .mint-share-ws {background-color: var(--mint-share-whatsapp);}
    .mint-share-tlg {background-color: var(--mint-share-telegram);}
    .mint-share-msj {background-color: var(--mint-share-email);}
    
    .mint-share-fb:hover {color: var(--mint-share-facebook);}
    .mint-share-tt:hover {color: var(--mint-share-twitter);}
    .mint-share-pt:hover {color: var(--mint-share-pinterest);}
    .mint-share-tb:hover {color: var(--mint-share-tumblr);}
    .mint-share-rd:hover {color: var(--mint-share-reddit);}
    .mint-share-vk:hover {color: var(--mint-share-vk);}
    .mint-share-ws:hover {color: var(--mint-share-whatsapp);}
    .mint-share-tlg:hover {color: var(--mint-share-telegram);}
    .mint-share-msj:hover {color: var(--mint-share-email);}
    
    .mint-share-item:hover i {transform: rotate(360deg);}
    /*}} Fin del core {{*/
    
    /*! التخصيص */
    /* الحاوية
    -----------------------------------------*/
    .mint-share {
    --mint-share-spacing: .5rem; 
    padding-top:0; 
    padding-bottom:0; 
    }
    /* الشبكات الاجتماعية
    -----------------------------------------*/
    .mint-share {
    --mint-share-facebook: #1778F2;
    --mint-share-twitter: #55ACEE;
    --mint-share-pinterest: #F0002A;
    --mint-share-tumblr: #35465C;
    --mint-share-reddit: #FF4500;
    --mint-share-vk: #4376A6;
    --mint-share-whatsapp: #4FCE5D;
    --mint-share-telegram: #0088CC;
    --mint-share-email: #464EB8;
    }
    /* الازرار
    -----------------------------------------*/
    .mint-share-item {
    font-size: 22px; /* حجم الرمز */
    width: 48px; /* العرض */
    height: 48px; /* الطول */
    border-radius: .5rem; /* حواف مدورة */
    color: #fff; /* اللون */
    box-shadow: 0 3px 5px -1px rgba(0,0,0,.1),
    0 2px 5px -1px rgba(0,0,0,.05); /* ظل */
    }
    .mint-share-item:hover {
    background-color: #fff; /* الخلفية */
    }
    

الأن قم بالبحث عن <b:includable id='status-message'> وقم بوضع الكود التالي فوقه/أعلاه مباشرة

<b:includable id='postNewShare'>
    <div class='mint-share'>
    <b:with value='data:post.shareUrl ?: data:post.sharePostUrl' var='share'>
    <b:with value='data:view.url.canonical' var='url'>
    <b:loop index='i' values='{"facebook","twitter","pinterest"}' var='target'>
    <a class='mint-share-item' expr:href='params(data:share,{target: data:target})' target='_blank'>
    <b:class expr:name='"mint-share-" + (data:i == 0 ? "fb" : (data:i == 1 ? "tt" : "pt"))'/>
    <i expr:class='"fab fa-" + data:target'></i>
    </a>
    </b:loop>
    <b:with value='"mint-share-item mint-share-"' var='class'>
    <!-- tumblr -->
    <a expr:href='params("https://tumblr.com/share",{canonicalUrl: data:url})' target='_blank'>
    <b:class expr:name='data:class + "tb"'/><i class="fab fa-tumblr"></i>
    </a>
    <!-- reddit -->
    <a expr:href='params("https://reddit.com/submit",{url: data:url, title: data:post.title})' target='_blank'>
    <b:class expr:name='data:class + "rd"'/><i class="fab fa-reddit-alien"></i>
    </a>
    <!-- vk -->
    <a expr:href='params("https://vk.com/share.php",{url: data:url})' target='_blank'>
    <b:class expr:name='data:class + "vk"'/><i class="fab fa-vk"></i>
    </a>
    <!-- whatsapp -->
    <a expr:href='params("https://api.whatsapp.com/send",{text: data:url})' target='_blank'>
    <b:class expr:name='data:class + "ws"'/><i class="fab fa-whatsapp"></i>
    </a>
    <!-- telegram -->
    <a expr:href='params("https://t.me/share/url",{url: data:url})' target='_blank'>
    <b:class expr:name='data:class + "tlg"'/><i class="fab fa-telegram-plane"></i>
    </a>
    <!-- email -->
    <a expr:href='params(data:share,{target: "email"})' target='_blank'>
    <b:class expr:name='data:class + "msj"'/><i class="fas fa-envelope"></i>
    </a>
    </b:with><!--/ data:class -->
    </b:with><!--/ data:url -->
    </b:with><!--/ data:share -->
    </div><!--/ .mint-share -->
    </b:includable>

كخطوة أخيرة ، سنقوم بتحديد المكان الذي نريد إظهار الأزرار فيه ، فعادة ما يكون المكان الأكثر شيوعًا أسفل <data:post.body/> , لذا ابحث عن ذلك والصق الكود التالي أدناه:

<b:include cond='data:post.sharePostUrl or data:post.shareUrl' name='postNewShare'/>

ملاحظات

الأيقونات لأ تظهر

تستخدم هذه الأزرار مكتبة أيقونات Font Awesome ، وبالتالي ، إذا لم تتمكن من رؤية الأيقونات، فهذا يعني أنه ليس لديك المكتبة مثبتة ، لحل ذلك قم بابحث </body> و فوقه قم بوضع الكود التالي:

<link href='//cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5/css/all.min.css' rel='stylesheet'/>

أزالة الأزرار القديمة

ربما عند تثبيت هذه الأزرار ، ستلاحظ أن لديك 2 ، حيث يكون أحدهما هو الذي يأتي افتراضيًا في القالب الخاص بك. لإزالتها ، ابحث عن الكود التالي:

 

<b:include name='postShare'/>

وحذفه. في حالة تعذر العثور على الرمز أعلاه ، فربما تستخدم قالب بلوجر يستند إلى Blogger Layout 2 ، وفي هذه الحالة ، يكون الكود المطلوب البحث عنه وإزالته كما يلي: 

<b:include name='shareButtons'/>

إذا كنت لا تزال غير قادر على إزالة الأزرار القديمة ، فأخبرني في التعليقات ، وسأحاول مساعدتك. 

الخاتمة

هذا كل شيء في الوقت الحالي ، لا تنس مشاركة أزرار المشاركة هذه. إذا كان لديك أي أسئلة ، اتركها في التعليقات ، سأجيب على الجميع كلما استطعت. شكرا لزيارتكم.