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

بسم الله الرحمان الرحيم

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

لإضافتها اتبع الخطوات التالية :

1- ادخل الى مدونتك عن طريق الرابط التالي:

http://blogger.com/

2- اذهب الى لوحة التحكم تم اضغط على تخطيط

3- تم اضغط على اضافة أداة ، HTML/JavaScript

ثم الصق الكود التالي:

<div class="metro-social">







<li><a class="fb" href="http://www.facebook.com/th333"></a></li>







<li><a class="tw" href="http://twitter.com/th333"></a></li>







<li><a class="gp" href="https://plus.google.com/th333"></a></li>







<li><a class="fd" href="http://feeds.feedburner.com/th333"></a></li>








</div>








<style>








/*Metro UI Social Profile Widget v2.0 by Tech Prevue Labs








Web link to gadget code: http://th3xd.blogspot.com/2013/05/social-profile-gadget-metro-style.html








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>

4- الأن قم بتغير ما لون بالازرق بحساباتك

المزيد من التشجيع للمزيد من المواضيع