اضافة المشاركات الأجتماعية بشكل احترافى وبسيط اسفل مشاركات مدونة بلوجر

اضافة المشاركات الأجتماعية بشكل احترافى وبسيط اسفل مشاركات بلوجر

اليوم سأضع لكم المشاركات الأجتماعية بشكل احترافى وبسيط اسفل مشاركات مدونة بلوجر جديدة وبسيطة وبشكل احترافى  وتم تجربتها على احدى المدونات التجربية الذى امتلكها لكى اتأكد من ان الاضافة تعمل بدون اخطاء .

بعد التجربة وتركيبها الاضافة تعمل بشكل سليم فالاضافة تحتوى على اهم مواقع التواصل الاجتماعى : facebook - twitter - pinterest - linkedin - plus.google الاضافة لا تحتوى على اى صور ولا ايقونات حتى يتم فتح المواضيع من قبل الزوار بشكل اسرع وبدون انتظار عملية التحميل لكونها تحتوى على خاصية CSS .

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

كيفية تركيب اضافة المشاركات الاجتماعية اسفل المشاركات :

قم بالبحث عن :

 ]]></b:skin>

ثم ضع فى اعلاه هذا الكود

.share-box{position:relative;padding:10px}.share-title{border-bottom:2px solid #777;color:#010101;display:inline-block;padding-bottom:7px;font-size:30px;font-weight:500;position:relative;top:2px}.share-art{float:none;padding:0;padding-top:0;font-size:15px;font-weight:400;text-transform:capitalize;text-align:center}.share-art a{color:#fff;padding:3px 8px;margin-right:4px;border-radius:2px;display:inline-block;margin-left:0;background:#010101;font-family:Droid Arabic kufi,Arial,Helvetica,Sans-serif}
.share-art a:hover{color:#fff}.share-art .fac-art{background:#3b5998}.share-art .fac-art:hover{background:rgba(49,77,145,0.7)}.share-art .twi-art{background:#00acee}.share-art .twi-art:hover{background:rgba(7,190,237,0.7)}.share-art .goo-art{background:#db4a39}.share-art .goo-art:hover{background:rgba(221,75,56,0.7)}.share-art .pin-art{background:#CA2127}.share-art .pin-art:hover{background:rgba(202,33,39,0.7)}.share-art .lin-art{background:#0077B5}.share-art .lin-art:hover{background:rgba(0,119,181,0.7)}#related-posts{margin-bottom:10px;padding:10px}

الان قم بالبحث عن

<data:post.body/>

ملحوظة : ستجد هذا الكود مكرر المطلوب هو الكود الثانى

الان بعد ما تم ايجاد الكود المطلوب ضع فى اسفلة هذا الكود

<b:if cond='data:blog.pageType == "item"'>
<div class='share-box'>
               <div class='share-art'> 
<a class='fac-art' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title="+ data:post.title' onclick='window.open(this.href, 'windowName', 'width=600, height=400, right=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-facebook'/><span class='resp_del'> Facebook</span></a>
<a class='twi-art' expr:href='"http://twitter.com/share?url=" + data:post.url + "&title=" + data:post.title' onclick='window.open(this.href, 'windowName', 'width=600, height=400, right=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-twitter'/><span class='resp_del2'> Twitter</span></a>
<a class='goo-art' expr:href='"https://plus.google.com/share?url=" + data:post.url + "&title=" + data:post.title' onclick='window.open(this.href, 'windowName', 'width=600, height=400, right=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/><span class='resp_del3'> Google+</span></a>
<a class='pin-art' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.firstImageUrl + "&description=" + data:post.snippet' onclick='window.open(this.href, 'windowName', 'width=600, height=400, right=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-pinterest'/><span class='resp_del4'> Pinterest</span></a>  
<a class='lin-art' expr:href='"http://www.linkedin.com/shareArticle?url=" + data:post.url + "&title="+ data:post.title' onclick='window.open(this.href, 'windowName', 'width=600, height=400, right=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-linkedin-square'/><span class='resp_del5'> Linkedin</span></a>
</div>
</div>
</b:if>

قم بعملية حفظ التغيرات
ثم توجهة الى المدونة وبداخل اى موضوع ستجد شكل الاضافة الاكثر من رائعة