اضافة أداة مواقع التواصل فى الشريط الجانبي

هذه طريقة سهله جدا تركيب الإإضافة من خلال التخطيط فقط سوف تقوم بوضع الكود التالى فى إضافة جديده.

المتابعين من أهم الأمور الذي يجب الاهتمام بها بحيث تلبي طلباتهم وتحل مشاكلهم, وجميعنا نحب أن يكون لنا العديد من المتابعين ولجلب متابعين يجب علينا الاهتمام في تسهيل لهم الطرق بحيث نعمل لمدونتنا صفحات في مواقع التواصل الاجتماعي ومحاولة ترويجها إلى زوار مدوناتنا ,لذالك نقدم لكم كواد لمدونة بلوجر.

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

1-الشكل الأول:

<link href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
<div class="kt-social-buttons-widget">
<ul class="sidebar-social clearfix">
<li><a href="#" class="social-btn-twitter">تابعنا عبر تويتر<i class="fa fa-twitter"></i></a></li>
<li><a href="#" class="social-btn-facebook">تابعنا عبر الفيس بوك <i class="fa fa-facebook"></i></a></li>
<li><a href="#" class="social-btn-youtube">تابعنا في اليوتيوب <i class="fa fa-youtube"></i></a></li>
<li><a href="#" class="social-btn-instagram">تابعنا في انستجرام <i class="fa fa-instagram"></i></a></li>
</ul>
</div>
<style>

.kt-social-buttons-widget ul {
list-style: none;
padding-left: 0;
    text-align: center;
}
.kt-social-buttons-widget li a {
font-size: 10px;
text-transform: uppercase;
    letter-spacing: 0px;
text-decoration: none;
display: block;
padding: 10px 1px 10px 10px;
}
.kt-social-buttons-widget ul li {
width: 100%;
margin-bottom: 10px;
}
.kt-social-buttons-widget li a.social-btn-twitter {
background: #1da1f2;
color:#fff;
}
.kt-social-buttons-widget li a i {
float: right;
width: 35px;
height: 14px;
line-height: 14px;
text-align:center ;
margin: 0;
padding: 0 0 0 10px;
font-size: 14px;
}
.kt-social-buttons-widget li a i {
border-left: 1px solid #666;
line-height: 14px;
}
.kt-social-buttons-widget li a.social-btn-facebook {
background: #3b5998;
color:#fff;
}
.kt-social-buttons-widget li a.social-btn-youtube {
background: #cd201f;
color:#fff;
}
.kt-social-buttons-widget li a.social-btn-instagram {
background: #405de6;
color:#fff;
}
.kt-social-buttons-widget li a:hover {
color: #0a0a0a !important;
background:#f8f8f8 !important;
}

</style>

<link href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
<div class="kt-social-buttons-widget"><ul class="sidebar-social clearfix">
<li><a href="#" class="social-btn-twitter">تابعنا عبر تويتر<i class="fa fa-twitter"></i> </a></li>
<li><a href="#" class="social-btn-facebook">تابعنا عبر الفيس بوك <i class="fa fa-facebook"></i> </a></li>
<li><a href="#" class="social-btn-youtube">تابعنا في اليوتيوب <i class="fa fa-youtube"></i> </a></li>
<li><a href="#" class="social-btn-instagram">تابعنا في انستجرام <i class="fa fa-instagram"></i> </a></li>
</ul></div>
<style>


.kt-social-buttons-widget ul {
list-style: none;
padding-left: 0;
    text-align: center;
}
.kt-social-buttons-widget li a {
font-size: 10px;
text-transform: uppercase;
    letter-spacing: 0px;
text-decoration: none;
display: block;
color: #0a0a0a;
padding: 10px 1px 10px 10px;
background:#f8f8f8;
}
.kt-social-buttons-widget ul li {
width: 100%;
margin-bottom: 10px;
}
.kt-social-buttons-widget li:hover a.social-btn-twitter {
background: #1da1f2;
color:#fff;
}
.kt-social-buttons-widget li a i {
float: right;
width: 35px;
height: 14px;
line-height: 14px;
text-align:center ;
margin: 0;
padding: 0 0 0 10px;
font-size: 14px;
}
.kt-social-buttons-widget li a i {
border-left: 1px solid #666;
line-height: 14px;
}
.kt-social-buttons-widget li:hover a.social-btn-facebook {
background: #3b5998;
color:#fff;
}
.kt-social-buttons-widget li:hover a.social-btn-youtube {
background: #cd201f;
color:#fff;
}
.kt-social-buttons-widget li:hover a.social-btn-instagram {
background: #405de6;
color:#fff;
}


</style>