إضافة أزرار بتقنية Css إلى مدونتك

أقترح عليكم اليوم أزار المتابعة بتقنية  CSS ذات المظهر الدائرى مع خاصية نزول الزر عند الضغط عليه و رجوعه

طريقة الإضافة
اذهب للوحة تحكم مدونتك >> التخطيط >> اضافة أداة JAVA/HTML
ضع بها الكود التالى وقم بالحفظ
<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/AVvXsEj6ZCdDjknO7TyX-Jdg5a72CpDvez95N6nAXd3k0ylKY9ee0Bq805H9R3s_Qlds_GDTeA-uuqqOyUfPvmMbkmqoll_OYBnVrIrThnqKkwuo7IJ-q1t2bjVGp16t_vOdhePTBgeb_50VQMYT/s1600/Rss.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkZf-6w1mvIbFoQCK-H4lLUHeGKQBe3-Nx6nln8mw4H8-IhXqgALn3IYwTrtv4v1oHzrLfh13sRdQB-anvOhHB3_hDnVBp8bE1GUYluXnkI0_vy9_OvR5I8UZZ9sQ5VHB370LV3D4Ck91e/s1600/Rss_pressed.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6ZCdDjknO7TyX-Jdg5a72CpDvez95N6nAXd3k0ylKY9ee0Bq805H9R3s_Qlds_GDTeA-uuqqOyUfPvmMbkmqoll_OYBnVrIrThnqKkwuo7IJ-q1t2bjVGp16t_vOdhePTBgeb_50VQMYT/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/AVvXsEgDtRfzO3Lh86ikOgOdWFKpr-ft57B3538lcehFugB7GnCOblFEmKpAi_2onPqx4gpoTu0PGXkttSKpxdVhNGun0uwpSsuSm2onGc_EU_v8dDJ6xYmR2LTrc8c_ggZMf9pkxAJRaJqJ31Fp/s1600/Google.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTRqB3sA0Trog2VaNaFvLxuSnLpJku3C1QdPSFen_hEIVzhkKTi9K7AA-uCQIo9l6Q_87mVPZAth3A2b7AQTydTZeu1VI3MIFqRMVPOIjKo8qPrRblY5mmBzY9JoruWBtEWHH9WkXxwAPC/s1600/Google_pressed.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDtRfzO3Lh86ikOgOdWFKpr-ft57B3538lcehFugB7GnCOblFEmKpAi_2onPqx4gpoTu0PGXkttSKpxdVhNGun0uwpSsuSm2onGc_EU_v8dDJ6xYmR2LTrc8c_ggZMf9pkxAJRaJqJ31Fp/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/AVvXsEh8aN7CqcuhyphenhyphenO9JfkWPzvgo8qUOe-DYn7Rkmm1fCPMyCxxZ4ZlrunwuZSfWAGKy6Hc320gD6QRUWs23G4HpOlVAwpLsXkWIQPPn1I7a28betYA1uZexANNeFuZNWBEmJcL4Y5rdprcpVaCU/s1600/Facebook.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtBRaUqnrhPfYV0fHJshp6A1NMQ4QxgFg0Pj8yZGXCBNGgRJQ8INtq9i_jNQhQrv3ZfvGw8wUGiiuzednYacDxVfXzXEAC2mTN12ewuuEIUGgMyBBLQfRNEaauGAkua6p03xhngreBFuef/s1600/Facebook_Pressed.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8aN7CqcuhyphenhyphenO9JfkWPzvgo8qUOe-DYn7Rkmm1fCPMyCxxZ4ZlrunwuZSfWAGKy6Hc320gD6QRUWs23G4HpOlVAwpLsXkWIQPPn1I7a28betYA1uZexANNeFuZNWBEmJcL4Y5rdprcpVaCU/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/AVvXsEg0QLG0O395-ruNKkKFwL4ex4EQyZnPKmKwcMdKou3sHB3KCYM8gB4yQZt0Abx8c2P0Gw8_csCXebTyOkfXAxwahbgQSk45eQNW9UA6U0Jd3WUiGmcwOntp66gefboHulGFEXN6uLLYpsuv/s1600/Twitter.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNL8Z2iX6NHzu30MS-gYfZPXNgXDIE8MsJIipBa08WGkxtu8ZMwL1tUrDWB7qzDqkBWAUVtXQ42qggQIOQBOe9wVUINrPzPz9jst1AG0IJE134kRmeLsF7S3nx4i8pDch0jgIu9hPEVfYF/s1600/Twitter_Pressed.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0QLG0O395-ruNKkKFwL4ex4EQyZnPKmKwcMdKou3sHB3KCYM8gB4yQZt0Abx8c2P0Gw8_csCXebTyOkfXAxwahbgQSk45eQNW9UA6U0Jd3WUiGmcwOntp66gefboHulGFEXN6uLLYpsuv/s1600/Twitter.png" title="Follow Us On Twitter" alt="Twitter" /></a></div> </center> </center> </div>

غير الروابط فى الكود أعلاه بما يناسبك ، إذا وجهتك أي صعوبة فضعها في تعليق