الأحد، 11 يونيو، 2017

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

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

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

بعد التجربة وتركيبها الاضافة تعمل بشكل سليم فالاضافة تحتوى على اهم مواقع التواصل الاجتماعى : 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 == &quot;item&quot;'>
<div class='share-box'>
               <div class='share-art'> 
<a class='fac-art' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, right=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-facebook'/><span class='resp_del'> Facebook</span></a>
<a class='twi-art' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, right=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-twitter'/><span class='resp_del2'> Twitter</span></a>
<a class='goo-art' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, right=24, top=24, scrollbars, resizable&apos;); 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='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.firstImageUrl + &quot;&amp;description=&quot; + data:post.snippet' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, right=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-pinterest'/><span class='resp_del4'> Pinterest</span></a>  
<a class='lin-art' expr:href='&quot;http://www.linkedin.com/shareArticle?url=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, right=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-linkedin-square'/><span class='resp_del5'> Linkedin</span></a>
</div>
</div>
</b:if>

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

ليست هناك تعليقات :

إرسال تعليق

قال تعالى ( مَا يَلْفِظُ مِن قَوْلٍ إِلا لَدَيْهِ رَقِيبٌ عَتِيدٌ )

الموافقة على نشر التعليقات

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