اضافة ايقونات الشبكات الاجتماعية بشكل احترافى

السلام عليكم فى اول تدوينة فى مدونة مدُون مصر بعد افتتاح المدونة أردت أن اقدم لكم اضافة جديدة وهى اضافة ايقونات الشبكات الاجتماعية بشكل احترافى اتمنى ان تنال اعجابكم والان كى لا اطيل عليكم ندخل فى الشرح 

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

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

• ادخل لوحة تحكم بلوجر من هنا 
• اذهب الى التخطيط 
•  ثم اضافة اداة html/javascript
• وضع فيها الكود التالي

<center> <div id="mumasr-social"> <div class="mumasr-1"><img src="//up-al7otweb.eb2a.com/uploads/1439371679151.png" /></div> <div id="links"><a href="#" class="twitter" title="تويتر" target="_blank"> <div class="mumasr-2"><img src="//up-al7otweb.eb2a.com/uploads/1439370557813.png" /></div></a> <a href="#" class="facebook" title="فيسبوك" target="_blank"> <div class="mumasr-2"><img src="//up-al7otweb.eb2a.com/uploads/1439370557731.png" /></div></a> <a href="#" class="google" title="جوحل" target="_blank"> <div class="mumasr-2"><img src="//up-al7otweb.eb2a.com/uploads/143937055782.png" /></div></a> <a href="#" class="rss" title="فيد برنر" target="_blank"> <div class="mumasr-2"><img src="//up-al7otweb.eb2a.com/uploads/1439370649181.png" /></div></a></div></div> <style> .mumasr-1 { margin-right:16px; margin-top:10px;} .mumasr-2 { margin-top:7px; } #mumasr-social{position:relative;width:300px;height:360px;background:#222222 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQIpnlbSHlg9ESjpzUeuEKRZAdp9UeNdJxlYXM-iEjHhwB7wilLQIyrEfc7a4YxAdLl1W_hoPz9RqtVgPsK7IcG_1NOTun4ebwvn6I6CH95orJfB-v_mCtCcYH4KhDEBgSHoSRLwuAH8PY/w938-h350-no/mumasrfooter.png");} #mumasr-social #title{font-family:'Open sans';font-size:28px;color:#fff;font-weight:600;margin:30px 20px 0;text-align:center;line-height:1.1em;text-shadow:1px 1px 1px rgba(0,0,0,0.3);} #mumasr-social #title span{display:block;font-size:14px;line-height:1.5em;margin-top:10px;font-weight:400;} #mumasr-social #links{position:absolute;bottom:0;width:100%;} #mumasr-social a{display:block;padding:0 40px;height:42px;line-height:42px;color:#fff;font-size:12px;background:rgba(0,0,0,0.08);border-top:1px solid #4c4644;border-top:1px solid rgba(0,0,0,0.1);-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;} #mumasr-social a:hover{background:rgba(0,0,0,0.15);text-decoration:none;} #mumasr-social a.twitter:hover{background:#42C0FB;} #mumasr-social a.facebook:hover{background:#4C66A4;} #mumasr-social a.google:hover{background:#D64136;} #mumasr-social a.rss:hover{background:#FA9D3A;} #mumasr-social a span{height:15px;line-height:15px;width:15px;text-align:center;margin-right:20px;font-size:13px;padding:5px;border-radius:99px;background:rgba(0,0,0,0.1);} </style> <center></center></center>

والى هنا قد انتهى الموضوع فى امان الله وحفظ الرحمن 
***

M.H.I

يمكنك ان تستخدم الإبتسامات بالوقوف عليها لمعرفة الكود :

=q =w =s =d =f =g =h =t =y =u =z =x =c =v =b =n =m =a =e =r