Subcribe to our RSS feeds Join Us on Facebook Join Us on Facebook Join Us on Facebook Follow us on Twitter Add to Circles

الجمعة، 2 يونيو، 2017

اضافة أزرار المشاركات الاجتماعية اسفل مواضيع مدونة بلوجر بتقنية CSS

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

اليوم سأضع لكم اضافة بدون صور او ايقونات فهى بتقنية CSS لعدم اخذ وقت فى عملية تحميل صفحة المدونة ولقد اخترت لكم اهم المواقع الأجتماعية : facebook- twittter - plus.google - linkedin


كيفية عرض ازرار المشاركات الاجتماعية بتقنية CSS

قم بالبحث عن هذا الكود :
]]></b:skin>
ضع فى الاعلى مباشرة هذا الكود :
.widgetshare {font:bold 12px/20px Tahoma !important; background: #333;border: 1px solid #444; padding: 5px 4px; color: #fff !important; margin-top: 60px;}
.widgetshare a{font:bold 12px/20px Tahoma !important; text-decoration: none !important; padding: 5px 4px; color: #fff !important; border: 1px solid #222; transition: all 1s ease;}
.widgetshare a:hover {box-shadow: 0 0px 0px #00ff00; border: 1px solid #e9fbe9;}
.fcbok { background: #3B5999; }
.twitt { background: #01BBF6; }
.gplus { background: #D54135; }
.lkdin { background: #005a87; }
ثم قم بالبحث عن هذا الكود :
<data:post.body/>
قد تجدة مكرر دائما يكون الكود الثانى 
ضع اسفلة مباشرة هذا الكود :
<div class='widgetshare'>
<a class='fcbok' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' rel='nofollow' target='_blank'>Facebook</a> 
<a class='twitt' expr:href='&quot;http://twittter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Twitter</a> 
<a class='gplus' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Google+</a>
<a class='lkdin' expr:href='&quot;http://www.linkedin.com/cws/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Linkedin</a>
</div>
بالاخير اضغط على حفظ 

ملحوظة هامة : الكود المحدد باللون الاحمر رقم 60 يعنى بأن الاضافة يتم تحريكها الى الاعلى او الاسفل فعند اضافة رقم اكبر يتم تحريك الاضافة الى اسفل واذا قمت بتقليل الرقم يتم اعتلاة الاضافة اتمنى بأن المعلومة وضحت للجميع .

اتمنى بأن الاضافة اعجبتكم واى استفسار اترك تعليق وسأقوم بالرد علية 
(( لا خير فى كاتم العلم ))

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

إرسال تعليق

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