الدرس 261 : كود لاشتراك عبر الشبكات التواصلية بشكل احترافي

كود لاشتراك عبر الشبكات التواصلية بشكل احترافي أصبح يستخدم الأن فى العديد من المواقع نظراً لانه يتميز بالبساطة و الأناقة كما انها مع محترفي الكمبيوتر تتميز أيضاً بسهولة الأضافة , فهى تتيح للزوار متابعتك على مواقع التواصل الأجتماعى و بالتحديد اليوتيوب و تويتر و الفيس بوك و القائمة البريدية...

والأن نمر للتركيب : 

1 - قم بالذهاب إلى تبويب التخطيط

2 - قم بإختيار إضافة أداة   

3 - أختار نوع الأضافة HTML/JavaScript

4 - ضع بها هذا الكود

<style>
.social-icone{ height:108px; background-image:url(http://goo.gl/2Vcbf);}
.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/AVvXsEgq2ZA_2OLmpGkaYKxYMX0X8CQCrEMxvuBhfW9Z1vx1BOytoR7BG5VOBQMZZqUwOMAGfYQ-gH74ennzmvfP4s117_x-L5H1EB2B8ItGCQSFDxIHkuETFOloOXUDxKd4Bv6JBov7EhCCPrM/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/AVvXsEiQDVOlk46K0oMwLPoWM8zY9OFNYDurTQB6TarKNe1inaLAvOpHIlHjX2E1LNhMGk3LHzPcyhxjeHDdsP3oAr8_zyxyLsPqHgnQi7blhZVaFp9cY-TxIC4-LpK6Fa0AdjuEjK9YmjmtqxU/s1600/youtube2.png)top no-repeat;}
.twt-icone{
width: 50px;
height: 32px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLXSuv7bdSXZmgoZIttTDZiet9U-xGlIBROEkSFJLO8tU6fi7_rVn3G_mJFwcGjHuIg92UOIVGg5ZXSEeGKEemnGdIB7UHc34_jBTokN4G-2IqVGXhv61-rLpEMhdUiq2F4sijBMdVQqs/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/AVvXsEgz8iLZ9ZYgNcm-vtb4fbB6IU5EfXCBJydtG2MWSKNG01sOnjtxIqgC4HIsP9vBIBpwyHrGmLFRy5d77n5esMtSAbodLGqF0EcSV6CdsTSgQC6afnnHQOyxNoHYT6N0tQqF0SIZCR0Y58g/s1600/twitter2.png)top no-repeat;}
.face-icone{
width: 50px;
height: 32px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZelHfo6x9YSb-pvuecVImeRlliznNUDd7WV_M8V5FgsQoOaTryLbd12Ylisc3SUButT_Ywehlf1SP1x7DzapEa7hevfVpD_Kom4tnbffoO0bWxt1YmgsPtyNVJ3OonlfejhHEApgOAaY/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/AVvXsEjTkhmtUeZbMLSuwwEjCfO456eWcqFZqgg7qtVBfbzTdqV46lPZHGrbqgXuenlt0bl1vQV0a0lFywbtZIXOUglsCEUyjQNY7qn4z_MBV86_ZBVQkim5oqxBgJuzjP83COpxL5Sz3ctVrE4/s1600/facebook2.png)top no-repeat;}
.rss-icone{
width: 50px;
height: 32px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnXXQ41SeidxaO22y61ROYsXtnr_6UPJOW8qh9Qm7vMTyd9Hr-1kycrszcIfbroslSPjXZibEQyzN4OG493_pf9IHdutlNU2pGSh3UFOksfZvFpjAZyomX4y8-2u3gwh3kIBGueclxx58/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/AVvXsEhSCuIvJyET5h_FKOPn-Q4GvAgyv9iu2C4zsfHBeeRg-9Z46zrGn7LlRnGBFYVvwFmazG5PXv0ZkZQ7qRn3avmoiPaOPSp-Q9jZ9d7i6_wZ7NxNz4iHFeOEccdj2oSTYBkpxHPLtz5ZlRI/s1600/RSS2.png)top no-repeat;}
.post-footer-line > * {
margin-left: 0;
}
</style>

<div class="social-icone">
<a href="http://www.youtube.com/subscribe_widget?p=th3oussama">
<div class="you-icone">
<b>1.000</b>
<span>مشترك</span>
</div>
</a>
<a href="http://www.twitter.com/th3oussama">
<div class="twt-icone">
<b>1.000</b>
<span>متابع</span>
</div>
</a>
<a href="https://www.facebook.com/pages/محترفي-الكمبيوتر/518750001517312">
<div class="face-icone">
<b>1.500</b>
<span>معجب</span>
</div>
</a>
<a href="http://feedburner.google.com/fb/a/mailverify?uri=th3oussama">
<div class="rss-icone">
<b>1.000</b>
<span>مشترك</span>
</div>
</a>
</div>

5 - يجب تغيير ما باللون الأحمر داخل الكود إلى الروابط الخاصة بك على مواقع التواصل الأجتماعى...