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

[linnou]

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

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

-- الشكل رقم 1

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

رمز Code:
<div class=&quot;metro-social&quot;> <li><a class=&quot;fb&quot; href=&quot;http://www.facebook.com/alamcumputer&quot;></a></li> <li><a class=&quot;tw&quot; href=&quot;http://twitter.com&quot;></a></li> <li><a class=&quot;gp&quot; href=&quot;https://plus.google.com/u/0/101656027772396322850/posts&quot;></a></li> <li><a class=&quot;fd&quot; href=&quot;http://feeds.feedburner.com/blogspot/ceFDB&quot;></a></li> </div> <style> /*Metro UI Social Profile Widget v2.0 by Tech Prevue Labs Web link to gadget code: http://www.techprevue.com/2014/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;cursorointer;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>

-- الشكل رقم 2

ولإضافة هذا الشكل نتبع نفس الخطوة المذكورة سلفا لكن مع وضع الكود code التالي :
رمز Code:
<div class=&quot;metro-social&quot;> <li><a class=&quot;fb&quot; href=&quot;http://www.facebook.com/YOURNAME&quot;></a></li> <li><a class=&quot;tw&quot; href=&quot;http://twitter.com/YOURNAME&quot;></a></li> <li><a class=&quot;gp&quot; href=&quot;https://plus.google.com/YOURNAME&quot;></a></li> <li><a class=&quot;pi&quot; href=&quot;http://pinterest.com/YOURNAME&quot;></a></li> <li><a class=&quot;in&quot; href=&quot;https://www.linkedin.com/in/YOURNAME&quot;></a></li> <li><a class=&quot;yt&quot; href=&quot;http://www.youtube.com/YOURNAME&quot;></a></li> <li><a class=&quot;fd&quot; href=&quot;http://feeds.feedburner.com/YOURNAME&quot;></a></li> </div> <style> /*Metro UI Social Profile Widget v3.0 by Tech Prevue Labs Web link to gadget code: http://www.techprevue.com/2014/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;cursorointer;padding:0;list-style:none} .metro-social .fb,.tw,.gp,.pi,.in,.yt,.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: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>
المصدر ز اضافة ازرار المواقع الاجتماعية بشكل ميترو | مدونة blog عالم الحاسوب

©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى©