السلام عليكم و رحمة الله تعالى و بركاته
مرحبا بكم في موضوع جديد و حصري نقدم لكم فيه اضافة اداة المشاركة عبر مواقع التواصل للبلوجر و هذه اضافة مهمة جدا اذ تكسب متابعين و قراء جدد لموقعك او مدونتك و اكثر ما يميز هذه الاضافة هو زر الواتساب و تاثيراتها الاحترافية.
شرح التركيب:
اولا توجه الى لوحة التحكم في مدونتك ثم مظهر ثم تعديل html.
ثانيا:
ابحث عن الوسم ]]></b:skin> و ضع الكود التالي فوقه:
.sharet { 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- p { float: right; color: #315270; font-weight: 600;}.sharet- 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- a:hover { opacity: .9;}.sharet-g 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- 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- 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- 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- 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- 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='" http://www.facebook.com/share.php?v=4& src=bm& u=" + data:post.url + " & t=" + data:post.title' onclick='window.open(this.href," sharer" ," toolbar=0,status=0,width=626,height=436" ); return false;' rel='nofollow' title='المشاركة على فيسبوك'><i class='fa fa-facebook'/><span>فيسبوك</span></a><a class='share-twitter' expr:href='"http://twitter.com/share?url=" + data:post.url' rel='nofollow' target='_blank' title='المشاركة على تويتر'><i class='fa fa-twitter'/><span>تويتر</span></a><a class='share-gplus' expr:href='"http://plus.google.com/share?url=" + data:blog.url' rel='nofollow' target='_blank' title='المشاركة على جوجل بلس'><i class='fa fa-google-plus'/><span>جوجل +</span></a><a class='share-linkedin' expr:href='"http://linkedin.com/share?url=" + 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>
بعدها احفظ القالب و مبروك عليك الاضافة.
ليست هناك تعليقات: