بسم الله الرحمن الرحيم
والصلاة والسلام على خير خلق الله سيدنا محمد عليه أفضل الصلاة واتم التسليم
السلام عليكم ورحمة الله وبركاته .
إضافة تابعونا على المواقع الاجتماعية بشكل الميترو | Metro.
إضافة جميــلة على شكل الميترو مصصمة باحترافية ابتكرتها بنفسي ان شاء الله تعجبكم.
صورة لإضافة
مثال مباشر
طريقة التركيب
هذا هو الكود قم بتركيبه فى أداة جديدة وتغيير # بروابط الصفحات الاجتماعية فقط فلا يحتاج إلى أي شرح ^_^
والصلاة والسلام على خير خلق الله سيدنا محمد عليه أفضل الصلاة واتم التسليم
السلام عليكم ورحمة الله وبركاته .
إضافة جميــلة على شكل الميترو مصصمة باحترافية ابتكرتها بنفسي ان شاء الله تعجبكم.
هذا هو الكود قم بتركيبه فى أداة جديدة وتغيير # بروابط الصفحات الاجتماعية فقط فلا يحتاج إلى أي شرح ^_^
TH3_Professional_Blogger|+->>copy/past this code and Enjoy+->>
<center><div class="metro-social" style='margin:-2px -03px 0px 0px;'>
<li><a class="fb" href="#" style=""></a></li><a style='display:none;'>facebook<a>
<li><a class="tw" href="#" style=""></a></li><a style='display:none;'>twitter<a>
<li><a class="gp" href="#" style=""></a></li><a style='display:none;'>googleplus<a>
<li><a class="pi" href="#" style=""></a></li><a style='display:none;'>pintrest<a>
<li><a class="in" href="#" style=""></a></li><a style='display:none;'>in<a>
<li><a class="yt" href="#" style=""></a></li><a style='display:none;'>youtube<a>
<li><a class="fd" href="#" style=""></a></li><a style='display:none;'>feed<a>
<li><a class="sk" href="#" style=""></a></li><a style='display:none;'>skype<a>
<li><a class="pc" href="#" style=""></a></li><a style='display:none;'>picasa<a>
<li><a class="mc" href="#" style=""></a></li><a style='display:none;'>my<a>
<li><a class="dg" href="#" style=""></a></li><a style='display:none;'>digg<a>
</div>
<style>
.metro-social{margin: -15px 6px 0px 0px;width:285px}
.metro-social li{position:relative;cursor:pointer;padding:0;list-style:none}
.metro-social .fb,.tw,.gp,.pi,.in,.yt,.fd,.sk,.pc,.mc,.dg{z-index:7;float:left;margin:1px;position:relative;display:block}
.metro-social .fb{-webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear;background:url(http://im35.gulfup.com/aLGeg.png) no-repeat center center #1f69b3;width:140px;height:141px}
.metro-social .tw{-webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear;background:url(http://im35.gulfup.com/TlT0D.png) no-repeat center center #19bfe5;width:68px;height:70px}
.metro-social .gp{-webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear;background:url(http://im39.gulfup.com/AxoMi.png) no-repeat center center #da4a38;width:69px;height:70px}
.metro-social .pi{-webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear;background:url(http://im31.gulfup.com/CC3ah.png) no-repeat center center #cb2027;width:68px;height:69px}
.metro-social .in{-webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear;background:url(http://im38.gulfup.com/g8Lx4.png) no-repeat center center #006699;width:69px;height:69px}
.metro-social .yt{-webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear;background:url(http://im39.gulfup.com/zyPvZ.png) no-repeat center center #c8312b;width:140px;height:69px}
.metro-social .fd{-webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear;background:url(http://im34.gulfup.com/dVLFc.png) no-repeat center center #fd9f13;width:140px;height:69px}
.metro-social .sk{-webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear;background:url(http://im36.gulfup.com/Big6n.png) no-repeat center center #10bef2;width:140px;height:141px}
.metro-social .pc{-webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear;background:url(http://im36.gulfup.com/q47CR.png) no-repeat center center #9d48a1;width:68px;height:70px}
.metro-social .mc{-webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear;background:url(http://im39.gulfup.com/7ROEa.png) no-repeat center center #003399;width:69px;height:70px}
.metro-social .dg{-webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear;background:url(http://im36.gulfup.com/CnrUW.png) no-repeat center center #006699;width:140px;height:69px}
.metro-social li:hover .fb{-webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear;background:url(http://im35.gulfup.com/FNTKt.png) no-repeat center center #fff}
.metro-social li:hover .tw{-webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear;background:url(http://im35.gulfup.com/qF41t.png) no-repeat center center #fff}
.metro-social li:hover .gp{-webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear;background:url(http://im39.gulfup.com/Fegmu.png) no-repeat center center #fff}
.metro-social li:hover .pi{-webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear;background:url(http://im31.gulfup.com/UETDU.png) no-repeat center center #fff}
.metro-social li:hover .in{-webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear;background:url(http://im38.gulfup.com/6JHPC.png) no-repeat center center #fff}
.metro-social li:hover .yt{-webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear;background:url(http://im39.gulfup.com/PheMY.png) no-repeat center center #fff}
.metro-social li:hover .fd{-webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear;background:url(http://im34.gulfup.com/97XSh.png) no-repeat center center #fff}
.metro-social li:hover .sk{-webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear;background:url(http://im36.gulfup.com/yD9kg.png) no-repeat center center #fff}
.metro-social li:hover .pc{-webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear;background:url(http://im36.gulfup.com/7phuE.png) no-repeat center center #fff}
.metro-social li:hover .mc{-webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear;background:url(http://im39.gulfup.com/KVwf6.png) no-repeat center center #fff}
.metro-social li:hover .dg{-webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear;background:url(http://im36.gulfup.com/ECgqz.png) no-repeat center center #fff}
</style>
</center>
<li><a class="fb" href="#" style=""></a></li><a style='display:none;'>facebook<a>
<li><a class="tw" href="#" style=""></a></li><a style='display:none;'>twitter<a>
<li><a class="gp" href="#" style=""></a></li><a style='display:none;'>googleplus<a>
<li><a class="pi" href="#" style=""></a></li><a style='display:none;'>pintrest<a>
<li><a class="in" href="#" style=""></a></li><a style='display:none;'>in<a>
<li><a class="yt" href="#" style=""></a></li><a style='display:none;'>youtube<a>
<li><a class="fd" href="#" style=""></a></li><a style='display:none;'>feed<a>
<li><a class="sk" href="#" style=""></a></li><a style='display:none;'>skype<a>
<li><a class="pc" href="#" style=""></a></li><a style='display:none;'>picasa<a>
<li><a class="mc" href="#" style=""></a></li><a style='display:none;'>my<a>
<li><a class="dg" href="#" style=""></a></li><a style='display:none;'>digg<a>
</div>
<style>
.metro-social{margin: -15px 6px 0px 0px;width:285px}
.metro-social li{position:relative;cursor:pointer;padding:0;list-style:none}
.metro-social .fb,.tw,.gp,.pi,.in,.yt,.fd,.sk,.pc,.mc,.dg{z-index:7;float:left;margin:1px;position:relative;display:block}
.metro-social .fb{-webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear;background:url(http://im35.gulfup.com/aLGeg.png) no-repeat center center #1f69b3;width:140px;height:141px}
.metro-social .tw{-webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear;background:url(http://im35.gulfup.com/TlT0D.png) no-repeat center center #19bfe5;width:68px;height:70px}
.metro-social .gp{-webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear;background:url(http://im39.gulfup.com/AxoMi.png) no-repeat center center #da4a38;width:69px;height:70px}
.metro-social .pi{-webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear;background:url(http://im31.gulfup.com/CC3ah.png) no-repeat center center #cb2027;width:68px;height:69px}
.metro-social .in{-webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear;background:url(http://im38.gulfup.com/g8Lx4.png) no-repeat center center #006699;width:69px;height:69px}
.metro-social .yt{-webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear;background:url(http://im39.gulfup.com/zyPvZ.png) no-repeat center center #c8312b;width:140px;height:69px}
.metro-social .fd{-webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear;background:url(http://im34.gulfup.com/dVLFc.png) no-repeat center center #fd9f13;width:140px;height:69px}
.metro-social .sk{-webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear;background:url(http://im36.gulfup.com/Big6n.png) no-repeat center center #10bef2;width:140px;height:141px}
.metro-social .pc{-webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear;background:url(http://im36.gulfup.com/q47CR.png) no-repeat center center #9d48a1;width:68px;height:70px}
.metro-social .mc{-webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear;background:url(http://im39.gulfup.com/7ROEa.png) no-repeat center center #003399;width:69px;height:70px}
.metro-social .dg{-webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear;background:url(http://im36.gulfup.com/CnrUW.png) no-repeat center center #006699;width:140px;height:69px}
.metro-social li:hover .fb{-webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear;background:url(http://im35.gulfup.com/FNTKt.png) no-repeat center center #fff}
.metro-social li:hover .tw{-webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear;background:url(http://im35.gulfup.com/qF41t.png) no-repeat center center #fff}
.metro-social li:hover .gp{-webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear;background:url(http://im39.gulfup.com/Fegmu.png) no-repeat center center #fff}
.metro-social li:hover .pi{-webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear;background:url(http://im31.gulfup.com/UETDU.png) no-repeat center center #fff}
.metro-social li:hover .in{-webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear;background:url(http://im38.gulfup.com/6JHPC.png) no-repeat center center #fff}
.metro-social li:hover .yt{-webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear;background:url(http://im39.gulfup.com/PheMY.png) no-repeat center center #fff}
.metro-social li:hover .fd{-webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear;background:url(http://im34.gulfup.com/97XSh.png) no-repeat center center #fff}
.metro-social li:hover .sk{-webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear;background:url(http://im36.gulfup.com/yD9kg.png) no-repeat center center #fff}
.metro-social li:hover .pc{-webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear;background:url(http://im36.gulfup.com/7phuE.png) no-repeat center center #fff}
.metro-social li:hover .mc{-webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear;background:url(http://im39.gulfup.com/KVwf6.png) no-repeat center center #fff}
.metro-social li:hover .dg{-webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear;background:url(http://im36.gulfup.com/ECgqz.png) no-repeat center center #fff}
</style>
</center>
بالتوفيق لكم
المصدر ; مدونة نجوم بلوجر
0 التعليقات: