أبدأ الكتابة ثم أضغط انتر للبحث

عذرا !

لا نستطيع أيجاد الصفحة المطلوبة

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

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

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

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

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

      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>

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

      شارك الموضوع مع أصدقائك

      ليست هناك تعليقات:

      إرسال تعليق

      لا تنسى أن تدعمنا بتعليق

      مساحة إعلانية
      مساحة إعلانية
      جميع الحقوق محفوظة 2018 لوكو تك
      تصميم : آمني