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

بفضل الله تحصلت هذا الأسبوع على كود جميل لأزار المواقع الإجتماعية ( 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>

الأن قم بتغير :

1. 'MrJaabiriovic'إلى معرف قناتك على اليوتوب مع تغير عدد المستركين '400'
2. 'altari9'إلى معرف حسابك على التويتر مع تغير عدد المتابعين '1000'
3. 'altari9'إلى معرف صفحتك على الفيسبوك مع تغير عدد المعجبين '350'
4. 'al-tari9'إلى معرف حسابك على الفيدبيرن مع تغير عدد المشتركين '2.000'

الأن قم بحفظ الأدات و مبارك لك الأزرار الجديدة !

هل أعجبك الموضوع ؟

بقلم عبو محمد زكرياء

مدون جزائري مهووس بجديد التكنولوجيا والإنترنيت هدفي مشاركة تجربتي مع باقي رواد النت الفيسبوك . تويتر . جوجل بلس