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

كرأي شخصي، وبالنسبة لي فإن إضافة تابعنا عبر الشبكات الاجتماعية من بين الإضافات التي تضفي جمالية واحترافية إلى قالب مدونتك، لهذا إن كنت تريد أن تجعل قالب مدونتك أفضل وترتقي به فعليك بهذه الإضافة!
صورة للإضافة:

نمر الآن لطريقة التركيب.
1-نتوجه إلى منصة بلوجر ثم التخطيط :

2-نضغط إضافة أداة، ثم نتوجه إلى HTML/JavaScript:

3-نقوم بإلصاق هذا الكود، ونضع عنوانا (تابعنا عبر الشبكات الاجتماعية مثلا):
<div class="metro-social">
<li><a class="fb" href="https://www.facebook.com/4garabic"></a></li>
<li><a class="tw" href="http://twitter.com/moadgeek"></a></li>
<li><a class="gp" href="https://plus.google.com/u/0/+MoadGhaziGhazi"></a></li>
<li><a class="yt" href="http://www.youtube.com/user/geekmoad07"></a></li>
<li><a class="fd" href="http://feeds.feedburner.com/4garabic/ITGZ"></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;margin-top: -11px;}
.metro-social .gp{background:url(//goo.gl/oT0kF) no-repeat center center #da4a38;width:69px;height:70px;margin-top: -23px;}
.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:282px;height:69px;margin-top: 1px;}
.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}</style>

لا تنسوا التعديل على الروابط!

وبالنهاية، أتمنى أن ينال الموضوع إعجابكم، والسلام عليكم ورحمة الله تعالى وبركاته!
دمتم في رعاية الله وحفظه!

معاذ غازي -خطوات مطور