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

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

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

متال

طريقةالتركيب.
-------------

لوحة التحكم في بلوجر.
ندخل إلى تخطيط.

نختار أداة HTML/JAVASCRIPT.

مع تغيير ما سادكره.



<div class="metro-social">
<li><a class="fb" href="http://www.facebook.com/001sofaxe?ref=hl"></a></li>
<li><a class="tw" href="http://twitter.com/HAMZAKHARBAUCH"></a></li>
<li><a class="gp" href="https://plus.google.com/u/0/b/109611977350029470765/109611977350029470765/posts"></a></li>
<li><a class="fd" href="http://feeds.feedburner.com/blogspot/gBhet"></a></li>
</div>
<style>
/*Metro UI Social Profile Widget v2.0 by Tech Prevue Labs
Web link to gadget code: http://sofaxe.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>

قم بتغير هذه عبارة (https://twitter.com/HAMZAKHARBAUCH ) برابط صفحتك على تويتر.

قم بتغير هذه عبارة (http://feeds.feedburner.com/blogspot/gBhet ) برابط خلاصة مدونتك.

قم بتغير هذه عبارة (https://www.facebook.com/001sofaxe?ref=hl ) برابط صفحتك على فيس بوك

قم بتغير هذه عبارة . (https://plus.google.com/u/0/b/109611977350029470765/109611977350029470765/posts ) برابط صفحتك على جوجل بلس.