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

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

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

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

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

الشكل 1 :

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

<style>
 .social-icone{ height:108px; background-image:url(http://www.tree4tc2.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/AVvXsEjgSBs-5fYcclvGpTz5vRvxEEGChqpyB9FQJMuOgwUmGWGVowNB7diPXUI-b3ueKhqC1PrYFU3onCc8Wal24fQPoHBv5bbxL1Ob7tp_HyfrYS9z9pWLcq_qmOhmmwhLRUP8vvNT4e2O5t0/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/AVvXsEjzeLbcLHom1ibphz2hYxP-F9vHUTilEhArNUAtqr_ZkN0GmtyGEqXzIY1-6E0-BlsgrMyo02TrIlgRyimID8NEqKPHLxWXzHdejeKxNZmLPpbktLiOaATn3IJ-tUoOGiD9op0hijN-StE/s1600/youtube2.png)top no-repeat;}
.twt-icone{
width: 50px;
height: 32px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib8hGSYIvXGynP2JtZ_vUPbpUtiB_dmrwmcbrqX1aGkacf4JzubfgEiS-QzH0AKrRYhdaERozhQVUF56qEKHSXAEuqDLNbHJAyW1b0YHi6jGRNywGorL1Mgrz47DqH243UenB9DhVsSLg/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/AVvXsEiM5G3Y4BuAjO4_Y5y_-6ya0IySNEss2BD0_aOZLJkRr-m_4WPrjYhsfmf-YCG0hvsNQzBZC2IX6aH6uw5PnHMG-hzWDjaKZC2RedXTmL_nXBpFPU20o-RTDNXUf9JoLrE5kWQ7GCrdYBE/s1600/twitter2.png)top no-repeat;}
.face-icone{
width: 50px;
height: 32px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSFb22sIlE0WgTWZ9aFo2xnew5ckOkdHhAFyE10OAOSS1g-RXqTQTC9_872gE3C55ZjfNISL-IReExqW51xyMLFtADzzTqPXJYjXewNcSPtxFlzCd_0jQVZrdwRvso1avJNc-kujEXkbU/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/AVvXsEgRx266kFWyDJubivKJMTlGlXcYccFFMkgYQ-RLQ99FnKSsineluFar5LPw_pTh3qT-cBVuFjId8_Jh1LtstT20YiSdUKFuElMuyVfrMm1LfxRcCuVaXYGjbO3YeB4yHsnSJhQOkX0_PZQ/s1600/facebook2.png)top no-repeat;}
.rss-icone{
width: 50px;
height: 32px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC3_tvHvwKK7WLMcfHPjdEbpj-K68Fk775KR1Nhpa1KbVw7DGUDw-JnRxFOlxmGeURZ_LZEzDH80x6y-BGGFnbx541Ip2NBIKmomJBo2Hbi3CXw9u2An01Wz2ebox0qE303BYcfoWtqW4/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/AVvXsEgAgalMILFs7y3hDOdCVJpfIePvvdd9_EQGMfYxVgxCuypTZSF3JU7yzp3-ZEybXgn7Dyi78lNdU6akBHTKkZ7VBNYGqWULMsIx_uBvYhtedJyu9bOYM0rzePDt7KIRWH-mrI_Hal_l_v8/s1600/RSS2.png)top no-repeat;}
.post-footer-line > * {
margin-left: 0;
}
</style>

<div class="social-icone">
<#/a href="http://www.youtube.com">
<div class="you-icone">
<b>#</b>
<span>مشترك</span>
</div>
</a>
<#/a href="http://www.twitter.com">
<div class="twt-icone">
<b>#</b>
<span>متابع</span>
</div>
</a>
<#/a href="https://www.facebook.com">
<div class="face-icone">
<b>250 ألف</b>
<span>معجب</span>
</div>
</a>
<#/a href="http://feeds.feedburner.com">
<div class="rss-icone">
<b>#</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
2. # 
3. مشترك

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

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

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

1. #/https://www.facebook.com
2. #
3. معجب

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

1. #/http://feeds.feedburner.com
2. #
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/#

                                    اتمنى تكون الإضافة عجبتكم