الثلاثاء، 7 أكتوبر 2014
إضافة تابعنا عبر الشبكات الاجتماعية إلى مدونتك على بلوجر
كرأي شخصي، وبالنسبة لي فإن إضافة تابعنا عبر الشبكات الاجتماعية من بين الإضافات التي تضفي جمالية واحترافية إلى قالب مدونتك، لهذا إن كنت تريد أن تجعل قالب مدونتك أفضل وترتقي به فعليك بهذه الإضافة!
صورة للإضافة:
نمر الآن لطريقة التركيب.
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>
لا تنسوا التعديل على الروابط!
وبالنهاية، أتمنى أن ينال الموضوع إعجابكم، والسلام عليكم ورحمة الله تعالى وبركاته!
دمتم في رعاية الله وحفظه!
åäÇ ÇÚáÇä ÇÏÓäÓ
الكاتب: معاذ غازي
معاذ غازي، 15 سنة، شاب مغربي يعشق الحاسوب، أدرس بالسنة الأولى ثانوي تأهيلي، أعشق كل مايخص عالم التصميم الجرافيكي وخصوصا تصميم المواقع وتصاميم اللوجوهات.. إلى جانب أنه لدي خبرة في مجال تطوير المواقع، وخصوصا في البلوجر والسيو، أنشأت هته المدونة بغرض مشاركة معارفي مع الآخر، حتى تعم الفائدة!
الاشتراك في:
تعليقات الرسالة (Atom)
ليست هناك تعليقات:
إرسال تعليق