Post Top Ad

Your Ad Spot

الأحد، 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>

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

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

إرسال تعليق

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

Post Top Ad