تقني المعلوميات تقني المعلوميات
recent

آخر الأخبار

recent
random
جاري التحميل ...

إضافة أزرار مواقع التواصل الإجتماعي لمدونات بلوجر

إضافة  أزرار مواقع التواصل الإجتماعي لمدونات بلوجر

السلام عليكم ورحمة الله وبركاته
سوف نستعرض لكم اليوم أزرار مواقع التواصل الإجتماعي بشكل جديد وفريد من نوعه متحركة تلفت النظر إليها فهي جميلة ولها تاثير خاص  


كيفية إضافة أزرار مواقع التواصل الإجتماعي المتحركة على مدونتك
من لوحة تحكم مدونتك -->> التخطيط -->> إضافة أداة ثم أختر أداة  
  
<div><a href="https://twitter.com/ضع هنا رابط تويتر" title="تابعنا على تويتر" class="social-link social-twitter"></a><div> <div><a href="https://www.facebook.com/ facebook ضع هنا رابط" title="تابعنا على فيس بوك" class="social-link social-facebook"></a></div> <div><a href="http://feeds.feedburner.com/feeds ضع هنا رابط " 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(http://3.bp.blogspot.com/-imX7YgRyr08/U-yARyGN5FI/AAAAAAAANbA/4hoPiwpFO28/s1600/twitter-sprite.png) } .social-rss { background-image: url(http://1.bp.blogspot.com/-Z9xBt0KFJW4/U-yAR5YZ7tI/AAAAAAAANbM/wGmM77Q6sYk/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(http://3.bp.blogspot.com/-d9tt3kxKbmg/U-yASA8GuWI/AAAAAAAANbE/2UwDsjlARbs/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>
لا تنسى ان تغير روابط 
 ثم حفظ الأداة يمكنك وضعها في أي مكان ترغب بأن تظهر في مدونتك أو حتى من خلال القالب ثم محرر html


عن الكاتب

Abderahim Makoul عبدالرحيم من المغرب

التعليقات


اتصل بنا

إذا أعجبك محتوى مدونتنا نتمنى البقاء على تواصل دائم ، فقط قم بإدخال بريدك الإلكتروني للإشتراك في بريد المدونة السريع ليصلك جديد المدونة أولاً بأول ، كما يمكنك إرسال رساله بالضغط على الزر المجاور ...

جميع الحقوق محفوظة

تقني المعلوميات