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

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

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

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

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

اولا : توجه الى لوحة تحكم مدونتك ثم القالب ثم تحرير 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/AVvXsEh4VK-zItXe66G8U1OcsILCSgxf-aNwjL4SKJOmzDEH00fNIVq1IgQsl6kUV4r-m3fY6zfQ9JXVLx7UuUrZwqXUYT8Yv9626aCiZ3lA9Nl2nOkebmXBKHRRc0FhtI-GPWiwX4ZYfHyrtB8/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/AVvXsEiGklNh3SuCony14_bChA2aERRJ-Hq-Lb-HSoPz2CyqSpsQZciTzEqDxLv-k16RcmM-db3CiR1sUPn5YVW5THEVnCWeYcxdUH9B1cR8k-X5YJk8lJfLUBUVJxtwDD9KTYbd-DTJg_MqVzE/s1600/youtube2.png)top no-repeat;}

.twt-icone{

width: 50px;

height: 32px;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYOfzrZIDGaL-WXd5p5Iw5CMytcx8eQQzgSwyZ3PKiVkQZ6Xz00hX3zI8_LcuBBBK5IADgNBacpuDhjivcy6Hna51zIrKFHTJPtRl39syfeKQkkKbO5Y47ZbSsCpBV0eCknEk7LuMOFII/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/AVvXsEieSVOW2Y1oDBNBFIqMBz4DUyYVQ-caoCJb3Akgb78prtuVM56QQEhCC1jLtmHnHqajzwR6zbD4GBN7ErQTpK0H954WJX0HQMhaWP1LMFo6_hEV6lZGHjUO1sjp0e_gBLnsRZsmb7iNCaU/s1600/twitter2.png)top no-repeat;}

.face-icone{

width: 50px;

height: 32px;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBO8rKX-p2n2blA-1szq7enNgUkyPCFxxrVtG-u5ua4IDxt-56p8tAmUUNYZ5A5pRRHFGLlxzRnkj4VleDoyv8_nwrcR-GOV360YMGLtmhRvAs5UvzsLjbIbGUZ_Vp0rxfzhzagHu2zhc/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/AVvXsEhtAMU2PewSAgMg7yMLY4URoQ7chNJiS_FFbqV1LWPnjUjsDmULnqu365Obw_eEQR3uHUJtcyyySz_BYuSlsIKupxaXcEMInJC8hgNgQBN7dejwd-qg8JwkG6r_d-nvxCXh0RQBDY7sIGM/s1600/facebook2.png)top no-repeat;}

.rss-icone{

width: 50px;

height: 32px;

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

.post-footer-line > * {

margin-left: 0;

}

لا تنسى أن تقوم بحفظ القالب 

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

1.اذهب إلى لوحة التحكم
2.تخطيط أو تصميم
3.عناصر الصفحة
4.أضف أداة
5.أختار HTML/JAVASCRIPT

كود:

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

وفي الأخير قم بتغير :

'forfayssal2'إلى معرف قناتك على اليوتوب مع تغير عدد المستركين '400'

'chahidna'إلى معرف حسابك على التويتر مع تغير عدد المتابعين '1000'
'chahidna'إلى معرف صفحتك على الفيسبوك مع تغير عدد المعجبين '350'
'chahidna'إلى معرف حسابك على الفيدبيرن مع تغير عدد المشتركين '2.000'

و مبارك لك الأزرار الجديدة