اضافة تابعنا عبر الشبكات الاجتماعية - شكل مميز وجذاب

 بسم الله الرحمن الرحيم اللهم صل علي نبينا محمد في الاولين وصل عليه في الاخرين وصل عليه في كل وقت وحين وصل عليه في الملا الاعلي الي يوم الدين , متابعين مدونة كمبيوتر كوم اليوم لقد اتيت لكم باضافة تابعنا عبر الشبكات الاجتماعية بشكل جميل وجذاب مثل مدونة المحترف :) 

صورة الاضافة : 

شرح تركيب الإضافة:

اولا : توجه الى لوحة تحكم مدونتك ثم القالب ثم تحرير html  واضغط على متابعة و علم  على خانة توسيع عناصر واجهة المستخدم ثم ابحث عن ]]></b:skin> 

واضف قبلها هذا الكود : 

.social-icone{ height:108px;}

.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/AVvXsEjqYCD76lzlnYNCbspwRBC3AV3LW-GLcmTzEzUbJIxJh3Yvt8Y3mXD84MVn2iO6lJNwbRd7joi_pWVrFw0r7_MUp999pCL14nbSUggIgusCzR2NHwXxx1plOJsbAjeyTcRzq8XCG3401ew/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/AVvXsEjqRHLEns-Awk6VNZENdIDeKI-xt5AuNwqU6VhBp61eOrDUopbJR3LyLTvQzg1If4K-1E0JT6bykkXRYCJihn_t86tInfAhwiGFsFZ2r8PCiYNNbQJkHE9TOJ_GIcHkTyUtjkFmu7codT0/s1600/youtube2.png)top no-repeat;}

.twt-icone{

width: 50px;

height: 32px;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQs1Baw06hWWcrIYiKE1Dplef5OnCjdq_zgpYmeBFFxd3YRfMf2-XOpvlPf6JvCcmnXJVZ1eFRAMYJgFuGNIhyphenhyphenB_qXQFTSp7hjNSmJwhkWAsw2FvzYDv_d4C4XNkE5N8v5A-yhYCZaVTw/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/AVvXsEipM_o39LX2TUNnZKOQFbY_nuN91nIM5-5lCD9t8jWKPs3Un2Ez2UVJh6JYtdBwtI9nmtYkebyORRpaDhiYwIGGQ3RRBz_WmjSXnDhCVcgrbg0OphPk8suebAcdbnYOpBt18BVEvdmQr8o/s1600/twitter2.png)top no-repeat;}

.face-icone{

width: 50px;

height: 32px;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh36gLS91qnR-EBZDUUYySxmPu2ROocoBZFighHbbvRitbk5kfN2mA8cs5zPn7QpJWUEP2WmTlbz3N6g8N6v0XmPcS5ycMbVSXvKMVQVT-ghNy3c7hgHbal4hO56q912FQnkj7dXmJbpoA/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/AVvXsEiO3jcpo2Cx8giK9njZA9aASJRNCrN1YYoSu-rOrPSU9bvHJS9fkqTFUVONS-rSzZf1sFiqh-rBlENz5wqf6v-EUSm1sjlHK_qSh7KLM3tXA7fb0cPz0030drK_q_u9fAIhQ4-S4gq242Y/s1600/facebook2.png)top no-repeat;}

.rss-icone{

width: 50px;

height: 32px;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_iKm0wiIgf8Pkg15NDbsMzEpjrv4ufZgDUSalgb1-Rb7WR9HJa4eIklRBFKUsYPqAeLp68KhPPguVs0CjL41CR3eCP5cr_HMdm_wPwfkSZQQiRkMk69e0bsWi32C8WYJjhvX3jMnnh_s/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/AVvXsEgOryTvvz3xlvT33vnY4iQMxUnCx3U-gFG7W0wROX6PETwAKXODjdnCAyC6n5clr5ZrV7X7s6H09A4YNjEiP3Z9KmUJsdEPfCeT-ZrAO-Nm4oKicrFmGm5bM73R7fJqgC5Y4na7RT1rISU/s1600/RSS2.png)top no-repeat;}

.post-footer-line > * {

margin-left: 0;

}

ثم اضغط على حفظ :) 

ثانيا :  نذهب للوحة التحكم , التخطيط  , ثم اضافة اداة جديدة جافا اسكربت وتضيف الكود التالي :

<div class="social-icone">
<a href="http://www.youtube.com/user/geekraghib">
<div class="you-icone">
<b>99.000</b>
<span>مشترك</span>
</div>
</a>
<a href="http://www.twitter.com/mr_raghib">
<div class="twt-icone">
<b>4500</b>
<span>متابع</span>
</div>
</a>
<a href="https://www.facebook.com/TH3.professional">
<div class="face-icone">
<b>250 ألف</b>
<span>معجب</span>
</div>
</a>
<a href="http://feedburner.google.com/fb/a/mailverify?uri=raghib">
<div class="rss-icone">
<b>10.000</b>
<span>مشترك</span>
</div>
</a>
</div>

----------------------------------------------------