صندوق مترو للإشتراك في مواقع التواصل الإجتماعي

السلام عليكم

اعود لكم اليوم بعد إطلاق مدونة محترف المعلومات بقالب جميل وبسيط أيضا اقدم اليكم عدة اكواد لاضافات ازرار المواقع الاجتماعية  على شكل مقدمة المترو (او الويندوز 8 ) الذي يتميز بطابع البساطة والتناسق.و التي سوف تمكين متابعي مدونتك او موقعك  من الإشتراك في حساباتك أو صفحاتك على المواقع التواصل الإجتماعي مثل :اليوتيوب، التويتر، الفيس بوك، والقائمة البريدية الخ..

إذا امر الآن إلى طريقة التركيب وهي طريقة سهلة جدا :

1. نذهب إلى لوحة التحكم في بلوجر
2. ندخل إلى تخطيط
3. نختار المكان الذي سوف نضيف فيه الأداة ونضغط على إضافة أداة
4. نختار أداة HTML/JAVASCRIPT
5. ونضع هذا الكود
6. ثم حفظ

 7.لا تنسو إستبدال الروابط  بما يناسبك

الشكل 1 :

الكود الخاص به :

<style> .social-icone{ height:108px; background-image:url(http://www.m3infos.blogspot.com);} .social-icone div{ margin: 8px 12px;} .social-icone a{ text-decoration:none;} .you-icone b, .twt-icone b,.face-icone b,.rss-icone b{ font:14px tahoma; color:#8c8b8b;} .you-icone span,.twt-icone span,.face-icone span,.rss-icone span{font:11px tahoma; color:#a3a3a3; } .you-icone{ width: 50px; height: 32px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5OOgG5OAENw5Nx4TK-XE7xgqogfiTcW4cHqiYNn3yrZ6EGuMQNScoXfXIb2wXP14R1LMS6naHKx-NWiWcXdbX2tPiWEKkfCMu6wNLTdVJZEmgE_pVYPf8FWGPCcXLdtBfUOutZ8yNQiw/s1600/youtube.png)top no-repeat; text-align: center; padding-top: 56px; float:right; } .you-icone:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbb-7PfQU3jjA05al0cy0n8xpbegFDlF4weLLHSuunyIq_oosZrw5znCN_KdaJ8lhpeT1IqZfLGK5AyvWX-q_nLXIJARKoOdyBHqM6P_OQDVf6_PVfWLDjdV6ydOnZldkm42-AS2uu92A/s1600/youtube2.png)top no-repeat;} .twt-icone{ width: 50px; height: 32px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPlYRbJRvEWVGPVTF12x5ouF3hDPOzyMFlfgYBiNVGK8R-ERUXbJIe81JmQ_wCMEbImk62M0CfXIgNzW3VxqIR4mdfkckYdRrAR6RH1rjg-yjN8fOTejHQ1EF6ihR6X8oBMy54kjR45vU/s1600/twitter.png)top no-repeat; text-align: center; padding-top: 56px; float:right; } .twt-icone:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitD9W1q1oaPImW2siq1K8vK3s3kiRHL-IRc79deXlDZizhcG92Zb-XFCP6m2ge_J0IFGwLql2T_05aba3tUytMjQwAgLXBuDh1JuqCEuHPOw_RRRZIeudH508S4AOLTjeBkJMwrcNPfDc/s1600/twitter2.png)top no-repeat;} .face-icone{ width: 50px; height: 32px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkqnJVSZeZtlSzjgf9sCLpeeSCnk-q1PZya3UczhF3Ae9ik61bQXbr9lnb04Vh6U1QUihKjcKQxbZN8WPxB0x0zjXpkiLXNDN7fEXZg2RkeDu73kdyM6H9z96Wf8NA8yDc7KMT7DN5Joo/s1600/facebook.png)top no-repeat; text-align: center; padding-top: 56px; float:right; } .face-icone:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6hfsCIybMYaDFiy3Lc3j8VZfca23UWBmQ1U3Y6MD9R1YfwR0lJ1iqvYUnQ__MUJxbnSSyhHxMbSSFf-owArm5UgPJO8Ch7CyQLlw3-2dovLaB7WBTHq5CE6TlrILfaF8Cq6VjbFyDgH4/s1600/facebook2.png)top no-repeat;} .rss-icone{ width: 50px; height: 32px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoCUxFN9il_A2Pd9TAaFQ16EW2LYCbrvswE3ZNmzU81MZGRt908esWWRCSVdGahCMYXRY6cKj4JfMOIWKtD67OOheOC95M1tXS7e-SYoNBA4Yw9hXaQr0RzQbNc8AVUB_NAEFXKiMgAj0/s1600/RSS.png)top no-repeat; text-align: center; padding-top: 56px; float:right; } .rss-icone:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzusJXtf_LaGU7fa-f-qFMjvMKTavJ605frBY4z9X4a1avLWpHazGMqX0VGByJdCfHofGDK_CX6CHP94bVBw99XePLxgfuJU0nSeWRXeLVuftO3Ni8JkvDuPDtZV-tkO7WsujRV-fEAsQ/s1600/RSS2.png)top no-repeat;} .post-footer-line > * { margin-left: 0; } </style> <div class="social-icone"><a href="http://www.youtube.com/m3geek1"><div class="you-icone"><b>99.000</b><span>مشترك</span></div></a><a href="http://www.twitter.com/m3infos"><div class="twt-icone"><b>4500</b><span>متابع</span></div></a><a href="https://www.facebook.com/m3infos"><div class="face-icone"><b>250 ألف</b><span>معجب</span></div></a><a href="http://feeds.feedburner.com/m3infos/AqwtX"><div class="rss-icone"><b>10.000</b><span>مشترك</span></div></a></div><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></di

قمو بتغير هذه الروابط الى روابط الخاصة بكم
        رابط قناة اليوتوب :

1. http://www.youtube.com/m3geek1
2. 99.000 
3. مشترك

رابط التويتر:

1. http://www.twitter.com/m3infos
2. 4500
3. متابع

 رابط الفيسبوك :

1. https://www.facebook.com/m3infos
2. 250 ألف
3. معجب

رابط التغدية :

1. http://feeds.feedburner.com/m3infos/AqwtX
2. 10.000
3.  مشترك

الشكل 2:

<div class="metro-social"><li><a class="fb" href="http://www.facebook.com/#"></a></li><li><a class="tw" href="http://twitter.com/#"></a></li><li><a class="gp" href="https://plus.google.com/#"></a></li><li><a class="fd" href="http://feeds.feedburner.com/#"></a></li></div><style>/*Metro UI Social Profile Widget v2.0 by Tech Prevue Labs Web link to gadget code: http://www.m3infos.blogspot.com/search/label/%D8%A8%D9%84%D9%88%D8%AC%D8%B1?max-results=8 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><br><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div></div

قمو بتغير هذه الروابط الى روابط الخاصة بكم:

 http://www.facebook.com/#

http://twitter.com/#

https://plus.google.com/#

http://feeds.feedburner.com/#

الشكل 3 :

الكود الخاص به :






<div class="metro-social"><li><a class="fb" href="http://www.facebook.com/#"></a></li><li><a class="tw" href="http://twitter.com/#"></a></li><li><a class="gp" href="https://plus.google.com/#"></a></li><li><a class="pi" href="http://pinterest.com/#"></a></li><li><a class="in" href="https://www.linkedin.com/in/#"></a></li><li><a class="yt" href="http://www.youtube.com/#"></a></li><li><a class="fd" href="http://feeds.feedburner.com/#"></a></li></div><style>/*Metro UI Social Profile Widget v3.0 by Tech Prevue Labs Web link to gadget code: http://www.m3infos.blogspot.com/search/label/%D8%A8%D9%84%D9%88%D8%AC%D8%B1?max-results=8 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><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div></div>

قمو بتغير هذه الروابط الى روابط الخاصة بكم:

http://www.facebook.com/#

http://twitter.com/#

https://plus.google.com/#

http://pinterest.com/#

https://www.linkedin.com/in/#

http://www.youtube.com/#

http://feeds.feedburner.com/#