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

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

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

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

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

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

اولا نبحث عن الوسم  ]]></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/AVvXsEgRb8se2mEv85pXvqo5IU8Rk4ubH2naeENZzP1wwcpR7s-m39hGvY-Ni7j_SyjNXP649IUH5pgip3fJWKKrwBaQsgjJV2sjhOqnD68-kDsY3gNmd7JMkPbX_NHCivkx7dIIzfhhDBPPPyUa/s1600/Active-Facebook-icon.png' title='fb'/></a> <a href='حسابك على قوقل بلاس'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHM-HWYST8PQBpoJLdOnpzFxXuxsBAs27zshGvd3YswJGP8l0IiSjALBSBMew_91g9DQ8ZJdDlu249D3QMpUMyF4-ODptBM78Dr05_w4piNwpLThQHto8AanGLapX1Y14R0H3sZdlIFXQy/s1600/Active-Google-plus-icon.png' title='google+'/></a> <a href='حسابك على موقع بينتريست'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK53Nq3cqW1wrVbj-R8WRFbYVTwumQa12hAvd2BD1S6DC3pWOkhskBNNeqaMKGigIXmmp4YNN19mpFsicRRTTrS2jjupkiJYDYTCkoT1rr-vJiq3hCgspjrxdFw9s-Sbq-fftkpZIiRtXS/s1600/Active-Pinterest-icon.png' title='pinterest'/></a> <a href='رابط الفيدزبارنر'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilXVU3H2G9M8lFBEq1hNPXucvXZlrsl-TnU7j5EfqB3C8o_HbOggOywHd0Xf5vU8zRdejmTNCwW_J9iuvz_-NSk4AaueSWeIhyphenhyphenhDMuTQBxrQdzThu8Mhhz9b7VEd489x6RYMClm7WxWMFt/s1600/Active-RSS-icon.png' title='rss'/></a> <a href='حسابك على تويتر'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMk9HGuvGx2hrAApsWnJQrTAYzzz50dmGvXmqaczaoNIj9259tDUQoZf9QSwYawwbBcIYUsxiKaHht2sWjs0fFnL5BpFywr3b8Pej4JQVzngU_w2qHyTj86WzTbPvcntA59SBrPbrJ1sH6/s1600/Active-Twitter-icon.png' title='twitter'/></a> </div>

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

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