السلام عليكم فى اول تدوينة فى مدونة مدُون مصر بعد افتتاح المدونة أردت أن اقدم لكم اضافة جديدة وهى اضافة ايقونات الشبكات الاجتماعية بشكل احترافى اتمنى ان تنال اعجابكم والان كى لا اطيل عليكم ندخل فى الشرح
معاينة الاضافة
معاينة الاضافة
طريقة التركيب
- ادخل لوحة تحكم بلوجر من هنا
- اذهب الى التخطيط
- ثم اضافة اداة 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/AVvXsEgGEWbuZLiwZLwOQjCs8a2TV-H1LyKuRcVr0T9Sf1ZZL_q3NRbr7ZMjckuG4cB0VmVS94NxB3OUMIxxeRJ5NbKA_RcQFnbpLT32hgIGvL08jqL-2nabAjYFkAI-QvJLtFOSWO7n_mNPc_E1/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>
يسعدنا تفاعلكم بالتعليق، لكن يرجى عدم وضع أي روابط خارجية أو إشهارية حتى ينشر التعليق