4 أفضل مواقع ربح الأموال من الأنترنيت

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

ملاحظة: - لن يظهر الزر الفعلي إلا في أجهزة الجوّال والأجهزة اللوحية (حجم الشاشة 768 بكسل). لقد أظهرنا الزر فقط للتجريبي في سطح المكتب.

بدء Step-1 (إضافة CSS)
قبل التعديل ، نوصيك بإجراء نسخة احتياطية من نموذجك ، حتى يحدث أي شيء خاطئ ، لا يزال لديك تصميم مدونتك آمنًا.

أول شيء يتعين عليك القيام به هو تسجيل الدخول إلى حساب Blogger الخاص بك والانتقال إلى >> قوالب >> تحرير HTML والبحث عن علامة النهاية]]> </ b: skin> وفوقها مباشرةً قم بلصق التعليمة البرمجية التالية.

code
/* ######## 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-footer-line -1 '> </ div>.
code
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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='&quot;whatsapp://send?text=&quot; + data:post.title + &quot; &gt;&gt; &quot; + 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>


Step-3 (Adding Fontawesome)
يعمل التطبيق المصغّر على رموز رائعة ، لذا ، لجعل عمل التطبيق المصغّر عليك تثبيت fontawesome في مدونتك ، للقيام بذلك.







في القالب ، ابحث عن العلامة </ head> وفقط فوقه قم بلصق ترميز HTML التالي.

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>

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