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

أضف تعليق

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

تابعنا علي شبكات الاجتماعية

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

نفتح لوحة تحكم البلوجر , ثم نختار تخطيط
نضيف أداة جدبدة في مكان الذي نريد ادراج فيه الاداة
نختار html / JavaScript .

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

<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 : برابط الخاص بك علي شبكات الاجتماعية كما هو موضح ..

بقلم عالم المعلوميات

بقلم عالم المعلوميات : مدون جزائري عمره 20 سنة, يهتم بكل ما هو جديد في عالم التقنيات و الأنترنت طموحه مساعدة الأخرين في الوصول إلى المعلومة بأسهل طريقة ممكنة يمكنكم متابعتي عبر مواقع التواصل الاجتماعية او , ، .

عن المدونة :

مدونة عالم المعلوميات هي عبارة عن مدونة معلوماتية تضم مجموعة من الدروس و الشروحات التي تفيد الشباب العربي ، بالإضافة إلى مقالات يومية تم تأسيسها سنة 2013 حيث تستقطب العديد من رواد الأنترنيت من كافة الدول العربية عبر الشروحات الحصرية والتي نطمح من خلالها إلي إثراء المحتوي العربي .

أخر الأخبار

عالم المعلوميات

أخر الأخبار