اضافة شبكات التواصل الاجتماعي بطريقة رائعة الى مدونتك

بسم الله الرحمان الرحيم 

السلام عليكم ورحمة الله وبركاته 

في هدا الدرس ساتطرق لاضافة  شبكات التواصل الاجتماعي بطريقة رائعة

ندهب الى لوحة تحكم المدونة 

الى تخطيط

اضافة اداة 

html/javascript

ونلصق الكود الاتي

<style type="text/css"> #buttonbg {width: 260px;margin: 10px 20px;padding: 0;} #buttonbg li {cursor: pointer;height: 48px;position: relative;list-style-type: none; } #buttonbg .icon {background: #D91E76 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB697I4xu5cR0xzHfLvevOc5eD37nsWhbGrrRWjk3xukspD3VjNKtTpPC06TmHreGrcGJPbxXQ-ufjF4oIEzBS_sn0o-kau6R2CJO2a-NWh50TaQSQhkUaPeKuQ-v7A5NwphDokMKYeYk/s1600/blsocial12.png') 0 0 no-repeat; background-color: rgba(217, 30, 118, .42);border-radius: 30px;display: block; color: #141414;float: none;height: 48px;line-height: 48px; margin: 5px 0;position: relative;text-align: left;text-indent: 90px; text-shadow: #333 0 1px 0;white-space: nowrap;width: 48px;z-index: 5; -webkit-transition: width .25s ease-in-out, background-color .25s ease-in-out; -moz-transition: width .25s ease-in-out, background-color .25s ease-in-out; -o-transition: width .25s ease-in-out, background-color .25s ease-in-out; transition: width .25s ease-in-out, background-color .25s ease-in-out; -webkit-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px; -moz-box-shadow: rgba(0,0,0, .28) 0 2px 3px; -o-box-shadow: rgba(0,0,0, .28) 0 2px 3px; box-shadow: rgba(0, 0, 0, .28) 0 2px 3px; text-decoration: none;} #buttonbg span:hover {visibility: hidden;} #buttonbg span {display: block;top: 15px;position: absolute;left: 90px;} #buttonbg .icon {color: #fafafa;overflow: hidden;} #buttonbg .fb {background-color: rgba(45,118,185, .42); background-position: 0 -382px;} #buttonbg .twit {background-color: rgba(0, 161, 223, .42); background-position: 0 -430px;} #buttonbg .google {background-color: rgba(167, 0, 0, .42); background-position: 0 -478px;} #buttonbg .pint {background-color: rgba(204, 0, 0, .42);background-position: 0 -526px;} #buttonbg .linked {background-color: rgba(0, 87, 114, .42); background-position: 0 -574px;} #buttonbg .deviant {background-color: rgba(76, 122, 74, .42); background-position: 0 -622px;} #buttonbg .ytube {background-color: rgba(170, 0, 0, .42); background-position: 0 -670px;} #buttonbg .rss {background-color: rgba(255,109, 0, .42); background-position: 0 -718px;} #buttonbg li:hover .icon {width: 250px; } #buttonbg li:hover .icon {background-color: #d91e76; } #buttonbg li:hover .fb {background-color: #2d76b9;background-position: 0 2px;} #buttonbg li:hover .twit {background-color: #00A1DF; background-position: 0 -46px; } #buttonbg li:hover .google {background-color: #A70000;background-position: 0 -94px;} #buttonbg li:hover .pint {background-color: #C00;background-position: 0 -142px; } #buttonbg li:hover .linked {background-color: #005772;background-position: 0 -190px;} #buttonbg li:hover .deviant {background-color: #4C7A4A;background-position: 0 -238px;} #buttonbg li:hover .ytube {background-color: #A00;background-position: 0 -286px; } #buttonbg li:hover .rss {background-color: #EC5601;background-position: 0 -334px; } #buttonbg .icon:active {bottom: -2px;-webkit-box-shadow: none;-moz-box-shadow: none;-o-box-shadow: none;} </style> <ul id="buttonbg"> <li ><a href="<strike>https://www.facebook.com/saad.farid.1010</strike>" class="icon fb">Like us on Facebook</a><span>Like us on Facebook</span></li> <li ><a href="https://www.youtube.com/user/faridsaaadoun" class="icon ytube">تابعنا على يوتوب</a><span>Follow us on Youtube</span></li> <li ><a href="https://twitter.com/simou014" class="icon twit" >Follow us on Twitter</a><span>Follow us on Twitter</span></li> <li ><a href="https://plus.google.com/u/0/105348522546774223319/posts" class="icon google" >Follow us on Google+</a><span>Follow us on Google+</span> </li> </ul>

مع تغيير  رابط الفيس بوك ويوتيوب وتويتر وجوجل + لرابطك انت 

ثم نقوم بحفظ 

والى اللقاء في موضوع اخر ان شاء الله