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

بسم الله الرحمن الرحيم

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

هذه شكل الاضافة

نبدا بالخطوات :

1- نسجل الدخول الي بلوجر 

2- ثم نتجه إلى تحرير ال 'HTML' ( و ناخذ نسخة إحتياطية للقالب ) حتي اذا حصل اي خطأ عن اضافة الكود نكون بامان

3- ثم توسيع قوالب عناصر واجهة المستخدم كما بالصورة:

4- نقوم بالبحث عن ]]></b:skin> و لفتح صندوق البحث إضغط علي Ctrl+F

واضف قبلها مباشرة هذا الكود :

.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; }

5- ثم نقوم بحفظ القالب

6- نتجه إلى لوحة التحكم ثم التخطيط ثم الضغط علي اضافة اداة جديدة HTML وتضيف هذا الكود :

<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>

7- قم بتغيير :

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

'altari9' إلى معرف حسابك على التويتر مع تغير عدد المتابعين '1000'

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

'al-tari9' إلى معرف حسابك على الفيدبيرن مع تغير عدد المشتركين '2.000'

تم الانتهاء من درس اليوم ... و السلام عليكم و رحمة الله و بركاته

شارك هذا المنشور