إضافة أزرار المواقع الإجتماعية إلى مدونتك بشكل مميز

بفضل الله تحصلت هذا الأسبوع على كود جميل لأزار المواقع الإجتماعية ( Youtube, Twitter, Facebook, Rss ) أزار خفيفة و جميلة بتغير لونها عند وضع مؤشر الفأرة عليها كما تحتوي على عدد المشتركين عند الضغط عليها تفتح في صفحة جديدة أي من الروابط الخارجية

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

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

التركيب يكون على مرحلتين المرحلة الأولى نقوم بوضع الكود في القالب أما المرحلة الثانية سنقوم بوضع كود أخار يتضمن روابط حساباتك الخاصة على المواقع الإجتماعية و عدد المتابعين

المرحلة الأولى :

نتوجه إلى لوحة تحرير ال 'HTML' ( قم بأخذ نسخة إحتياطية للقالب )

نقوم توسيع عناصر واجهة المستخدم

الأن إضغط Ctrl+F و إبحث عن الوسام ]]></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/AVvXsEhKv75hJAJ0jD06dHzy8bQtIfoZk2hj_j-yPA_YJeORdOC_72dPZ3MsP5UjcP8tfRvCdIHMzQGYZh6ZaGUJX1LoXswmS2rpW645uo491fOEXQHRNgCZl_MgqfnT-X67RLYp10lKe8rV9fU/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/AVvXsEiZBtjFjzEFTuNln4zyS9_SAFx4qHEJkr3H7aXThTQlFu3TdLwKtLfLd_RUSsE8UDmUyLVG1UKzhw0oKrCTwIR3phsf8EjduYx9KXk1usazkSjKHxkusY3J7l4tnViO5sbWjSP61fWsJLM/s1600/youtube2.png)top no-repeat;}

.twt-icone{

width: 50px;

height: 32px;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5FlF44hbDuvZ3f_nDyqSi4ghESkeFi6JIK6vSICXlkc4QPU2PglSZG-4ILFhIammrOAfR86lHATpp5Tkv99-jOaaR7w0j7U7bDWUr7Ve9uins-V_GY-QAiXh-s66D-aTsj3bTGp4A29w/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/AVvXsEjlNt7VMcfwhYfvFcluBkud2DIzscV0i3KBRqFnJryaIeqpL9LhHsWvQ22-HzfhDEo4m1Y0iYW8dU3MpwcvBncaAaFDE8AMOKh8sBt117o7o_upYgZVM8krL7vlCnxB0DEReJtup_z6J2U/s1600/twitter2.png)top no-repeat;}

.face-icone{

width: 50px;

height: 32px;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRENwMRgs25PZNMVxSoZTIEgy1OI-x3hQab5Tr8SePjRd-z7qEtpnkCAx7Y6pqa6xm5p_bS4rd9HngMfU5zL9PuY58WQ1nhanYQeLS3OxHSuDqHG-3YZZI3W8Rjb5rfw3_3jodKKF3ZXk/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/AVvXsEhOzWWo0sZznDnGH669ptbYcDeeX0meuIzOxywmcqkOOEM0b7Koszk3teJ2aFvyOOandx0uRt1M9SL3aY4t-by4OksPNo_4adIOkBGNBo-0efoG4YOxZnd0XnmSAPi1uhzbR7c_qcg1B0o/s1600/facebook2.png)top no-repeat;}

.rss-icone{

width: 50px;

height: 32px;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMGVoGu59B2OBDLbom6J00xZv3iq58MvQuQKWBe1kKrk6zahFa7wn25SFV2taxJn8ZdQja76snusP5hDth7krUL9nOmnGzMV86QkL_BFYoN7eFePaRBNo1fCAC1EjTmYpS68ZZ6RwGW1M/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/AVvXsEjVsPdu8fPkS91LA5S5l4CGtXmO2OEIQ9BURGVtTFoG8V6XUEMdo5DOl-Y2pmhzc8ant898wJ8AHnE4TwgQ7uFmJa1h4R0tGe7E8uB9pBrnUtXpGBkb-7fZfpv7t0VuwEOtn2oXmJJlMNY/s1600/RSS2.png)top no-repeat;}

.post-footer-line > * {

margin-left: 0;

}

الأن قم بحفظ القالب و هكذا نكون قد أكملنا المرحلة الأولى !

المرحلة الثانية :

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

كود:

<div class="social-icone">
<a href="http://www.youtube.com/user/mrjaabiriovic"rel="nofollow" target="_blank">
<div class="you-icone">
<b>400</b>
<span>مشترك</span>
</div>
</a>
<a href="http://www.twitter.com/altari9"rel="nofollow" target="_blank">
<div class="twt-icone">
<b>1000</b>
<span>متابع</span>
</div>
</a>
<a href="https://www.facebook.com/altari9"rel="nofollow" target="_blank">
<div class="face-icone">
<b>350</b>
<span>معجب</span>
</div>
</a>
<a href="http://feeds.feedburner.com/al-tari9"rel="nofollow" target="_blank">
<div class="rss-icone">
<b>2.000</b>
<span>مشترك</span>
</div>
</a>
</div>