أزرار المواقع الاجتماعية منزلقة بشكل جميل

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

• Facebook
• Twitter
• Google plus
• Rss

طريقة الإضافة

اذهب إلى المدونة ç التخطيط ç إضافة أداة ç HTML/JavaScript

ثم قم بنسخ الكود التالي ولصقه

<style> .abt-social-slide ul li{list-style:none;border-bottom:none;padding:0} .abt-social-slide li a{width:59px;height:59px;float:left;text-indent:-99999px;border:solid 1px #222121;border-radius:5px;-webkit-transition:All .3s ease-out;-moz-transition:All .3s ease-out;-o-transition:All .3s ease-out;margin:5px 5px 10px;padding:0} .abt-social-slide li a.facebook{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyM8pJo-kGYr-bjqhos9ZgHgHS49ThABMl6UoMNDsF2WamWfzae6FL3UIdiSQGwAY1N4ymWrFGmSLUVGkLARgw1_fL95RmLseIuaRSrxZE1h-0w4LdrBH1QiH5g0HeF_wHHFnHxxQELQ/s1600/facebook.png) no-repeat 0 -88px} .abt-social-slide li a.facebook:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyM8pJo-kGYr-bjqhos9ZgHgHS49ThABMl6UoMNDsF2WamWfzae6FL3UIdiSQGwAY1N4ymWrFGmSLUVGkLARgw1_fL95RmLseIuaRSrxZE1h-0w4LdrBH1QiH5g0HeF_wHHFnHxxQELQ/s1600/facebook.png) no-repeat 0 0} .abt-social-slide li a.twitter{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRmovbO0Upwvg7Nu9bwfsTq8dhoHPN8BoideTNaIa25-s7NGY-HQ1rK8usDsPKM__FIL9KH94u_5xS_Uo8TTn3Vnd8oUpWDf3wx9_GxG5DwZhs3cYq-nfUakNK9vMpvny9VTAaUNfsLQ/s1600/twitter-1.png) no-repeat 0 -88px} .abt-social-slide li a.twitter:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRmovbO0Upwvg7Nu9bwfsTq8dhoHPN8BoideTNaIa25-s7NGY-HQ1rK8usDsPKM__FIL9KH94u_5xS_Uo8TTn3Vnd8oUpWDf3wx9_GxG5DwZhs3cYq-nfUakNK9vMpvny9VTAaUNfsLQ/s1600/twitter-1.png) no-repeat 0 0} .abt-social-slide li a.google-p{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9evVIpVnv4-7Ihcs-MvCL_Z4ua-UIBFPmD9arYrMqRnds4tEDRzckYhAATu9GG4pd4eCnIJlZ5EHEfwhUpTyNXs_TEWN-Dz42-McQDFil5CykH-r8BerxuR0Mqd5ai_u9qraZ-lZ33g/s1600/google.png) no-repeat 0 -88px} .abt-social-slide li a.google-p:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9evVIpVnv4-7Ihcs-MvCL_Z4ua-UIBFPmD9arYrMqRnds4tEDRzckYhAATu9GG4pd4eCnIJlZ5EHEfwhUpTyNXs_TEWN-Dz42-McQDFil5CykH-r8BerxuR0Mqd5ai_u9qraZ-lZ33g/s1600/google.png) no-repeat 0 0} .abt-social-slide li a.rss{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQPNJxdLFQG7rmvfgGCoJtr-CAn08HAiwhM-5PbWSUfkOi_bsgFBuadLykfw8IptwL60CABLabx-6Sdcyeb3EKBamxaNbH79DPe06l9vIUft3N-RZqWp_O4ufMVbxMSS117kE9q8s7Dg/s1600/twitter.png) no-repeat 0 -88px} .abt-social-slide li a.rss:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQPNJxdLFQG7rmvfgGCoJtr-CAn08HAiwhM-5PbWSUfkOi_bsgFBuadLykfw8IptwL60CABLabx-6Sdcyeb3EKBamxaNbH79DPe06l9vIUft3N-RZqWp_O4ufMVbxMSS117kE9q8s7Dg/s1600/twitter.png) no-repeat 0 0} </style> <div class="abt-social-slide"> <ul> <li><a class="facebook" href="#" target="_blank">Facebook</a></li> <li><a class="twitter" href="#" target="_blank">Twitter</a></li> <li><a class="google-p" href="#" target="_blank">Google plus</a></li> <li><a class="rss" href="#" target="_blank">Rss</a></li> </ul> </div>

واستبدل # بروابطك الخاصة

ثم حفظ الأداة واذهب للمعاينة