بفضل الله تحصلت هذا الأسبوع على كود جميل لأزار المواقع الإجتماعية ( 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/AVvXsEi8R0wd_MoGmL6nI1oXTs8d9LKzb7hosvno9JpKDTexnFTiYH1t3kybtoKtZl4wjncDfCJE6vO7ZU1RcrRHGv4Aqh9As-KXjc0Tkz2x6SuTIxHulC7utBH4FOVBPs7nM1kalxuXTFABnCA/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/AVvXsEgcgC0LQOHdZSRTVmu-myOe4824GNvtQ2AaQJNywpPp7o9hIBm86-n6MjVCK6_QknoV3XvQjmSeVO1fH7k12iotvw9l06Xcnn6FiDSf2S41q9QKpk0IeV2nef_yKopC_7srwqYqm8qfJT8/s1600/youtube2.png)top no-repeat;}
.twt-icone{
width: 50px;
height: 32px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbNf8l7HojRESwelamaa8OGJnrEZStGzUWXwB3NqLEKXNaLvQMxM-OBbCYznGue2jFIZCUaFb-GilEn_MOPLkm9i6szakdJsg9mPDZKKFMdZSbXxkKgTL66NZY4LZX9nPJLXcCCjMqxkI/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/AVvXsEgwROFQBTBbum_ZtAGh6uzbySXQcFtyrZeTCEN0yba3P6Qre-0ufZKXwyFGJFCvJPOtWL9cXsOUae4Mzk0Lb53dcEY4ZyaEtfotHPDsyIViWDB2xiV5_zpCL6Fb61ru6c-hP1mBqXiNcbU/s1600/twitter2.png)top no-repeat;}
.face-icone{
width: 50px;
height: 32px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMhIDcN19GsUqTkAChjcL346xTuzR23JF_ByS1EN5m-iHgA6S7BpbTyZZRoSsQd8P9xvhZaLRCNNk2olLPRzvcLw5-TBab5KxaWKyn07YH-EATmkGN2pMYdpg8m0sMNAmeoKBIYdAXFGU/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/AVvXsEhidjylQkTiUD7oHla4YTAi-4BFsC4lRyr4DDmJN7XFVKk7JQSMNoctjtDYzD442nYSF5D1lWw8SQlbm3O1Tod-rFTBJaCDyLLL2K-97pfc7MFnoZUOrMM7hD-SxeqTS_Zs7iyGG5EGSOw/s1600/facebook2.png)top no-repeat;}
.rss-icone{
width: 50px;
height: 32px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVA50ewCyxQtNsT0B5mkCM7cFLXlvwNxCpkoiIlYwfP2n3sX2dPrGIyn3YPYWADHhvBdrUzyHDU9HcRZ608mQIc-UGTydXiBaQbIHtAO2Xne1HMEqquzLTKaUnO_Fmcr20hKMEeJMiO8c/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/AVvXsEjDSWIhvR0dz2kCttcDkV5VZLdahrCojk60X65Zq2mTr80jH5Icd3URslEoo2GyyuHKtznNZ72hQqmg_z79DSlCshKlWNqbOofYdiTpRTp0xL0LiG-00n98VkEC1-2s1QeDbNlVfJflrcI/s1600/RSS2.png)top no-repeat;}
.post-footer-line > * {
margin-left: 0;
}
الأن قم بحفظ القالب و هكذا نكون قد أكملنا المرحلة الأولى !
- المرحلة الثانية :
نتوجه إلى لوحة التحكم , التخطيط , ثم اضافة اداة جديدة جافا اسكربت وتضيف الكود التالي :
كود:
<div class="social-icone">
<a href="http://www.youtube.com/user/xxxxx"rel="nofollow" target="_blank">
<div class="you-icone">
<b>400</b>
<span>مشترك</span>
</div>
</a>
<a href="http://www.twitter.com/99999"rel="nofollow" target="_blank">
<div class="twt-icone">
<b>1000</b>
<span>متابع</span>
</div>
</a>
<a href="https://www.facebook.com/fffff"rel="nofollow" target="_blank">
<div class="face-icone">
<b>350</b>
<span>معجب</span>
</div>
</a>
<a href="http://feeds.feedburner.com/mmmmm"rel="nofollow" target="_blank">
<div class="rss-icone">
<b>2.000</b>
<span>مشترك</span>
</div>
</a>
</div>
- 'xxxxx'إلى معرف قناتك على اليوتوب مع تغير عدد المستركين '400'
- '99999'إلى معرف حسابك على التويتر مع تغير عدد المتابعين '1000'
- 'fffff'إلى معرف صفحتك على الفيسبوك مع تغير عدد المعجبين '350'
- 'mmmmm'إلى معرف حسابك على الفيدبيرن مع تغير عدد المشتركين '2.000'
الأن قم بحفظ الأدات و مبارك لك الأزرار الجديدة !
شاركها !
الموضوع من طرف : Unknown
مدون مغربي ؛ يعشق التدوين ؛ يهتم بمتابعة أخبار التكنولوجيا ؛ هدفي مساعدة الاخرين على تطوير قدراتهم وتقديم لهم الدعم . يمكنك متابعتي من خلال : الفيسبوك. تويتر. جوجل بلس
