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

اضافة ازرار المواقع الاجتماعية بشكل ميترو

فهي أدات جميلة جدا وشكلها يشبه شكل ويندوز ثمانية وسوف تضيف لمسة سحرية لمدونتك

.وكن متأكد ان عندما يراها الزائر سوف يضغط عليها بدون تردد

:طريقة إضافة الأداة

 HTML/JavaScript اذهب الى التخطيط >> اضافة اداة >> اختر

:الشكل الاول

<div class="metro-social">
<li><a class="fb" href="http://www.facebook.com/YOURNAME"></a></li>
<li><a class="tw" href="http://twitter.com/YOURNAME"></a></li>
<li><a class="gp" href="https://plus.google.com/YOURNAME"></a></li>
<li><a class="pi" href="http://pinterest.com/YOURNAME"></a></li>
<li><a class="in" href="https://www.linkedin.com/in/YOURNAME"></a></li>
<li><a class="yt" href="http://www.youtube.com/YOURNAME"></a></li>
<li><a class="fd" href="http://feeds.feedburner.com/YOURNAME"></a></li>
</div>
<style>
/*Metro UI Social Profile Widget v3.0 by Tech Prevue Labs
Web link to gadget code: http://www.techprevue.com/2013/02/social-profile-widget-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,.pi,.in,.yt,.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:68px;height:70px}
.metro-social .gp{background:url(//goo.gl/oT0kF) no-repeat center center #da4a38;width:69px;height:70px}
.metro-social .pi{background:url(//goo.gl/7olxx) no-repeat center center #d73532;width:68px;height:69px}
.metro-social .in{background:url(//goo.gl/PhFhj) no-repeat center center #0097bd;width:69px;height:69px}
.metro-social .yt{background:url(//goo.gl/zcwjB) no-repeat center center #e64a41;width:140px;height:69px}
.metro-social .fd{background:url(//goo.gl/lhBP1) no-repeat center center #e9a01c;width:140px;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 .pi{background:url(//goo.gl/IORvy) no-repeat center center #d73532}
.metro-social li:hover .in{background:url(//goo.gl/2zHrm) no-repeat center center #0097bd}
.metro-social li:hover .yt{background:url(//goo.gl/I1c4a) no-repeat center center #e64a41}
.metro-social li:hover .fd{background:url(//goo.gl/CjzDP) no-repeat center center #e9a01c}
</style>

إستبدل YOURNAME بحسابك
  
الشكل الثاني:

<div class="metro-social">
<li><a class="fb" href="http://www.facebook.com/YOURNAME"></a></li>
<li><a class="tw" href="http://twitter.com/YOURNAME"></a></li>
<li><a class="gp" href="https://plus.google.com/YOURNAME"></a></li>
<li><a class="fd" href="http://feeds.feedburner.com/YOURNAME"></a></li>
</div>
<style>
/*Metro UI Social Profile Widget v2.0 by Tech Prevue Labs
Web link to gadget code: http://www.techprevue.com/2013/02/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>
<br>

بحسابك YOURNAME إستبدل

هذا كل شيئ اتمنى ان تكون عجبتك هذه الإضافة ولا تنسى زيرتنا على صفحتنا في الفيس بوك