أزرار المشاركات بشكل مميز

بفضل الله تحصلت هذا الأسبوع على كود جميل لأزار المواقع الإجتماعية ( 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(http://2.bp.blogspot.com/-ds8qOnEouw...outube.png)top no-repeat; text-align: center; padding-top: 56px; float:right; } .you-icone:hover{background:url(http://1.bp.blogspot.com/-3ph-4nN00s...utube2.png)top no-repeat;} .twt-icone{ width: 50px; height: 32px; background:url(http://2.bp.blogspot.com/-UkgHer_Y6o...witter.png)top no-repeat; text-align: center; padding-top: 56px; float:right; } .twt-icone:hover{background:url(http://2.bp.blogspot.com/-tY5SrlJev7...itter2.png)top no-repeat;} .face-icone{ width: 50px; height: 32px; background:url(http://2.bp.blogspot.com/-bjxmNtZSed...cebook.png)top no-repeat; text-align: center; padding-top: 56px; float:right; } .face-icone:hover{background:url(http://2.bp.blogspot.com/-7phJl6JL7A...ebook2.png)top no-repeat;} .rss-icone{ width: 50px; height: 32px; background:url(http://3.bp.blogspot.com/-amcTTFtnos...00/RSS.png)top no-repeat; text-align: center; padding-top: 56px; float:right; } .rss-icone:hover{background:url(http://4.bp.blogspot.com/-yNGQ0JC185...0/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" rel="nofollow" target="_blank"> <div class="you-icone"> <b>400</b> <span>مشترك</span> </div> </a> <a href="http://www.twitter.com/altari9"rel="nofollow" rel="nofollow" target="_blank"> <div class="twt-icone"> <b>1000</b> <span>متابع</span> </div> </a> <a href="https://www.facebook.com/altari9"rel="nofollow" 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" rel="nofollow" target="_blank"> <div class="rss-icone"> <b>2.000</b> <span>مشترك</span> </div> </a> </div>