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

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

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

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

معاينة أداة مواقع التواصل

معاينة الإضافة 

صورة من أداة مواقع التواصل

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

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

ابحث أولا عن هذا الوسم]]></b:skin>وقم بوضع الكود التالى فوقه.

.fb-bg:hover, .twi-bg:hover, .g-bg:hover, .ins-bg:hover, .lin-bg:hover {background:#303030;}
.fb-icon-bg {
 background: #354f88;
 height: 37px;
 margin: 0 0 -37px 0;
  text-align: center;
 width: 41px; 
}

.fb-icon-bg:after {
 content: "\f09a"; font-family: FontAwesome;
  display: block;
  padding: 9px 10px 5px 15px;
color:#fff;
}

.fb-bg {
 background: #3b5998;
 display: block;
 height: 37px;
 margin: 0 41px 10px 0;
}

.fb-bg:after {
 color: #fff;
 content: "فيسبوك";
 height: 37px;
 right: 8%;
 position: relative;
 
 top: 22%;
 width: 41px; 
}

.fb-bg:hover{
  cursor: pointer;
}

.fb-bg:active{
  background: #354f88;
}

/* Twitter */
.twi-icon-bg:after {
 content: "\f099"; font-family: FontAwesome;
  display: block;
  padding: 11px 10px 6px 11px;
color:#fff;
}

.twi-icon-bg {
 background: #40a2d1;
 height: 37px;
 margin: 0 0 -37px 0;
  text-align: center;
 width: 41px; 
}

.twi-bg {
 background: #45b0e3;
 height: 37px;
 margin: 0 41px 10px 0;
}
 
.twi-bg:after {
 color: #fff;
 content: "تويتر";
 height: 37px;
  right: 11%;
 position: relative;

 top: 22%;
  width: 41px; 
}

.twi-bg:hover {
  cursor: pointer;
}

.twi-bg:active {
  background: #40a2d1;
}

/* Google+ */
.g-icon-bg:after {
 content: "\f0d5"; font-family: FontAwesome;
  display: block;
  padding: 11px 10px 6px 13px;
color:#fff;
}

.g-icon-bg {
 background: #ce3e26;
 height: 37px;
 margin: 0 0 -37px 0;
  text-align: center;
 width: 41px; 
}
 
.g-bg {
 background: #de4c34;
 height: 37px;
     margin: 0 41px 10px 0;
}
 
.g-bg:after {
 color: #fff;
 content: "جوجل بلس";
 height: 37px;
 right: 10%;
 position: relative;
 
 top: 22%;
 width: 41px; 
}

.g-bg:hover {
  cursor: pointer;
}
.lin-icon-bg {
    background: #075e8c;
    height: 37px;
    margin: 0 0 -37px 0;
  text-align: center;
    width: 41px;
}
.lin-icon-bg:after {
    content: "\f0e1";
    font-family: FontAwesome;
    display: block;
    padding: 11px 10px 6px 13px;
    color: #fff;
}
.lin-bg {
    background: #0077B5;
    height: 37px;
    margin: 0 41px 10px 0;
}
.lin-bg:after {
    color: #fff;
    content: "لينكد إن";
    height: 37px;
    right: 10%;
    position: relative;
    top: 22%;
    width: 41px;
}
.ins-icon-bg {
    background: #ffc238;
    height: 37px;
    margin: 0 0 -37px 0;
  text-align: center;
    width: 41px;
}
.ins-icon-bg:after {
    content: "\f16d";
    font-family: FontAwesome;
    display: block;
    padding: 11px 10px 6px 13px;
    color: #fff;
}
.ins-bg {
    background: #ffd438;
    height: 37px;
    margin-right: 41px;
}
.ins-bg:after {
    color: #fff;
    content: "إنستقرام";
    height: 37px;
    right: 10%;
    position: relative;
    top: 22%;
    width: 41px;
}

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

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

<a href="#">
<div class="fb-icon-bg"></div>
    <div class="fb-bg"></div></a>
  <a href="#">
  <div class="twi-icon-bg"></div>
    <div class="twi-bg"></div></a>
  <a href="#">
  <div class="g-icon-bg"></div>
    <div class="g-bg"></div>
  </a>
<a href="linkedin-url">
  <div class="lin-icon-bg"></div>
    <div class="lin-bg"></div>
  </a>
<a href="instagram-url">
  <div class="ins-icon-bg"></div>
    <div class="ins-bg"></div>
  </a>

بعد ذلك قمت بتغيير الرابط فى الإكواد وقمت بحذف الإضافة ومبورك عليك.

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

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

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

<a href="#">
<div class="fb-icon-bg"></div>
    <div class="fb-bg"></div></a>
  <a href="#">
  <div class="twi-icon-bg"></div>
    <div class="twi-bg"></div></a>
  <a href="#">
  <div class="g-icon-bg"></div>
    <div class="g-bg"></div>
  </a>
<a href="linkedin-url">
  <div class="lin-icon-bg"></div>
    <div class="lin-bg"></div>
  </a>
<a href="instagram-url">
  <div class="ins-icon-bg"></div>
    <div class="ins-bg"></div>
  </a>
<style>
.fb-bg:hover, .twi-bg:hover, .g-bg:hover, .ins-bg:hover, .lin-bg:hover {background:#303030;}
.fb-icon-bg {
 background: #354f88;
 height: 37px;
 margin: 0 0 -37px 0;
  text-align: center;
 width: 41px; 
}

.fb-icon-bg:after {
 content: "\f09a"; font-family: FontAwesome;
  display: block;
  padding: 9px 10px 5px 15px;
color:#fff;
}

.fb-bg {
 background: #3b5998;
 display: block;
 height: 37px;
 margin: 0 41px 10px 0;
}

.fb-bg:after {
 color: #fff;
 content: "فيسبوك";
 height: 37px;
 right: 8%;
 position: relative;
 
 top: 22%;
 width: 41px; 
}

.fb-bg:hover{
  cursor: pointer;
}

.fb-bg:active{
  background: #354f88;
}

/* Twitter */
.twi-icon-bg:after {
 content: "\f099"; font-family: FontAwesome;
  display: block;
  padding: 11px 10px 6px 11px;
color:#fff;
}

.twi-icon-bg {
 background: #40a2d1;
 height: 37px;
 margin: 0 0 -37px 0;
  text-align: center;
 width: 41px; 
}

.twi-bg {
 background: #45b0e3;
 height: 37px;
 margin: 0 41px 10px 0;
}
 
.twi-bg:after {
 color: #fff;
 content: "تويتر";
 height: 37px;
  right: 11%;
 position: relative;

 top: 22%;
  width: 41px; 
}

.twi-bg:hover {
  cursor: pointer;
}

.twi-bg:active {
  background: #40a2d1;
}

/* Google+ */
.g-icon-bg:after {
 content: "\f0d5"; font-family: FontAwesome;
  display: block;
  padding: 11px 10px 6px 13px;
color:#fff;
}

.g-icon-bg {
 background: #ce3e26;
 height: 37px;
 margin: 0 0 -37px 0;
  text-align: center;
 width: 41px; 
}
 
.g-bg {
 background: #de4c34;
 height: 37px;
     margin: 0 41px 10px 0;
}
 
.g-bg:after {
 color: #fff;
 content: "جوجل بلس";
 height: 37px;
 right: 10%;
 position: relative;
 
 top: 22%;
 width: 41px; 
}

.g-bg:hover {
  cursor: pointer;
}
.lin-icon-bg {
    background: #075e8c;
    height: 37px;
    margin: 0 0 -37px 0;
  text-align: center;
    width: 41px;
}
.lin-icon-bg:after {
    content: "\f0e1";
    font-family: FontAwesome;
    display: block;
    padding: 11px 10px 6px 13px;
    color: #fff;
}
.lin-bg {
    background: #0077B5;
    height: 37px;
    margin: 0 41px 10px 0;
}
.lin-bg:after {
    color: #fff;
    content: "لينكد إن";
    height: 37px;
    right: 10%;
    position: relative;
    top: 22%;
    width: 41px;
}
.ins-icon-bg {
    background: #ffc238;
    height: 37px;
    margin: 0 0 -37px 0;
  text-align: center;
    width: 41px;
}
.ins-icon-bg:after {
    content: "\f16d";
    font-family: FontAwesome;
    display: block;
    padding: 11px 10px 6px 13px;
    color: #fff;
}
.ins-bg {
    background: #ffd438;
    height: 37px;
    margin-right: 41px;
}
.ins-bg:after {
    color: #fff;
    content: "إنستقرام";
    height: 37px;
    right: 10%;
    position: relative;
    top: 22%;
    width: 41px;
}
</style>

ايضا سوف تقوم بتغيير الرابط بما تريدها وقم بحفظ الإضافة .

هذا كل شئ فى موضوع اليوم بالتوفيق للجميع وأنتظرونا بكل جديد بأذن الله على المدونة ، لا تنس مشاركة الموضوع حتى يتسفيد غيرك وأى مشكلة تجدها تضعها فى تعليق .