اضافة أداة تابعنا علي شبكات الاجتماعية

السلام عليكم اخواني

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

علي شبكات الاجتماعية بشكل رائع تشبه زر أبدء في ويندوز 8 .

من اجل حصول علي هذه الاداة :

نفتح لوحة تحكم البلوجر , ثم نختار تخطيط

نضيف أداة جدبدة في مكان الذي نريد ادراج فيه الاداة

نختار html

نقوم باضافة الكود التالي :

<div class="metro-social">
<li><a class="fb" href="https://www.facebook.com/NAME"></a></li>
<li><a class="tw" href="http://twitter.com/NAME"></a></li>
<li><a class="gp" href="https://plus.google.com/NAME"></a></li>
<li><a class="pi" href="http://pinterest.com/NAME"></a></li>
<li><a class="in" href="https://www.linkedin.com/in/NAME"></a></li>
<li><a class="yt" href="http://www.youtube.com/NAME"></a></li>
<li><a class="fd" href="http://feedburner.google.com/NAME"></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>

    نأتي للتعديل علي كود :

    قم بستبدال كلمة NAME  : برابط الخاص بك علي شبكات الاجتماعية كما هو موضح ..

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