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

معاينــــــــــــة الإضافـــــــــــــة

ضع هذا الكود فى أداة Html/Javascript 

من مدونتك 

<div class='widget-content'><style>#sub_widget{margin-bottom:30px;max-width:480px;background:#ddd;max-height:400px;border:4px ridge green;-moz-border-radius:12px;-webkit-border-radius:12px;border-radius:12px;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:250px;height:25px;font-size:12px;text-margin:0 auto;pading:10px auto;background:white}</style><div id="sub_widget"><center><img id="sbsr" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg9NIQpo5yyMT8JhcGC80Qiuy4RF2Eivpyvn3xZtVQNp_xa5ijIEoJfu6OZacgv4T-3BDm-eiuTME1RsvCBnDm_t2iJNCSLEs4L3Wa3yR2CcwKlNocnu6SrzJeWojMt_xe9g57QJGrUrCU/s734/rss-subscribe.png"/></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/AVvXsEgzQPgOJp3XqY3yYJWCHfmD6Le-Rf5wsxI5agDWlY0cbumBzqcDKAnmvxm8fehs8z-Uclu-nqZnge0i_lUXc7doraH2Tf3gUJs0pMXnam2nPn6niMngesrGS3AwK64vxS5v_Vi8sMdRlkU2/s1600/Rss.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjUMrNOYFXT9Y8u5pF5cCWzD0VPIyP4f11lAm5KOFIKuD1O4-EM_YQk8I_0CDQA7K2Mofrsz0cNyZULEo6wp-2c8oIka-ns36N6y8GJvcq4qJ0SptM3cxzwbxfd7UN7ak_dXmLeyd5NRbx/s1600/Rss_pressed.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzQPgOJp3XqY3yYJWCHfmD6Le-Rf5wsxI5agDWlY0cbumBzqcDKAnmvxm8fehs8z-Uclu-nqZnge0i_lUXc7doraH2Tf3gUJs0pMXnam2nPn6niMngesrGS3AwK64vxS5v_Vi8sMdRlkU2/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/AVvXsEj7Jskzm5RYNSo7zaafmGyLnLRn2uOITns11cGWWl49KS-vYjd7NkjaiVkuS4RyVRo_1Ebd-IxS2QWyRiQAbFDmEiYG_M44mcx0WRJs953z8zGD1KI7RlmjrlFipErCWrOgh9JPDxenTDmi/s1600/Google.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-lza3ivjlLxKDqeRJpKrj91s7a2YpnicHT5On_r-7AXIP1FiPz7vyqUw-_NBvZEsFGcB6x8_nC_I644zHvmA1fCFaIjogxmmkqortn8NSX4o6mo7NyuYXq5l5zjpNMccWMT4lysC5_lJo/s1600/Google_pressed.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7Jskzm5RYNSo7zaafmGyLnLRn2uOITns11cGWWl49KS-vYjd7NkjaiVkuS4RyVRo_1Ebd-IxS2QWyRiQAbFDmEiYG_M44mcx0WRJs953z8zGD1KI7RlmjrlFipErCWrOgh9JPDxenTDmi/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/AVvXsEiffqHsyCA8DNSf4UbgGXUFOY7U-vo2mr5UqQX4YNCAozQSuArw_x0RJM5Ib4QLxeFsXSiWORLmwqNYoFiUMlqF1RUz20jUBgkvB-gbDGVjOgRBbOu6wSdFN-8jvl4o2mVgd2d2VCnFVOSr/s1600/Facebook.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCor5kBkTcqgYAa4p7FGnyp-ckjbJ123sCnCp77mDUUSrr-hGezOVfOANH7C36u1_ZR9eTp6U4zZsZ8s20uTlnuMdlSKJ-VPC4Vihv18eA9ZyMu_gebLfRMK2hW5B9O-fNHN6_-hqRCg6Z/s1600/Facebook_Pressed.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiffqHsyCA8DNSf4UbgGXUFOY7U-vo2mr5UqQX4YNCAozQSuArw_x0RJM5Ib4QLxeFsXSiWORLmwqNYoFiUMlqF1RUz20jUBgkvB-gbDGVjOgRBbOu6wSdFN-8jvl4o2mVgd2d2VCnFVOSr/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/AVvXsEiLU8gFfms9pQGl6F2sBS2NSZZ-GJ7EdOqCuuphn9Stae64uiiSz9otFY_iwyfsgqpG3O_SFdAxqi6jn2fwzYFbhXHbrP5T7oilEEvDatqq2jb2k9Ai3dtUNs33WcwIzumlobFafY_xLrV2/s1600/Twitter.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw6ajGHUHG16SJJAPBWxmrORfQwN_ci8dqSv3Ix-eY_5f9rZPNFsMKbMk-5k8WMjH0otOh4O-TJTtVz0QD2QciP2fx_yKdgS7EnycOFicCuBgvpOO6Eky4953zN0m2j2nML2ST3l-gLv7j/s1600/Twitter_Pressed.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLU8gFfms9pQGl6F2sBS2NSZZ-GJ7EdOqCuuphn9Stae64uiiSz9otFY_iwyfsgqpG3O_SFdAxqi6jn2fwzYFbhXHbrP5T7oilEEvDatqq2jb2k9Ai3dtUNs33WcwIzumlobFafY_xLrV2/s1600/Twitter.png" title="Follow Us On Twitter" alt="Twitter" /></a></div></center></div></div>