ايقونات المواقع الاجتماعية الرائعه بتأثير CSS في جانب المدونة
https://www.techpointblog.com/2012/10/simple-social-icons-hover-with-css3.html
السلام عليكم!جأت لكم اليوم باضافة رائعه وهي احد الاضافات الاجتماعية التي ستساعدك
في نشر مدونتكخفيقة وجميله طبعا ستضاف في الشريط الجانبي للمنتدى وليس اسفل التدوينيات
اضافة جميله قام ببرمجتها صاحب مدونة بلوجر بيلوب فارجو ان تنال اعجابكم
الان اترككم مع التركيب:
- لوحة تحكم المدونة.
- تخطيط,
- اضف اداة HTML و الصق فيها التالي:
<style type='text/css'>.social {list-style:none; margin-top:5px;}.social li { display:inline; float:left; background-repeat:no-repeat;}.social li a { display:block; width:48px; height:48px; padding-right:2px; position:relative; text-decoration:none; }.social li a strong { font-weight:normal; position:absolute; left:20px; top:-1px; color:#fff; padding:3px; z-index:9999; text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75); background-color:rgba(0, 0, 0, 0.7); -moz-border-radius:3px; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -webkit-border-radius:3px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border-radius:3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);}
li.facebook { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB4bzkLMThKMzVzv1g6swNedf0rU1LXkZDyKwQ-7wLPxQAKMeklAFkToHhS3bnbQrf_6MzQPWwuYzpSLJtCrNL8D0AN3HBxaPs8nZpLsh49fMTKgM0CNQbwpJp3R9Cq6AgwwWB7AmpyfN0/s1600/facebook_hover.png"); }li.googleplus { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsPtvUz_61_zq3-0WxTzu6Su1AbAXNwz1J48gTcmQsZT8vggioG8QtFpT7D22x0WMezcWyxZmNvyLfVgxM54RpPp-GusieX2EuGlcURj4bWcFqpazGBJ6nsf0emZ3UuTiTUkBocf24L3VI/s1600/googleplus_hover.png"); }li.rss { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqDdNHZidXIlY40Bl80hD8KjueY8pYHCYEu9ivkpLA57r96Lg6SikMvwz04Pj3TnpkA-H891d4ytohxHkCO2uJos7ru8fNK3SC2x9pmabfi3YTzxXpyu7-a5GDscfFvUnABG5KoU8geNpJ/s1600/rss_hover.png"); }li.twitter { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMydEHYXIWx-WYrxyydc6WHi3mEi3VX64QD4vpeHstcoCkmIGSxjWNwPtVTyLd6frQnX9qupZdIX3zhQCO4RLBjZq700eLU66LFgRm-W4gCjiXDO27MCT_3Fw1ML62J7Xy2HF80wcVmDDL/s1600/twitter_hover.png"); }li.youtube { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAe51IL4b2u0cqKO6ItTm8oweaeiI87eI_THJ_UCsyb_p5fotGtb2e1kzvia2-xg2X2ET7fOVnwUjmfl_jhYH1IO2DGy8zEEX3nHf7Qz-seTWwHDs3K52qPJ-vvZe-JO0d2qobDik77hk2/s1600/youtube_hover.png"); }#css3:hover li { opacity:0.2; }#css3 li { -webkit-transition-property: opacity; -webkit-transition-duration: 500ms; -moz-transition-property: opacity; -moz-transition-duration: 500ms; }#css3 li a strong { opacity:0; -webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms; -moz-transition-property: opacity, top; -moz-transition-duration: 300ms; }#css3 li:hover { opacity:1; }#css3 li:hover a strong { opacity:1; top:-10px; }</style><div class='social' id='css3'>
<li class='facebook'><a href='رابط صفحة الفيس بوك' rel='nofollow' target='_blank' title='Facebook FanPage'/></a></li>
<li class='twitter'><a href='رابط مستخدم التويتر' rel='nofollow' target='_blank' title='Twitter Profile'/></a></li>
<li class='googleplus'><a href='رابط صفحة الجوجل بلاس' rel='nofollow' target='_blank' title='GooglePlus'/></a></li>
<li class='youtube'><a href='رابط قناة اليوتيوب' rel='nofollow' target='_blank' title='Youtube Channel'/></a></li>
<li class='rss'><a href='رابط تغذية الار اس اس' rel='nofollow' target='_blank' title='RSS'/></a></li>
</div>
طبعا اضف الروابط في الكود ثم اضغط حفظ.
اخيراً اذا اعجبك الموضوع او استفدت منه شاركني برأيك
ولو بكلمة شكر ولا تنسى الضغط على ازرار المواقع الاجتماعية ادناه.
تحياتي.
الكاتب :
Salem Shami
مؤسس نقطة تقنية، مهتم بأخبار التقنية و التجارة الإلكترونية،أسعد بالتواصل معك عبر حساباتي في المواقع الإجتماعية أدناه
