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

السلام عليكم

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

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

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

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/AVvXsEjRex6tdkWBd-4DIizQ7N_JlfOOimAItddREGkD4LUx3cAdG1d0wd7ynPhtnK35WWFefVAEjGBIhc5i9NlU9GrqN8nQRAV3FmqCTZ0ZjRdcYzswewOnDhgmxJJ1c_dWioQkvyulPAL5IqU/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/AVvXsEj8O8zpw3knlxTnFwc4jN56ZZL_8VeTy60Vr8FTCUTMYlHcnQahf1bCiIJXZYm4MO9LLeDJRZt_5es8-8hwxMsUicM1Ohqf5weQXYLYIxEy6Tdbr03H2A6frLqBjb5lWMKpJ0nOcjS0r3g/s1600/youtube2.png)top no-repeat;}
.twt-icone{
width: 50px;
height: 32px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq08nkc87mwuSjoRzKAwSaMgu0ZwfIFuEWpR-IF-FaEQEZxqza_I-zFIyXyppxxtUpgSj5olqTHo2vW-bgsfeFI38uYS6h36bG_oL0j-9Z-HsMpMA5OvdJ4_htZB2yCA4AyoDOIUOzGBY/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/AVvXsEiMTOgGyM63vVWo3YM7lWb69xPqcjglWiKFp1h2pa5a5qM7N63z13_J-2L_iYi7GGISSyBALKwV8H2YLNeo640pKNPlBRyuoyVVf6NWrgiRwS3zl9xZW0pUN2jaTofsyLVNEAzaUjhcjW4/s1600/twitter2.png)top no-repeat;}
.face-icone{
width: 50px;
height: 32px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAIN0GEt5axfrnrAdPXcNzk5PmVa_iV1xwQ-RQnsFDodMZD8cPX7443IZK5ejrn1hi9i_6kFbSe9Qok27aVwIDz08_Fvjx0U1MYiDUk5zHXSee1bUyjc4WyBRk8glkGxPJsfNC72baCnk/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/AVvXsEietSWl9XXHe10OFSPj1sr692A_hscjiaoqjXvD-nIKLd7itUbGfEgQeW7ERtT97OPIie5Xj-lZVMlds5EYTjmAsWr9g6-Ci9dwztFv5tQS34P8t_L9B1f71IK9z0iy25tOb5udO9WsE14/s1600/facebook2.png)top no-repeat;}
.rss-icone{
width: 50px;
height: 32px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixP_TptNijQuH8TmcnUP2lDDwW8a7wkoXGkncQKOLFpc531ASi54NMbhx_QDKdPsS8qogkMkxafDtaLN7CeqE7IZszddowu265iidEdifnpNs3g7libg6uP52OfawC58S-fXP7614HuRg/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/AVvXsEiHNSPljlfy5tO1KJ5h5JKdFhesZli4g_Fx8i5UTU0fMUOZKQWAkY8OPa5mGrMSHeLHOWvWKfyAV4e-MHhyajzF5NyELDostovY3KdlZOLLiKeQtI72b_dbRzJvUT9WiwkrFyM0QQhiPvA/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

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

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

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

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

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

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

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

http://feeds.feedburner.com/m3infos/AqwtX

10.000

مشترك

الشكل 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/#

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

آخر الأخبار

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







السلام عليكم

التعليقات

آخر الأخبار

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







السلام عليكم

شاهد أيضاً

موضوعات هامة قد يهمك مشاهدتها أنترنت, مقالات

التعليقات

موضوعات هامة قد يهمك مشاهدتها
أنترنت, مقالات