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

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


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


التثبيت

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

انتقل إلى لوحة تحكم بلوجر المظهر انقر فوق وقم بوضع الكود التالي أعلي الوسم ]]></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'/>

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


الخاتمة

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

اقرأ أيضًا: