أصبح WhatsApp جزءا أساسيا من حياتنا اليومية، فهو يساعدنا على التواصل مع أصدقائنا وعائلتنا بأسهل طريقة ممكنة. للسماح لك باستخدام سهولة الوصول إلى هذا التطبيق المذهل قدمنا لك شرح حول كيفية إضافة زر مشاركة Whatsapp في مدونة بلوجر. معظم التطبيقات المصغرة المتوفرة على الإنترنت مخصصة فقط ل WordPress أو لأي منصة أخرى، وتلك التي تدعي أنها تعمل على مدون هي عربات التي تجرها الدواب ومعظم الوقت لا يعمل بشكل صحيح، ولكن هنا نشرنا تعليميًا يعمل بشكل مثالي تمامًا وفوضى مجاني ولكنه يحمل أيضا ملفات تعريف وسائط اجتماعية أخرى، لكننا قمنا في هذه المرة بإضافة زر مشاركة WhatsApp فقط. لذا، دعنا نتحرك أكثر ونرى كيفية إضافة زر مشاركة واتس اب في مدونتك. يمكنك التحقق من معاينة مباشرة من القطعة أدناه.
ملاحظة : سوف يظهر الزر الفعلي فقط في الأجهزة المحمولة والأجهزة اللوحية (حجم الشاشة 768 بكسل). لقد أظهرنا الزر فقط للعرض التجريبي في سطح المكتب.
الخطوة 1 : (إضافة CSS)
قبل التحرير ، نوصيك بعمل نسخة احتياطية من القالب الخاص بك، بحيث لا يزال هناك أي خطأ في تصميم مدونتك.
أول شيء عليك القيام به هو تسجيل الدخول إلى حساب Blogger الخاص بك والانتقال إلى >> Templates >> Edit HTML والبحث عن النهاية ]]> </ b: skin> ولصق الشفرة أعلاه .
/* ######## Whatsapp Sharing Widget By Sorabloggingtips.com ######################### */
.share-box {
position: relative;
padding: 10px;
}
.share-title {
border-bottom: 2px solid #777;
color: #010101;
display: inline-block;
padding-bottom: 7px;
font-size: 15px;
font-weight: 500;
position: relative;
top: 2px;
float:left;
}
.share-art {
float: left;
padding: 0;
padding-top: 0;
font-size: 13px;
font-weight: 400;
text-transform: capitalize;
}
.share-art a {
color: #fff;
padding: 3px 8px;
margin-left: 4px;
border-radius: 2px;
display: inline-block;
margin-right: 0;
background: #010101;
}
.share-art a:hover{color:#fff}
.share-art .wat-art{background:#25d266;display:none;}
.share-art .wat-art:hover{background:rgba(37, 210, 102, 0.73)}
@media only screen and (max-width: 768px) {
.share-art .wat-art{display:inline-block;}
}
الخطوة 2 : (إضافة HTML)
في القالب ، ابحث عن العلامة <data: post.body /> وأدناه ، قم بلصق ترميز HTML التالي. في هذه الحالة، لا يمكنك العثور على <data: post.body />، ثم يمكنك لصقها أسفل <div class = 'post-footer'> أو <div class = 'post-footer-line post-line-line -1 '> </ div>.
<b:if cond='data:blog.pageType == "item"'><div class='share-box'> <h8 class='share-title'>Share This:</h8> <div class='share-art'> <whatsapp expr:href='data:post.url' expr:text='data:post.title'/> <a class='wat-art' expr:href='"whatsapp://send?text=" + data:post.title + " >> " + data:post.url' rel='nofollow' target='_blank'><i class='fa fa-whatsapp'/><span class='resp_del5'> Whatsapp</span></a> </div> </div> <div style='clear:both'/> </b:if>
ملاحظة : إذا كنت تريد عرض عنصر واجهة المستخدم في كل صفحة (الصفحة الرئيسية ، صفحة النشر، صفحة الفهرس، صفحة البحث ، صفحة الأرشيف وما إلى ذلك) ، ثم قم بإزالة الخطوط التي تم وضع علامة باللون الأحمر من الرمز أعلاه.
الخطوة 3 : (إضافة Fontawesome)
تعمل الأداة المصغرة على أيقونات fontawesome، حتى تعمل الأداة على تثبيت الخط في مدونتك ، للقيام بذلك.
في القالب، ابحث عن العلامة </head> وفوقها، قم بلصق ترميز HTML التالي.
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>