bloggerarchive
247125322047940
تحميل

ايقونات المواقع الاجتماعية الرائعه بتأثير CSS في جانب المدونة



https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibwTnIIefw25NHdETQwngclCMzSjYPzjLIK1NvPlJr6Q26SF0_Ex0aXuG_ioAkcPUqyCyQGf1Fov7FHVzsCli4qDuwo8AFk53QSo3XCTIzn6LevlrP9QjPWoCQ07vEb_7Sb34NLuvqKqeC/s320/socialiconhover.jpg 

السلام عليكم!جأت لكم اليوم باضافة رائعه وهي احد الاضافات الاجتماعية التي ستساعدك

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

اضافة جميله قام ببرمجتها صاحب مدونة بلوجر بيلوب فارجو ان تنال اعجابكم

الان اترككم مع التركيب:

  1. لوحة تحكم المدونة.
  2. تخطيط,
  3. اضف اداة 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>
 طبعا اضف الروابط في الكود ثم اضغط حفظ.


اخيراً اذا اعجبك الموضوع او استفدت منه  شاركني برأيك

ولو بكلمة شكر ولا تنسى الضغط على ازرار المواقع الاجتماعية ادناه.

تحياتي.



ويب 6703890061239815418

إرسال تعليق تعليقات الموقع

لاضافة صورة او فيديو في التعليق ضع رابط الفيديو بين الوسمين كالتالي:
[video] رابط الفيديو [/video]
[img ]ربط الصور [/img]
للتعليق اضغط على مربع التعليق ياسم و اختر : الاسم / عنوان URL ثم اكتب اسمك فقط اذا اردت واضغط الاستمرار.

emo-but-icon

الصفحة الرئيسية item

المتابعون!

تابعنا على تويتر