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

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

مرحبا بكل متابعين وزوار مدونة تعلم الكرام

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

شكل الأضافة

شرح التركيب

اذهب الى بلوجر ومن ثم التخطيط ومن ثم اضافة اداة ثم اختار HTML/JAVASCRIPT وبعدها قم بوضع الكود التالى مع تغيير ما باللون الأحمر الى الرابط المناسب

<div class="metro-social">
<li><a class="fb" href="http://www.facebook.com/ضع اسم الضفحه هنا"></a></li>
<li><a class="tw" href="http://twitter.com/ ضع اسم حسابك هنا فقط"></a></li>
<li><a class="gp" href="https://plus.google.com/ رابط صفحتك هنا"></a></li>
<li><a class="fd" href="http://feeds.feedburner.com/ضع رابط الخلاصات الاسم فقط"></a></li>
</div>
<style>
/*Metro UI Social Profile Widget v2.0 by Tech Prevue Labs
Web link to gadget code: [url]http://7ewratna.blogspot.com/2013/03/add-social-media-to-your-site-with-metro-style.html[/url]
Distributed under license CC BY-NC-ND 3.0 INT
Please keep license information intact while using this widget*/
.metro-social{width:285px}
.metro-social li{position:relative;cursor:pointer;padding:0;list-style:none}
.metro-social .fb,.tw,.gp,.fd{z-index:7;float:left;margin:1px;position:relative;display:block}
.metro-social .fb{background:url(//goo.gl/6xmUk) no-repeat center center #1f69b3;width:140px;height:141px}
.metro-social .tw{background:url(//goo.gl/oyiFK) no-repeat center center #43b3e5;width:140px;height:70px}
.metro-social .gp{background:url(//goo.gl/oT0kF) no-repeat center center #da4a38;width:140px;height:69px}
.metro-social .fd{background:url(//goo.gl/ncoLY) no-repeat center center #e9a01c;width:282px;height:69px}
.metro-social li:hover .fb{background:url(//goo.gl/MH8AP) no-repeat center center #1f69b3}
.metro-social li:hover .tw{background:url(//goo.gl/hHRHv) no-repeat center center #43b3e5}
.metro-social li:hover .gp{background:url(//goo.gl/wva4B) no-repeat center center #da4a38}
.metro-social li:hover .fd{background:url(//goo.gl/JFGqn) no-repeat center center #e9a01c}
</style>
<br />

والى هنا اخوانى الكرام تنتهى هذة التدوينة

 اتمنى ان اكون قد أفدتكم بشئ والى اللقاء

 فى تدوينة أخرى