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

مارس 10, 2013 Najib

السلام عليكم ورحمة الله وبركاته اليوم سأقدم لكم إضافة جميلة جدا لمدونات بلوجر وصراحة أعجبتني هذه الإضافة كثيرا وقلت أشارككم إياها. فهي عبارة عن أزرار المواقع الاجتماعية على شكل Metro كما في الوندوز 8 الرائع هذه الإضافة متوفرة بشكلين فالأولى تحتوي بالإضافة إلى زر Facebook أزرار Twitter, Google plus, RSS. أما الثانية فبالإضافة إلى الأزرار المذكورة سلفا هناك زر Linkedinو Pinterest.

لن أطيل عليكم أكثر وأدعكم تجربون هذه الإضافة الرائعة.

-- الشكل رقم 1

لاستخدام هذا الشكل نذهب إلى التخطيط >> اضافة اداة >> اختر HTML/JavaScript
ثم نقوم بإضافة الكود التالي مع تغيير الروابط الملونة بروابط مدونتك على المواقع الإجتماعية.

<div class="metro-social"> <li><a class="fb" href="http://www.facebook.com/alamcumputer"></a></li> <li><a class="tw" href="http://twitter.com"></a></li> <li><a class="gp" href="https://plus.google.com/u/0/101656027772396322850/posts"></a></li> <li><a class="fd" href="http://feeds.feedburner.com/blogspot/ceFDB"></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>

-- الشكل رقم 2

ولإضافة هذا الشكل نتبع نفس الخطوة المذكورة سلفا لكن مع وضع الكود التالي :

<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>

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

مشاركة