اضافة ازرار المشاركة على مواقع التواصل الاجتماعي مدونة بلوجر

اضافة ازرار المشاركة على مواقع التواصل الاجتماعي مدونة بلوجر

طريقة اضافة ازرار المشاركة على مواقع التواصل الاجتماعي مدونة بلوجر

ازرار المشاركة على مواقع التواصل الاجتماعي من الامور الهامة حيث تمكنك و تمكن زوار مدونتك من مشاركة المحتوي

عند مشاركة المواضيع المقالات والمنشورات على مواقع التواصل الاجتماعي سوف تصل الي اكبر عدد ممكن من الافراد

سوف تحصل على زيارات بعدد كبير من مواقع التواصل الاجتماعي مما يفيذ كثيرا الموقع و يؤدي الي نجاحة و شهرته

ازار المشاركة على مواقع التواصل الاجتماعي مدونة بلوجر بشكل احترافي جميل جذاب

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

تتميز ازرار المشاركة على مواقع التواصل الاجتماعي التي بقدمها اليوم بالشكل و التنسيق والاداء الرائع

اضافة ازرار المشاركة على مواقع التواصل الاجتماعي مدونة بلوجر

كيفية تركيب ازرار المشاركة على مواقع التواصل الاجتماعي مدونة بلوجر

من التويب المظهر قم بتحرير html القالب الخاص بك

ابحث عن ]]></b:skin> و اضف فوقة الكود التالي

.sharet-wdbloog {
  border-top: 1px solid rgba(204,204,204,0.31);
  padding: 10px 0;
  text-align: center;
  border-bottom: 1px solid rgba(204,204,204,0.31);
}
.sharet-wdbloog p {
  float: right;
  color: #315270;
  font-weight: 600;
}
.sharet-wdbloog a {
  display: inline-block;
  width: 13%;
  text-align: center;
  border-radius: 30px;
  box-shadow: 0 3px 5px 0 rgba(0,0,0,0.13);
  font-size: 15px;
  background: #315270;
  color: #fff;
  cursor: pointer;
  height: 40px;
  margin: 0 1px;
  line-height: 40px;
}
.sharet-wdbloog a:hover {
  opacity: .9;
}
.sharet-wdbloog a.share-facebook {
  background-color: #2b4170;
  background: -moz-linear-gradient(top,#3b5998,#2b4170);
  background: -ms-linear-gradient(top,#3b5998,#2b4170);
  background: -webkit-linear-gradient(top,#3b5998,#2b4170);
  background: -o-linear-gradient(top,#3b5998,#2b4170);
}
.sharet-wdbloog a.share-twitter {
  background-color: #0081ce;
  background: -moz-linear-gradient(top,#00aced,#0081ce);
  background: -ms-linear-gradient(top,#00aced,#0081ce);
  background: -webkit-linear-gradient(top,#00aced,#0081ce);
  background: -o-linear-gradient(top,#00aced,#0081ce);
}
.sharet-wdbloog a.share-gplus {
  background-color: #c33219;
  background: -moz-linear-gradient(top,#e64522,#c33219);
  background: -ms-linear-gradient(top,#e64522,#c33219);
  background: -webkit-linear-gradient(top,#e64522,#c33219);
  background: -o-linear-gradient(top,#e64522,#c33219);
}
.sharet-wdbloog a.share-linkedin {
  background-color: #0073b2;
  background: -moz-linear-gradient(top,#009cda,#0073b2);
  background: -ms-linear-gradient(top,#009cda,#0073b2);
  background: -o-linear-gradient(top,#009cda,#0073b2);
  background: -webkit-linear-gradient(top,#009cda,#0073b2);
}
.sharet-wdbloog a.share-wtsp {
  background-color: #4dc247;
  background: -moz-linear-gradient(top,#55d94f,#4dc247);
  background: -ms-linear-gradient(top,#55d94f,#4dc247);
  background: -webkit-linear-gradient(top,#55d94f,#4dc247);
  background: -o-linear-gradient(top,#55d94f,#4dc247);
}
.sharet-wdbloog a i {
  padding-left: 5px;
}

ابحث عن </body> واضف فوقة الكود التالي

<script>
//<![CDATA[
$( ".share-wtsp" ).click(function() {
var ua = navigator.userAgent.toLowerCase();
var isAndroid = ua.indexOf("android") > -1;
var Ismobile = ua.indexOf("mobile") > -1;
var isiPhone = ua.indexOf("iPhone") > -1;
if(isAndroid) {
}else if(Ismobile){
}
else if(isiPhone){
} else {
alert("لا يمكنك مشاركة التدوينة على الواتساب من الحاسوب !");
}
});
//]]>
</script>

الخطوة الاخيرة ابحث عن <data:post.body/> واضف الكود التالي بعدة اسفل منه

<div class='sharet-wdbloog'>
<p>شارك الموضوع عبر :</p>
<a class='share-facebook' expr:href='&quot;   http://www.facebook.com/share.php?v=4&amp;   src=bm&amp;   u=&quot; + data:post.url + &quot;   &amp;   t=&quot; + data:post.title' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=436&quot;   );   return false;' rel='nofollow' title='المشاركة على فيسبوك'><i class='fa fa-facebook'/><span>فيسبوك</span></a>
<a class='share-twitter' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='المشاركة على تويتر'><i class='fa fa-twitter'/><span>تويتر</span></a>
<a class='share-gplus' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' rel='nofollow' target='_blank' title='المشاركة على جوجل بلس'><i class='fa fa-google-plus'/><span>جوجل +</span></a>
<a class='share-linkedin' expr:href='&quot;http://linkedin.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='المشاركة على لينكدين'><i class='fa fa-linkedin'/><span>لينكدين</span></a>
<a class='share-wtsp' expr:data-href='data:post.url' expr:data-text='data:post.title' rel='nofollow' target='_blank' title='المشاركة على الواتساب'><i class='fa fa-whatsapp'/><span>واتساب</span></a>
</div>

سوف تظهر ايقونات المشاركة اسفل الموضوع تماما كما بالصورة في هذه المقال

قم بحفظ القالب وجرب مشاركة احد مواضيعك ومقالاتك على مواقع التواصل الاجتماعي

أضف تعليق