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

هذه الاضافة مهمة لكي تجعل متابع الموقع او المدونة يتابعهما على المواقع الاجتماعية كالفيسبوك وتويتر والRSS وغيرهم وكلما كانت هذه الإضافة أجمل كلما لفتت المتابع وجعلته يعجب بالموقع نأتي للشرح.اولاً ادخل الى لوحة تحم بلوجر ثم اختر تخطيط ثم اضافة اداة ثم اختر html/java script ثم انسخ الرابط الموجود في اسفل الدرس وضع روابط صفحاتك على المواقع الاجتماعية في المكان المخصص ثم احفظ وشاهد النتيجة

<div><a href="صفحتك على تويتر" title="تابعنا على تويتر" class="social-link social-twitter"></a><div> <div><a href="صفحتك على الفيسبوك" title="تابعنا على فيس بوك" class="social-link social-facebook"></a></div> <div><a href="صغحتك على فيد برنر" title="التغذية" class="social-link social-rss"></a></div></div></div> <style type="text/css"> .entry-social { height: 40px; padding-top:10px; padding-bottom:10px; } .entry-social > div { float: left; margin-right: 20px; } .entry-social .fb-like span{ vertical-align: top !important; padding-top: 2px; } .fb-like span iframe{ max-width: none; } .sidebar-social > div > div { width:50%; float:left; } .sidebar-social > div > div:nth-child(odd) { width:60% } .sidebar-social > div > div:nth-child(even) { width: 40%; } .sidebar-social > div > div > a > img { float: left; } .sidebar-social > div > div > div { float:left; margin-top:10px; margin-left:12px } .sidebar-social p { clear: both; margin: 0; padding: 10px 0 0; } .social-link { display:block; height: 50px; width: 50px; float: right; -webkit-animation: social .6s steps(12,end) infinite; animation: social .6s steps(12,end) infinite; /*-webkit-animation-play-state: paused; animation-play-state: paused;*/ } .social-twitter { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKu_HriaXe6jqGTgMJXfCD8ndkMEHC6Dhf2M5PWnsDeWt2vWp5x3gANkKUQ4YTxhGrM7tQI0tboUE-T_cyNSgSLG6sxH0vMLEVJaHLj-IFAolZ1QiRz0l3npcsdp5LwEacsP1yolcyxi0/s1600/twitter-sprite.png) } .social-rss { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizRnoDFHkangkwB6pkC3XFQPjBYnHalBvAs_njrFSwikVNcZn_irScJC-IfIHAtxyBJStIZnWPB5QqVrGSpmstMDkn0ZP212JRBe_8GLPy4EFuMytwXMvNX29BUhEUGdbSDMVzpv_n_o8/s1600/rss-sprite.png); -webkit-animation: social-rss .6s steps(9,end) infinite; animation: social-rss .6s steps(9,end) infinite; /*-webkit-animation-play-state: paused; animation-play-state: paused;*/ } .social-facebook { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPbNb-x5meTqaXx7sAsO9B9hVJGhWZtk9ZJcUW0gHbUxyH8QClct0h4u1iL6Wa3GblkRxIbdH-Fqs24B5MM_D65LP3ymoEen0gKkblMXYoHFPNAZ4iHhMkg2YPw7YslyAQE1BCeNfLrPA/s1600/facebook-sprite.png); } @keyframes social { from { background-position: 0 0; } to { background-position: -600px 0; } } @-webkit-keyframes social { from { social-position: 0 0; } to { background-position: -600px 0; } } @keyframes social-rss { from { background-position: 0 0; } to { background-position: -450px 0; } } @-webkit-keyframes social-rss { from { social-position: 0 0; } to { background-position: -450px 0; } } </style>

Tweet

مواضيع ذات صلة

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

4/ 5

Oleh Ahmed alqaisi

Ahmed alqaisi تمّ النشر بـ 9:17 ص أضف تعليق