-->
العربي ويب العربي ويب
recent

آخر الأخبار

recent
recent
جاري التحميل ...

اضافة أزرار مواقع التواصل فى السيدبار بـ 5 أشكال إحترافية

اضافة أزرار مواقع التواصل فى السيدبار بـ 5 أشكال إحترافية
السلام عليكم ورحمة الله تعالى وبركاته

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

خطوات إضافة أزرار مواقع التواصل على مدونتك

تابع معي ...

أولا - توجه الى لوحة تحكم مدونتك  من هنا 
2 - قالب (المظهر) >> تحرير Html >>

3 - إبحث عن الوسم التالي بالضغط على Ctrl + F
<head/>
4 - أضف فوقه خط الايقونات Font Awesome
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
5 - قم بحفظ المظهر وتابع الشرح

6 - الآن توجه الى التخطيط >> إضافة أداة Html >>

7 - أضف الشكل الذي يناسبك في أداة Html جديدة

الشكل الأول
الكود
<style>
.to-social-follow{width:300px;padding:10px;margin:0}.to-social-follow .fa{font-size:18px;padding:16px;text-align:center;margin:5px 2px;width:20%;text-decoration:none;color:#fff}.to-social-follow .fa:hover{opacity:.7}.to-social-follow .fa-facebook{background:#3B5998}.to-social-follow .fa-twitter{background:#55ACEE}.to-social-follow .fa-google{background:#dd4b39}.to-social-follow .fa-linkedin{background:#007bb5}.to-social-follow .fa-youtube{background:#b00}.to-social-follow .fa-instagram{background:#125688}.to-social-follow .fa-pinterest{background:#cb2027}
</style>
<div class="to-social-follow">
<a href="#" class="fa fa-facebook" target="_blank"></a>
<a href="#" class="fa fa-twitter" target="_blank"></a>
<a href="#" class="fa fa-google" target="_blank"></a>
<a href="#" class="fa fa-linkedin" target="_blank"></a>
<a href="#" class="fa fa-youtube" target="_blank"></a>
<a href="#" class="fa fa-pinterest" target="_blank"></a>
</div>
الشكل الثاني
الكود
<style>
ul.techornate-follow-buttons a:hover{color:#03c9a9}.techornate-follow-buttons.b-title li{text-align:center;background-color:#fff;width:31.5%;border:1px solid #eee}.techornate-follow-buttons.b-title a{text-transform:uppercase;text-decoration:none;margin:20px auto 0;font-size:10px}.techornate-follow-buttons li{display:inline-block;padding:0 0 7px;margin-bottom:3px!important}.techornate-follow-buttons li:last-child{border-bottom:1px solid #eee!important;padding-bottom:7px!important}.techornate-follow-buttons.b-title i{margin:0 auto 10px;display:block}.techornate-follow-buttons.style-1 i{height:32px;width:32px;line-height:32px;font-size:20px;margin:10px auto 0;text-align:center;color:#333}
</style>
<ul class='techornate-follow-buttons style-1 b-title'>
<li><a href='#'><i class="fa fa-facebook"></i>facebook</a></li>
<li><a href='#'><i class="fa fa-twitter"></i>twitter</a></li>
<li><a href='#'><i class="fa fa-google"></i>google +</a></li>
<li><a href='#'><i class="fa fa-pinterest"></i>pinterest</a></li>
<li><a href='#'><i class="fa fa-linkedin"></i>linkedin</a></li>
<li><a href='#'><i class="fa fa-instagram"></i>instagram</a></li>
</ul>
الشكل التالث
الكود
<style>
.techornate-social-buttons ul{padding-left:0;list-style:none}.techornate-social-buttons li a{text-transform:uppercase;text-decoration:none;padding:10px 1px 10px 10px;letter-spacing:2px;font-size:10px;color:#fff;display:block;border-radius:3px}.techornate-social-buttons ul li{margin-bottom:10px;width:100%}.techornate-social-buttons li a i{width:35px;height:14px;float:right;padding:0 0 0 10px;margin:0;font-size:14px;line-height:14px;border-left:1px solid #B1B1B1}.techornate-social-buttons li a.social-btn-facebook{background:#3b5998}.techornate-social-buttons li a.social-btn-twitter{background:#1da1f2}.techornate-social-buttons li a.social-btn-youtube{background:#cd201f}.techornate-social-buttons li a.social-btn-instagram{background:#405de6}.techornate-social-buttons li a.social-btn-google{background:#dd4b39}
</style>
<div class="techornate-social-buttons">
<ul class="sidebar-social clearfix">
<li><a href="#" class="social-btn-facebook">Like on Facebook <i class="fa fa-facebook"></i> </a></li>
<li><a href="#" class="social-btn-twitter">Follow on Twitter <i class="fa fa-twitter"></i> </a></li>
<li><a href="#" class="social-btn-google">Follow on Google+ <i class="fa fa-google"></i> </a></li>
<li><a href="#" class="social-btn-instagram">Follow on Instagram <i class="fa fa-instagram"></i> </a></li>
<li><a href="#" class="social-btn-youtube">Subscribe on Youtube <i class="fa fa-youtube"></i> </a></li>
</ul>
</div>
الشكل الرابع
الكود
<style>
.s-text strong,.social-counter{font-weight:900}.techornate-socials a{display:block;color:#fff;padding:12px 15px;position:relative;margin-bottom:5px;text-decoration:none}.techornate-socials a span,.techornate-socials a:before{z-index:2;position:relative}.social-counter{position:absolute;font-size:14px;line-height:1;padding-top:4px}.s-text{float:right}.techornate-socials a:after{content:" ";height:100%;width:0;top:0;left:0;position:absolute;background:#252b42;z-index:1}.fa-facebook:before,.fa-subscribe:before,.fa-twitter:before{display:inline-block;width:16px;font-family:FontAwesome;margin-right:10px;padding-right:10px;font-size:18px;border-right:1px solid rgba(255,255,255,.3)}.fa-facebook{background:#1c3e67}.fa-facebook:before{content:"\f09a"}.fa-twitter{background:#28a6c5}.fa-twitter:before{content:"\f099"}.fa-subscribe{background:#d2002c}.fa-subscribe:before{content:"\f167"}
</style>
<div class="techornate-socials">
<a target="_blank" href="#" class="fa-facebook"><span class="social-counter">146,200</span><span class="s-text">Follow us on <strong>Facebook</strong></span></a>
<a target="_blank" href="#" class="fa-twitter"><span class="social-counter">50,748</span><span class="s-text">Follow us on <strong>Twitter</strong></span></a>
<a target="_blank" href="#" class="fa-subscribe"><span class="social-counter">33,175</span><span class="s-text">Subscribe us on <strong>YouTube</strong></span></a>
<div class="clear"></div>
</div>
الشكل الخامس
الكود
<style>
ul.techornate-social-share{padding:0;margin:0;overflow:hidden}ul.techornate-social-share li{list-style:none;float:left;margin-right:4%;width:48%;margin-bottom:10px;background:#fafafa;overflow:hidden}ul.techornate-social-share li a{text-decoration:none;display:inline-block;float:left;color:#fff;height:40px;width:40px;text-align:center;font-size:14px;line-height:40px;margin-right:16px;position:relative;transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out}ul.techornate-social-share li a:after{height:0;width:0;top:50%;left:100%;content:'';margin-top:-4px;position:absolute}ul.techornate-social-share li a.facebook{background:#436feb}ul.techornate-social-share li a.facebook:after{border:4px solid #436feb;border-top-color:transparent;border-bottom-color:transparent;border-right-color:transparent}ul.techornate-social-share li a.twitter{background:#43c9eb}ul.techornate-social-share li a.twitter:after{border:4px solid #43c9eb;border-top-color:transparent;border-bottom-color:transparent;border-right-color:transparent}ul.techornate-social-share li a.google{background:#f14133}ul.techornate-social-share li a.google:after{border:4px solid #f14133;border-top-color:transparent;border-bottom-color:transparent;border-right-color:transparent}ul.techornate-social-share li a.youtube{background:#b00}ul.techornate-social-share li a.youtube:after{border:4px solid #b00;border-top-color:transparent;border-bottom-color:transparent;border-right-color:transparent}ul.techornate-social-share li a:hover{opacity:.7}ul.techornate-social-share li span{font-size:12px;margin:0;line-height:15px;color:#999;font-weight:700;display:block}ul.techornate-social-share li span.scount-number{margin-top:5px;color:#333}ul.techornate-social-share li:nth-child(2n){margin-right:0}
</style>
<ul class="techornate-social-share">
<li> <a href="#" class="facebook"><i class="fa fa-facebook"></i></a> <span class="scount-number">44,143</span> <span>Fans</span></li>
<li> <a href="#" class="twitter"><i class="fa fa-twitter"></i></a> <span class="scount-number">39,505</span> <span>Followers</span></li>
<li> <a href="#" class="google"><i class="fa fa-google-plus"></i></a> <span class="scount-number">25,203</span> <span>Followers</span></li>
<li> <a href="#" class="youtube"><i class="fa fa-youtube"></i></a><span class="scount-number">7,456</span> <span>Subscribers</span></li>
</ul>
لتخصيص الإضافة

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


تم بحمد الله ...


أي أسئلة أو إستفسار حول الموضوع لا تتردد في طرحها
باب التعليقات مفتوح للجميع

لا تنسى مشاركة التدوينة مع الأصدقاء عبر مواقع التواصل ليستفيد الجميع

إدعمنا لكي نستمر في تقديم المزيد

كاتب الموضوع

محمد العربي

2 تعليق على موضوع : اضافة أزرار مواقع التواصل فى السيدبار بـ 5 أشكال إحترافية

  • اضافة تعليق
  • أزال أحد مشرفي المدونة هذا التعليق.


    الأبتساماتأخفاء الأبتسامات



    ஜ العربي ويب ஜ | ஜ شعارنا إثراء المحتوى العربي ஜ

    إضغط على | إنضم لموقعنا + متابعتنا عبر مواقع التواصل | وكن أول من يتوصل بجديدنا

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

    إتصل بنا

    اخر تعليقات بلوجر

    تغريداتي علي التويتر

    زوار المدونة

    Statistics

    احصاءات المدونة

    جميع الحقوق محفوظة لـ

    العربي ويب

    2017

    –>