[ilyass kéng]

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

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

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

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

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

الكود :

معاينة

<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="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

بعد وضع الكود لا تنس تغيير ما يلي :

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

ملاحظة : يمكنك أيضا تغيير الصور وذلك عن طريق تغيير رابطها من الكود .
ملاحظة : لن أسمح لكل من نقل الموضوع ولم يذكر المصدر .
المصدر : http://4we-eb.blogspot.com/2013/01/css3.html