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

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

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

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

اذهب للوحة تحكم مدونتك >> التخطيط >> اضافة أداة Html/Javascript 

ضع بها الكود التالى وقم بالحفظ

<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/AVvXsEjVHTvNVnP7ZBZc41DTog-EWUrVVxUgqY2RHFMOR0VaBfj4_yZcBqMAMeEzUKqe5zNtmzGPg3yahooi7QOI9rTpLHjDHPvKNVrBSFCfjg2oVN8KtTg6vZ5ygA2sbDAjou4_d65g06qH2glt/s1600/Rss.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5oRxR0BTTwKxTNiaoi6nN15R1TKuDjVUBAdSRHLD9sbtNmMLStCEtcqfVorQ3vnfqBShPalz4hEZYcuIx0N_Ez-f874w5R0xHorPvAAKjuitS43ywrcY0KGXkuPegkAT3M9J3FfWNC1Xd/s1600/Rss_pressed.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVHTvNVnP7ZBZc41DTog-EWUrVVxUgqY2RHFMOR0VaBfj4_yZcBqMAMeEzUKqe5zNtmzGPg3yahooi7QOI9rTpLHjDHPvKNVrBSFCfjg2oVN8KtTg6vZ5ygA2sbDAjou4_d65g06qH2glt/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/AVvXsEgKFVlZJ9dXZv3U0nK-OU-vZfXv8_6dhjLMkXzO52Pruei_qe9FbHG_JVJYihhwjj_bYWwBJBxlZX5ORSbWGJAeuWG5iU2_224ITkh1OIbDgpZ5Qn02_9wCkudfYaIJSewkVpu_HJQ-36Oa/s1600/Google.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikHmm6S771Nsg7aUmp59qRhp05hYHvnJ-Xv_S1D0Xnl5rXlDV8roFIxUUQG9zqikDRhQPXUijx9HJzkqGUDlU2FTSLkNHzw67z-MwY0mfb2vgRAR7W9jTppYQ4itpI4qhuNH9-uN5a8j9a/s1600/Google_pressed.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKFVlZJ9dXZv3U0nK-OU-vZfXv8_6dhjLMkXzO52Pruei_qe9FbHG_JVJYihhwjj_bYWwBJBxlZX5ORSbWGJAeuWG5iU2_224ITkh1OIbDgpZ5Qn02_9wCkudfYaIJSewkVpu_HJQ-36Oa/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/AVvXsEhKJ29N_V7aWsTDTzGT2ByDWKqKVCH7Ea9LJEDLenhdv6l1uIQQ_R2Bf4vjdZt68N6kV3yxmgzUd3CIyerAlGN_LP3dvfm0V1lpoGRhnrCLgcZGdylZT3pmgE6hnZLuN_WqqjPXZL6-tXxP/s1600/Facebook.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjml_EH2s2Cw6scR-TGWRI704dRdsSMvb4SDtmsirbS0_m-I6_vK325iJEMdFGQAza6erJSXLXdYJCJmhRaYPGbw7V54oDeZ7kbretCGNQ6wFKGDt8Rheki6i0oMjI5WfhyphenhyphenQhRDk9dBVwmI/s1600/Facebook_Pressed.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKJ29N_V7aWsTDTzGT2ByDWKqKVCH7Ea9LJEDLenhdv6l1uIQQ_R2Bf4vjdZt68N6kV3yxmgzUd3CIyerAlGN_LP3dvfm0V1lpoGRhnrCLgcZGdylZT3pmgE6hnZLuN_WqqjPXZL6-tXxP/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/AVvXsEjwuE7vwmjOhtrGk_see_ZOKw0eG2PSMFXQcR1WI_1p7_NoQls0PptqFS2JLDVvFSMv0_6iS56tVaBVZ2flL6hZSgFBJo_agxhs0Vj0Pxak_h2E7adXm0iM-MWxUGn_i2Wo5CxkNJQiYHez/s1600/Twitter.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQEOTlJDzNp27f7bj0vSc8N-TTDijhKPO78pg98dYzG3qJzXFkZundFuyD4596YTEIl7d8uY4UVr57GGHfE9_LtKSDM3SZjVAhVySw2RRi7mgkoHci8jAlWh5fzWicSIs8Wp6C_9eEckSr/s1600/Twitter_Pressed.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwuE7vwmjOhtrGk_see_ZOKw0eG2PSMFXQcR1WI_1p7_NoQls0PptqFS2JLDVvFSMv0_6iS56tVaBVZ2flL6hZSgFBJo_agxhs0Vj0Pxak_h2E7adXm0iM-MWxUGn_i2Wo5CxkNJQiYHez/s1600/Twitter.png" title="Follow Us On Twitter" alt="Twitter" /></a></div>
</center>
</center></div>

غير الروابط فى الكود أعلاه بما يناسبك 
مدونة ابداعاتى >> دع نفسك لابداع حقيقى