مرحبا بكم من جديد أحبائي في مدونتكم المفضلة: مدونة محمد نجيب للمعلوميات و مع درس جديد ألا وهو:
إضافة أزرار الشبكات الإجتماعية بشكل ويندوز8 لمدونة بلوجر.
وهي إضافة في منتهى الجمال بحيث تعطي لمدونتك جمالية رائعة ,إضافة إلى أنها تشجع الزوار بالضغط عليها, فكما لا يخفى على الجميع فمواقع التواصل الإجتماعي تلعب دورا هاما في جلب الزوار إلى مدونتك.
طريقة تركيب الإضافة:
1-أدخل إلى مدونتك ثم اذهب إلى لوحة التحكم
2-ثم إلى تخطيط
3-إضافة أداة Html/ java script
ثم ألصق الكود التالي:
<div class="metro-social">
<li><a class="fb" href="https://www.facebook.com/medoinformatique"></a></li>
<li><a class="tw" href="https://twitter.com/bamskan1983"></a></li>
<li><a class="gp" href="https://plus.google.com/116508885413609489277"></a></li>
<li><a class="fd" href="http://feeds.feedburner.com/blogspot/GcAGDM"></a></li>
</div>
<style>
/*Metro UI Social Profile Widget v2.0 by Tech Prevue Labs
Web link to gadget code: http://medonajib.blogspot.com/2013/05/social-profile-gadget-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,.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> -
4- قم بتغيير ما لون باللون الأخضر بحساباتك.
5- وأخيرا قم بحفظ الأداة ومبروك عليك
لا تبخل علينا بتعليقاتك فكلمة شكر تكفي
محمد نجيب يحييكم
إضافة أزرار الشبكات الإجتماعية بشكل ويندوز8 لمدونة بلوجر.
وهي إضافة في منتهى الجمال بحيث تعطي لمدونتك جمالية رائعة ,إضافة إلى أنها تشجع الزوار بالضغط عليها, فكما لا يخفى على الجميع فمواقع التواصل الإجتماعي تلعب دورا هاما في جلب الزوار إلى مدونتك.
طريقة تركيب الإضافة:
1-أدخل إلى مدونتك ثم اذهب إلى لوحة التحكم
2-ثم إلى تخطيط
3-إضافة أداة Html/ java script
ثم ألصق الكود التالي:
<div class="metro-social">
<li><a class="fb" href="https://www.facebook.com/medoinformatique"></a></li>
<li><a class="tw" href="https://twitter.com/bamskan1983"></a></li>
<li><a class="gp" href="https://plus.google.com/116508885413609489277"></a></li>
<li><a class="fd" href="http://feeds.feedburner.com/blogspot/GcAGDM"></a></li>
</div>
<style>
/*Metro UI Social Profile Widget v2.0 by Tech Prevue Labs
Web link to gadget code: http://medonajib.blogspot.com/2013/05/social-profile-gadget-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,.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> -
4- قم بتغيير ما لون باللون الأخضر بحساباتك.
5- وأخيرا قم بحفظ الأداة ومبروك عليك
لا تبخل علينا بتعليقاتك فكلمة شكر تكفي
محمد نجيب يحييكم