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

السلام عليكم ورحمة الله وبركاتة

بسم الله الرحمن الرحيم

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

والان مع طريقة اضافة الكود

ادخل الى لوحة تحكم بلوجر من هنا 

التخطيط > اضافة اداة > HTML/JAVASCRIPT 

فى الاسم ضع اى اسم يناسبك

وفى المحتوى ضع الكود التالى

  

<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://feeds.feedburner.com/رابطك على فيد بورنر"></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>

ناتى للتعديل على الكود قم بتغير

رابطك على تويتر - فيسبوك - جوجل - فيدبونر 

بما يناسبك