لمحة جديدة الأداة الاجتماعية للمدون ..

وهنا لمحة جديدة الأداة الاجتماعية للمدون الذي هو من تصميم أنيق ومستوحاة من واجهة مترو على الطراز. هذه الواجهة على غرار مترو ويندوز هو في الواقع مفهوم التصميم (8) الذي هو أكثر ودية لأجهزة الكمبيوتر اللوحي. هذه واجهة المستخدم إلى حد كبير شعبية الآن، بعد أيام. لذلك أحمل هذه الأداة لبلوق الخاص بك. ومعظمنا أحب هذا على وجه اليقين واستخدامها في الشريط الجانبي بلوق الخاصة حيث سوف تبدو أكثر جميلة. الميزة الرئيسية لهذه القطعة هو تحوم تأثير والتصميم الأنيق.

اذهب إلى لوحة تحكم مدونتك.
اضغط على تخطيط.
ثم إضافة أداة.
ثم أضف أداة HTML/Javascript
ثم ضع الكود التالي فيها: وقم بتغير مامكتوب بالاحمر ضع فيه عناوينك .....

<div class="metro-social">
<li><a class="fb" href="http://www.facebook.com/myfelipro"></a></li>
<li><a class="tw" href="http://twitter.com/myfelipro"></a></li>
<li><a class="gp" href="https://plus.google.com/00000000415252"></a></li>
<li><a class="fd" href="http://feeds.feedburner.com/myfelipro"></a></li>
</div>

<style>
/*Metro UI Social Profile Widget v2.0 by Tech Prevue Labs
Web link to gadget code: http://myfilespro.blogspot.com/
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>