السلام عليكم ورحمة الله تعالى وبركاته


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

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


طريقة اضافة اضافة الأزرار :


ندخل الى البلوجر ( Blogger Dashboard ) .
نتوجه الى التخطيط ( Layout ) .
تضغط على اضافة ادات في أي مكان نريد ( Add a Gadget ) .
نحدد أداة ( HTML/JavaScript ) .
ثم نقوم بإدخال الكود code و التعديل عليه > ثم الحفظ .

الكود code :

معاينة
رمز Code:
<style>p#hb_socialicons img { /* Spinning Social Icons Widget By www.4we-eb.blogspot.com */ -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 www.4we-eb.blogspot.com */ </style> <center> <p id=&quot;hb_socialicons&quot;> <a href=&quot;رابط حسابك في الفيسبوك&quot;> <img border=&quot;0&quot; src=&quot;http://3.bp.blogspot.com/-ck0bnvgk5uI/T_fxhb7Ay-I/AAAAAAAACRY/yZR4hu8omnE/s1600/helperblogger.com-facebook.png&quot; /></a> <a href=&quot;رابط حسابك في تويتر&quot;> <img border=&quot;0&quot; src=&quot;http://4.bp.blogspot.com/-P_NkdPIsSQQ/T_fxjUKUF2I/AAAAAAAACRs/KXfA3LnHej8/s1600/helperblogger.com-twitter.png&quot; /></a> <a href=&quot;رابط حسابك في جوجل GOOGLE بلس&quot;> <img border=&quot;0&quot; src=&quot;http://1.bp.blogspot.com/-uSOHwlVeA68/T_fxiHgtoJI/AAAAAAAACRc/-UZ8ujxc7Ic/s1600/helperblogger.com-google_plus.png&quot; /></a> <a href=&quot;رابط خلاصات مواضيع مدونتك&quot;> <img border=&quot;0&quot; src=&quot;http://2.bp.blogspot.com/-2sRpqFhID4A/T_fxipoh7DI/AAAAAAAACRo/kn_qiQKBT-o/s1600/helperblogger.com-rss.png&quot; /></a> <a href=&quot;حسابك في اليوتوب&quot;> <img border=&quot;0&quot; src=&quot;http://3.bp.blogspot.com/-2wY3FQCZgoM/T_fxkMsCqtI/AAAAAAAACR4/jsNUZdVcCCg/s1600/helperblogger.com-youtube.png&quot; /></a> </p> </center

بعد وضع الكود code لا تنس تغيير ما يلي :
  • رابط حسابك على الفيسبوك
  • رابط حسابك على التويتر
  • رابط حسابك على جوجل GOOGLE بلس
  • رابط خلاصات مواضيع مدونتك
  • رابط حسابك على اليوتوب






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

المصدر :
http://4we-eb.blogspot.com/2014/01/css3.html






©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى©