الدرس 8 : اضافة ازرار المواقع الاجتماعية على شكل windows 8 ~ برامج المحترف

الدرس 8 : اضافة ازرار المواقع الاجتماعية على شكل windows 8

الزيارات:

Unknown | 5:44 ص | اضافات بلوجر

اضافة ازرار المواقع الاجتماعية على شكل windows 8

لاضافة الاداة:

اذهب الى التخطيط >> اضافة اداة >> اختر HTML/JavaScript

الشكل الاول:

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

</span></div>
</div>
</div>
</div>

استبدل YOURNAME بحسابك

الشكل الثاني:

</div>
</div>
</form>
<div style="color: #333333; font-family: 'droid arabic kufi', tahoma, arial; font-size: 12.558px; line-height: 18.837px;">
</div>
</div>
</div>
</div>

استبدل YOURNAME بحسابك

بقلم برامج المحترف

عزيز مدون عربي اهتم بكل ماهوة جديد وحصري في عالم برامج وتقنيات قررت ان اضع خبرتي البسيطة في مجال برامج وبلوجر في هذه المدونة لكي يستفيد منها الجميع

إذا وجدت هذا الموضوع مفيد يمكنك مشاركته مع زوار مدونتك، أو نشره في المنتديات
URL
HTML
BBCode

برامج المحترف

الدرس 8 : اضافة ازرار المواقع الاجتماعية على شكل windows 8

الزيارات:

اضافة ازرار المواقع الاجتماعية على شكل windows 8

بقلم برامج المحترف

0 التعليقات :

إرسال تعليق

أعلانات برامج المحترف

المشاركات الشائعة

أرشيف المدونة

أقسام المدونة

المتابعون

أعلانات برامج المحترف

برامج المحترف

الدرس 8 : اضافة ازرار المواقع الاجتماعية على شكل windows 8 الزيارات:

اضافة ازرار المواقع الاجتماعية على شكل windows 8

بقلم برامج المحترف

قد يهمك أيضا : اضافات بلوجر

0 التعليقات :

إرسال تعليق

أعلانات برامج المحترف

المشاركات الشائعة

أرشيف المدونة

أقسام المدونة

المتابعون

أعلانات برامج المحترف

الدرس 8 : اضافة ازرار المواقع الاجتماعية على شكل windows 8

الزيارات:

قد يهمك أيضا :
اضافات بلوجر