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

 أزرار المواقع الإجتماعية بصيغة css أو HTML /java script تعتبر إضافة رائعة للمواقع والمدونات وقد كثرة بمختلف أنواعها وأشكالها وهذه الإضافة تحتوي على مواقع مثل  youtube -Twiter - Facebook-Rss

                         

  تعتبرأزار المواقع الإجتماعية youtube -Twiter - Facebook-Rss خفيفة و جميلة ويتغير لونها عند وضع مؤشر الفأرة عليها كما تحتوي على عدد المشتركين في كل موقع خاص بك 

لتركيبها يجب المرور بمرحلتين
أولا إذهب إلى المدونة  ثم قالب ثم تحريرHTML ونبحث عن الوسم التالي :  ]]></b:skin>  ونضع الكود التالي فوقه ثم نضغط حفظ 

هذا هو الكود :

"
social-icone{ height:108px;} .social-icone div{ margin: 8px 12px;} .social-icone a{ text-decoration:none;} .you-icone b, .twt-icone b,.face-icone b,.rss-icone b{ font:14px tahoma; color:#8c8b8b;} .you-icone span,.twt-icone span,.face-icone span,.rss-icone span{font:11px tahoma; color:#a3a3a3; } .you-icone{ width: 50px; height: 32px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzmtdsynfKZwPHf5UgUAEV3fs7Vz70kKX36F0cpJIBsaUVzfYwrY86D8MUXQUWM4Pq59FsBpTSg5HvQWyddMe50dGq0GbliOORbB6G57MxSunCA1OdAZB2QfLxCaOF-DI26O66Qk7_uHU/s1600/youtube.png)top no-repeat; text-align: center; padding-top: 56px; float:right; } .you-icone:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiky-02TE6Z-GUIisoo9x9_aLfiMj45h44NadPeKIvNaQEa73f7lvA41t6QR7ekpTc6v8t3PU6WRmPdV3fHa2r0aXrN3aBVNADAvk21xICR_XgynboV8y3xFLKrNy6eeJaLC-sTks9_NTI/s1600/youtube2.png)top no-repeat;} .twt-icone{ width: 50px; height: 32px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVYKgc0AmKR2le3yj2cbxotYBbd4T1cYPjGzc5_p5wpaTf8amdjWmAkPEV_JNhWo4fh78crx0-T-MIMKZhM8W1ruQXY9te2pTHGeMTIaUrdr0Qe6oRFL7Z4cRr3C86VLK30jhr-FH4XCM/s1600/twitter.png)top no-repeat; text-align: center; padding-top: 56px; float:right; } .twt-icone:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSDeSHV8_k3RD64YvDRDhDu0Vk2CsOovGbuHu5NXWqKFmb_Q0hZQouq2mLJ5k76Zl9B23m53SOPy-cmdy8oBDeqxsf2iStlEzv7GLB0X-P738wppNF229HAjp_hJldTmoycgBALtNYvdQ/s1600/twitter2.png)top no-repeat;} .face-icone{ width: 50px; height: 32px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsTOGQF4o0kF2T37BlgVlyGfyBcbwznq8qXjcZO8KzOip_oQhsq66mCfsxAllhPCKfwJeYRtkIdD_WCIbMRu1ibOqxbkB9ntWebGYahYR5cg5f4JBlwHGe5rRxYvjpsOfvJls0hS6JUt0/s1600/facebook.png)top no-repeat; text-align: center; padding-top: 56px; float:right; } .face-icone:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5I__HU0JMFDBdnFld3i9QRZ0yhkwpS4UyOPlkr4K5UDWgidHvpAyX4pfPER5S4GvF9hMvgyvDiwO_92inWVM6LfDylPQSZBZmpLxd-I__0eY1tRz9n8wXFVIuBVVXPJk1WlJqPPJJ1Iw/s1600/facebook2.png)top no-repeat;} .rss-icone{ width: 50px; height: 32px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO-avkyp7J5Abd2c23r2YOR7hwYbKkjmcQb-fwpoZgGz-UREzGZ0UQYrA06ey_xcOS3rZqIqbZ52ehHcLT4hVu3_XUd1KFglGGuNfrIy58D9k9nuw77ZDBy26n45JU2iMLbgwxozor0Xw/s1600/RSS.png)top no-repeat; text-align: center; padding-top: 56px; float:right; } .rss-icone:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdHmYP_fNfx0BwQpPipcpOgQX0MmXZL722DscFoXINcb1Ph92GKnYbizMVRYhGHARFQgVBYW98GJcF60Rc5UYpAR30F5VYcqykb8G9nDNHWQJ9Va0BjnX2YRNnNcAJVX6n601-IfL7mCI/s1600/RSS2.png)top no-repeat;} .post-footer-line > * { margin-left: 0; }"

والمرحلة الثانية نضغط على تخطيط ثم إضافة أداة ونختار HTML /java script ونضع الكود التالي داخل الإطار الكبير ثم نضغط على حفظ

الكود :

"<div class="social-icone"> <a href="http://www.youtube.com/channel/UCQuVAuScyBL7wbhZaFfz5CA"rel="nofollow" rel="nofollow" target="_blank"> <div class="you-icone"> <b>400</b> <span>%u0645%u0634%u062A%u0631%u0643</span> </div> </a> <a href="https://twitter.com/Amine041M"rel="nofollow" rel="nofollow" target="_blank"> <div class="twt-icone"> <b>1000</b> <span>%u0645%u062A%u0627%u0628%u0639</span> </div> </a> <a href="https://www.facebook.com/mohammed.amine.526875"rel="nofollow" rel="nofollow" target="_blank"> <div class="face-icone"> <b>350</b> <span>%u0645%u0639%u062C%u0628</span> </div> </a> <a href="http://feeds.feedburner.com/KINAS29"rel="nofollow" rel="nofollow" target="_blank"> <div class="rss-icone"> <b>2.000</b> <span>%u0645%u0634%u062A%u0631%u0643</span> </div> </a> </div>  "

إستبدل الروابط ذات اللّون الأزرق بروابطك الخاصة 


                                              بالـــــــتوفيـــــــــــــــــق