اضافة أزرار مواقع التواصل الاجتماعي للبلوجر

السلام عليكم و رحمة الله تعالى و بركاته اخواني و اخواتي و كل متتبعي مدونة المحترف العربي للمعلوميات

مرحبا بكم مجددا مع طريقة اضافة ازرار مواقع التواصل الاجتماعي 

هذه الازرار مصممة ليتم وضعها في النافبار او اي قائمة افقية في الموقع

و هذا لكي تظهر بشكل اجمل ..

الان طريقة الاضافة :

اولا نبحث عن الوسم  ]]></b:skin>

و نضع فوقه مباشرة الكود التالي :

/*---------------social-icons----------------*/ #social-icons{float:left;margin:0; padding: 5px 10px;} #social-icons a {margin: 0;padding: 0 3px;} #social-icons a img { -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; } #social-icons a img:hover {opacity:0.8;transition:1s; -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); }

مع تغيير ما يلي :
float : مكان تواجد الايقونات left or right 
rotate : درجة الدوران

ثم نذهب الى المكان الذي نريد وضع الايقونات فيه و نضع الكود التالي :

<div id='social-icons'> <a href='رابط صفحتك على فيسبوك'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0GaHm-y_c8-KwSlnvaFvG_D-WMgb_TMZvEd5b4NAqUPAUHGi97fnho1mlHrCbNzlR1kXNoFxHUJZkycovEsBA8URemlP8F0YNwBGYZBG4Xx_xzJ18vapi0Cw15Z7T-heclZnSQXrCa992/s1600/Active-Facebook-icon.png' title='fb'/></a> <a href='حسابك على قوقل بلاس'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIh7VjNMY_CQJGgG4qxA2TTOBlLtku-v9l0_8pHCnSDUMzkF1FXcWo5u7o9W__Z1AHakrhTqbiE0YoeE8vo3P6m7D8wfswInTEvcNN9GKx3sL0QSVvpxBNZfObppfSIB9-4kqr7rd0YXXq/s1600/Active-Google-plus-icon.png' title='google+'/></a> <a href='حسابك على موقع بينتريست'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1cdZaeJQzc5OICemz3Ad4chJX1vLjYBo0xb4nRrpthSJhyphenhyphenWkQum88wAyDtj8KW2Kw83Ltdu5LTj1nu5cTcsQ9CSZiJtGFwoDZ2tb17LEBzn_iBFUAZbqs81J3Y7dXdYAxMgqrvjujYz5U/s1600/Active-Pinterest-icon.png' title='pinterest'/></a> <a href='رابط الفيدزبارنر'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxLBApDOfiRnJioK_w8yNYBkMB6cRC0QWC2JDub81_6dUutZumBM67dtKpFI8ClTKGiwVb873rOVLy_lBRWXkO1e_67moeOqQX5ENBfYqfNSCDuOKbBi9hVsmKXx-QrFoocwoNVtYEKofY/s1600/Active-RSS-icon.png' title='rss'/></a> <a href='حسابك على تويتر'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj47BjpojYNlESWLo2eAXxH1bPVOLtEtCdXGlVOZGlqJKA4Q9UEumKDGJ5-ov0hsC42rf9gEYmaRzkoQThwmlRaKSsNYTjKiv6t12ehrU6rHEatNzWbvhsdjv4kbeGyETs92dK5ZkGmSf-d/s1600/Active-Twitter-icon.png' title='twitter'/></a> </div>

و كذا يمكنك اضافة المزيد من المواقع و ذلك باستخدام الوسم :
<li><a href="رابط الموقع"><img src="رابط الصورة" title="عنوان الصورة" /></a></li>
و يتم وضعه فوق </ul>

الى هنا نكون قد انتهينا من موضوعنا لليوم و الى اللقاء في موضوع جديد باذن الله