حصرياا اضافة المترو ويندوز 8 بلوجر

حصرياا اضافة المترو ويندوز 8 بلوجر مثل عالم العرب

سلام عليكم

اليوم مع اضافة جميلة جداا

والكل يحبها وضهرت مأخرا 2013

اضافة تعطي لمحة جدابة للمدونة

وسوف اقدمها لكم الان

وهي عبارة عن كود html فقط



الان مع كود و اضافتها

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

وانسخ و لصق الرابط

<center><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://feedburner.google.com/fb/a/mailverify?uri=#/abcdx&"></a></li>
</div>
<style>
/*http://shabsug.blogspot.com*/
.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;di splay: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 /></center>


ومبروك لك

ولا تنسى تغيير بلون احمر بما يناسبك