اضافة مواقع التواصل الاجتماعى على هيئة أزرار بتقنية Css جميلة جدًا

طريقة التركيب

<style>#sub_widget{margin-bottom:30px;max-width:480px;background:#ddd;max-height:400px;border:3px solid green;-moz-border-radius:12px;border-bottom-left-radius:40px;margin-top:20px}#sbsr{height:70px}#bts{margin:9px 0 0 15px;float:center}#bts img{border-style:none}.gap{margin:auto 2px}#pra{float:left;margin:-6px 0 0 20px;color:#000;font-size:14px;font-family:arial;font-weight:bold}.newsletter{height:35px;float:left;margin:10px 0 60px 0}.button{margin-top:5px;color:#fff;width:100px;font-family:arial;font-weight:bold;font-size:16px;text-margin-left:-10px;background:green}.email{width:243px;height:25px;font-family : DroidKufi-regular', tahoma;text-margin:0 auto;pading:10px auto;background:white}</style>
<div id="sub_widget">
<center>
<center>
<div class="newsletter">
<form action="http://feedburner.google.com/fb/a/mailverify" class="subscribe-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=bilokr','popupwindow','scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input class="email" name="email" onblur="if(this.value==''){this.value='E-mail';}" onfocus="if(this.value=='E-mail'){this.value='';}" type="text" value=" اكتب ايميلك هنا واضغط اشتراك " />
<input name="uri" type="hidden" value="bilokr" />
<input name="title" type="hidden" value="bilokr" />
<input name="loc" type="hidden" value="en_IN" />
<input class="button" name="submit" type="submit" value="إشتراك" />
</form>
</div>
</center>
<center>
<div id="bts">
<a rel="nofollow" class="gap" href=" رابط حسابك على الخلاصة  target="_blank"><img onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinYBlJLFPxVbx56Q9hqraH-M4HGhGSqCfiejDGf4JIPanZG6WxkEfykhKQBclxEN8OnElZQ6jSRzO3I1OnyOlp4Xo854bzubpHWlrxQ7F1aXCzk2Hpx2c_ujUgB0I7yIU8alqH41UGbbxj/s1600/Rss.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdMFEGMwBnkYJWi3DPFNU3xA2Gi-LSZ2bdnNPb4tEknBtNg9xk40s1r5NRpcIPSEM5sGqtLXyhszk7UWxO5IUJUNsDfFMN9rSiP0oPnGSj2S_cbKVZSryy-LapfUkOJvfiFmuee5Bb5T77/s1600/Rss_pressed.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinYBlJLFPxVbx56Q9hqraH-M4HGhGSqCfiejDGf4JIPanZG6WxkEfykhKQBclxEN8OnElZQ6jSRzO3I1OnyOlp4Xo854bzubpHWlrxQ7F1aXCzk2Hpx2c_ujUgB0I7yIU8alqH41UGbbxj/s1600/Rss.png" title="Subscribe Via Rss" alt="RSS" /></a>
<a rel="nofollow" class="gap" href=" رابط حسابك الشخصى على جوجل بلس " target="_blank"><img onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV6TCZooWh75m8vcqgswOCXqONnDsVw7cEY3H6GYFMEgPHkMErVQwvJVAOgarZDMcGrfRmOe51miMKAREz00_FEydovF3mHMKI_L-OtPIMVga5CtvdEyGpcEHL7RAZ5KSQ7MFmQJ0zyG73/s1600/Google.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihfw4vk_led1wUo24cyHcOkntil9rQD7szom-6BfxHLV983OQwsBYEROiLQi1N_Rufc1D_E3gmsSgZQjRjGeJzQhaS1DZhtPdBEpwCIUdpx8earsZKmdU8HO_m_HtfWWAwTwwGARgQigum/s1600/Google_pressed.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV6TCZooWh75m8vcqgswOCXqONnDsVw7cEY3H6GYFMEgPHkMErVQwvJVAOgarZDMcGrfRmOe51miMKAREz00_FEydovF3mHMKI_L-OtPIMVga5CtvdEyGpcEHL7RAZ5KSQ7MFmQJ0zyG73/s1600/Google.png" title="Follow Us On Google plus" alt="Google" /></a><br/>
<a rel="nofollow" class="gap" href=" رابط صفحتك على الفيس بوك " target="_blank"><img onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhXS6ffuXEnspvZJhk_cKNUcyDL_-4e3laR6e2P93kIvFlZmV4cdz9WGamgcA9IhJ5MS8ZAYWwmNT6mN9HzOQDIpOWyyTHiYV66Qa51ICGvTnKAtKozgNU-g_qPahrROefb3GW-GWbKVfE/s1600/Facebook.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4-5pjLCQTNZQ7bqWrxvy1q3zL_LxdStXMGdJoOMvAwxmw52NWCGXHUMH8zks_1myecuqI28MhzKm2MN4_EWowQ3cP_BxULUCTWA-MRkgy_88UO764D7jCsutGzyvIlWmZ96dpLZiTQf3r/s1600/Facebook_Pressed.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhXS6ffuXEnspvZJhk_cKNUcyDL_-4e3laR6e2P93kIvFlZmV4cdz9WGamgcA9IhJ5MS8ZAYWwmNT6mN9HzOQDIpOWyyTHiYV66Qa51ICGvTnKAtKozgNU-g_qPahrROefb3GW-GWbKVfE/s1600/Facebook.png" title="Like Us On Facebook" alt="Facebook" /></a>
<a rel="nofollow" class="gap" href=" رابط حسابك على تويتر " target="_blank"><img onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEherHI1dlFXVfMLwqq1CcAvxi6M1kW9NrLfe84mfVWOyGIgLNhgQsIJrM4uz_PM0fEKYYtmJiaYQjbcF6pYbln17vIdmKCEMaJHr-7GOPIYkDPYr5lXbs4vJ-43W-uWm2C9EmEnNxVBRGZm/s1600/Twitter.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWg_M3fh-Y-nX5XJF9vGSb8O7_WDpYLmyuJvCDnWnq5XyE_ZORYMnYKI4IcfKahchvmaLa9j0qOdL_ad1zLPrS-63jwj3NzKOGOmRTq2HDh1ghIKg3K9HRbt2oCZQGXelST45zKgt3nrvx/s1600/Twitter_Pressed.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEherHI1dlFXVfMLwqq1CcAvxi6M1kW9NrLfe84mfVWOyGIgLNhgQsIJrM4uz_PM0fEKYYtmJiaYQjbcF6pYbln17vIdmKCEMaJHr-7GOPIYkDPYr5lXbs4vJ-43W-uWm2C9EmEnNxVBRGZm/s1600/Twitter.png" title="Follow Us On Twitter" alt="Twitter" /></a></div>
</center>
</center></div>