منتدى دعم PBBoard الرسمي
(نسخة قابلة للطباعة من الموضوع)
https://pbboard.info/forums/t17986
أنقر هنا لمشاهدة الموضوع بهيئته الأصلية

اضافة جميع ايقونات التواصل الأجتماعي لمنتداك في كود واحد
Mahaq11 23-06-2015 09:05 مساءً

كود اضافة ايقونات التواصل الأجتماعي لمنتداك


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

dyl6cect



نبدأ ان شاء الله :

طريقة اضافة اضافة الأزرار :
  • ندخل الى لوحة إدارة المنتدى
  • نتوجه الى اعلانات أدسنس ثم اضافة اعلان ادسنس جديد وتحدد المكان اسفل المنتدى مثلاً .
  • ثم نقوم بإدخال الكود و التعديل عليه > ثم الحفظ .
ال كود :
CODE
<style>p#hb_socialicons img {
/* Spinning Social Icons Widget By pbboard */
    -moz-transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

p#hb_socialicons img:hover {
    -moz-transform: rotate(120deg);
    -webkit-transform: rotate(120deg);
    -o-transform: rotate(120deg);
    -ms-transform: rotate(120deg);
    transform: rotate(120deg);
}

/* Spinning Social Icons Widget By pbboard */
</style>



<center>
<p id="hb_socialicons">
<a href="رابط حسابك في الفيسبوك">
<img border="0" src="http://3.bp.blogspot.com/-ck0bnvgk5uI/T_fxhb7Ay-I/AAAAAAAACRY/yZR4hu8omnE/s1600/helperblogger.com-facebook.png" /></a>
    <a href="رابط حسابك في تويتر">
<img border="0" src="http://4.bp.blogspot.com/-P_NkdPIsSQQ/T_fxjUKUF2I/AAAAAAAACRs/KXfA3LnHej8/s1600/helperblogger.com-twitter.png" /></a>
    <a href="رابط حسابك في جوجل بلس">
<img border="0" src="http://1.bp.blogspot.com/-uSOHwlVeA68/T_fxiHgtoJI/AAAAAAAACRc/-UZ8ujxc7Ic/s1600/helperblogger.com-google_plus.png" /></a>
    <a href="رابط خلاصات مواضيع مدونتك">
<img border="0" src="http://2.bp.blogspot.com/-2sRpqFhID4A/T_fxipoh7DI/AAAAAAAACRo/kn_qiQKBT-o/s1600/helperblogger.com-rss.png" /></a>
    <a href="حسابك في اليوتوب">
<img border="0" src="http://3.bp.blogspot.com/-2wY3FQCZgoM/T_fxkMsCqtI/AAAAAAAACR4/jsNUZdVcCCg/s1600/helperblogger.com-youtube.png" /></a>
</p>
</center>


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

منتدى دعم PBBoard الرسمي

Copyright © 2009-2024 PBBoard® Solutions. All Rights Reserved