بسم الله الرحمن الرحيم اللهم صل على نبينا محمد في الاولين وصل عليه في الاخرين وصل عليه في كل وقت وحين وصل عليه في الملا الاعلي الي يوم الدين ، متابعينا على مدونة عالم محترفي المعلوميات لقد اتيت لكم باضافة تابعنا عبر الشبكات الاجتماعية بشكل جميل وجذاب.
صورة الاضافة :
شرح تركيب الإضافة:
اولا : توجه الى لوحة تحكم مدونتك ثم القالب ثم تحرير 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/AVvXsEg8w1-jaugAeOc2Mic_vv_6TbL2P4rFtNutG0OV9q61Zl_LtwF4iVZxijsihxG80yFNyNqQNoM5Ih8MvDfCeR2eIYmYNLFRCOV6nv_kMlz-SLBmbWcclxLUtW-9OXL4KIP8i5DP9m_aLVs/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/AVvXsEhdePjHjVfW3SwxZCjLiCTrKcN9i1fT1stLrFrvcYHwVuT7QoE3OozeO81vb6b_oPs3uOKYCsQH0MNFzvSd6v7rxKQsCdMLDotT-CBrNRzSZtdBUEa0eDL0O2jS3gZT5rHMxAxa5xGtDCI/s1600/youtube2.png)top no-repeat;}
.twt-icone{
width: 50px;
height: 32px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiieIIgNOJIDHHbSsNHu6ccGEqZmpDBGAZYqFVwvD82XXS8LKCGtBqOMVkbSsO9X65KpsslMwIhAq0G8hyhYXrjDJ10A2AERM95Ne22dLa6bWoYkMFXKk4tlT_StK2b3S2AELFnG4eolMg/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/AVvXsEg8jjIOCDYpT4_x28sqZPEgA60NsgphLyt4PvmnHw50G7tfz80umTNRKjC9rGnsOeOQy-IKBY2DXEbRbAC3hdlrN9szRg-9v9g5eejkxOVCwhnzECYuAx4nSdg62CupmP3ZWZguvZTX6mU/s1600/twitter2.png)top no-repeat;}
.face-icone{
width: 50px;
height: 32px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2eeKr_oRhoFA3uacKSLzt67LD37yE5OEROT4SpMxO3nVxrykvGAEM83l3iC5qNX_gQo-MCl8SdV3uA3fXiTKeiY3xL3Em0hm2vM9r4869EbcYzPRx5piWFMejm-3bY3sP_uw_fl7UXQc/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/AVvXsEizslnTgQSa0tw18oazrXUN_ZB36wrjzWnvcxpv0xu02WxWCH0-zFg_zXmtMRYowbHInEelnY9cnxmTrSj-ayYe35EBVL_Rs-_peZrafn8z2qNVuTSNZ2JOy8VogqPjjbgI1pRKZVvzf4U/s1600/facebook2.png)top no-repeat;}
.rss-icone{
width: 50px;
height: 32px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzYAID-fskGLqF4j6sh7W8x9-eiU_2qsQFH2XtnZemrJh2CgBch7PMTI8K7V1ToRVNJMmXNRQvqIHJyf5LD1XAtJyUUNnH_HulF-8_J4CZwrXpfV3zeHftesK3I0OfS3ShmHx068IRkko/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/AVvXsEikD9_xrip4AmH98s0xtf0ghu-6WiSoG28ZorKz0-0xqZgHmxPd0b2wmXVzj9bABX5di7o7GSS3FWk4RQlSMOc1cOi1sOZR7m8PI8zRxLJkWKkiPui3X92vllSSy-eo9JdOWcwXzPQKLDE/s1600/RSS2.png)top no-repeat;}
.post-footer-line > * {
margin-left: 0;
}
ثم اضغط على حفظ :)
ثانيا : نذهب للوحة التحكم , التخطيط , ثم اضافة اداة جديدة جافا اسكربت وتضيف الكود التالي :
<div class="social-icone">
<a href="http://www.youtube.com/user/th4proinformatique">
<div class="you-icone">
<b>99.000</b>
<span>مشترك</span>
</div>
</a>
<a href="https://twitter.com/AmineBrieje">
<div class="twt-icone">
<b>4500</b>
<span>متابع</span>
</div>
</a>
<a href="https://www.facebook.com/th4pro.info">
<div class="face-icone">
<b>250 ألف</b>
<span>معجب</span>
</div>
</a>
<a href="http://feedburner.google.com">
<div class="rss-icone">
<b>10.000</b>
<span>مشترك</span>
</div>
</a>
</div>
<a href="http://www.youtube.com/user/th4proinformatique">
<div class="you-icone">
<b>99.000</b>
<span>مشترك</span>
</div>
</a>
<a href="https://twitter.com/AmineBrieje">
<div class="twt-icone">
<b>4500</b>
<span>متابع</span>
</div>
</a>
<a href="https://www.facebook.com/th4pro.info">
<div class="face-icone">
<b>250 ألف</b>
<span>معجب</span>
</div>
</a>
<a href="http://feedburner.google.com">
<div class="rss-icone">
<b>10.000</b>
<span>مشترك</span>
</div>
</a>
</div>
----------------------------------------------------
انتظرونا المرة القادمة :)