إضافة أيقونات التواصل الإجتماعي بمظهر جديد واحترافي

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

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

معاينة الإضافة
إضغط للمشاهدة

طريقة التركيب

1- نبحث عن ]]></b:skin> ونضيف هذا الكود فوقه.

.social {
  position: fixed;
  top: 25%;
  left:0px;
z-index:999999999999999999999999999999;
}
.social ul {
  padding: 0px;
  -webkit-transform: translate(-270px, 0);
  -moz-transform: translate(-270px, 0);
  -ms-transform: translate(-270px, 0);
  -o-transform: translate(-270px, 0);
  transform: translate(-270px, 0);
}
.social ul li {
  display: block;
  margin: 5px;
  background: #e5bd01;
  width: 300px;
  text-align: right;
  padding: 10px;
  -webkit-border-radius: 0 30px 30px 0;
  -moz-border-radius: 0 30px 30px 0;
  border-radius: 0 30px 30px 0;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -ms-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}
.social ul li:hover {
  -webkit-transform: translate(20px, 0);
  -moz-transform: translate(20px, 0);
  -ms-transform: translate(20px, 0);
  -o-transform: translate(20px, 0);
  transform: translate(20px, 0);
  background: #1b58b3;

}
.social ul li:hover a {
  color: #000;
}
.social ul li:hover i {
  color: #fff;
  background: rgba(0, 0, 0, 0.36);
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  transform: rotate(360deg);
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -ms-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}
.social ul li i {
  margin-left: 10px;
  color: #000;
  background: #fff;
  padding: 10px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-size: 20px;
  background: #ffffff;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
}

2- ابحث عن </head> وضع هذا الكود تحته.

<nav class="social">
          <ul>
              <li><a href="#" target="_blank"><i class="fa fa-twitter"></i></a></li>
              <li><a href="#" target="_blank"><i class="fa fa-facebook"></i></a></li>
               <li><a href="#" target="_blank"><i class="fa fa-youtube"></i></a></li>
               <li><a href="#" target="_blank"><i class="fa fa-instagram"></i></a></li>
                <li><a href="#" target="_blank"><i class="fa fa-google-plus"></i></a></li>
                <li><a href="#" target="_blank"><i class="fa fa-android"></i></a></li>
                 <li><a href="#"><i class="fa fa-apple"></i></a></li>
                

          </ul>
      </nav>

ومن ثم اضغط معاينة المدونة وستكون أيقونات التواصل الاجتماعي قد ظهرت على يسار الشاشة بالمظهر الجديد.

لا تنسوا أن تكون من اعضاء المدونة يمكنك الانضمام  من هنا