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

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

معاينة اضغط للمعاينة

1. نذهب إلى قالب -----> تحرير HTML
2. ثم نضغط على CTRL +F
3. و نبحث على </b:skin>
4. و نلصق الكود التالي فوقها مباشرة

.social-links-widget {

text-align: center;

overflow: hidden;

background: #31353D url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5ne_Kn5CA-_j1n0zq4bpJ_25KGNCYw-tVU2KYlWoF7Tv2ISBJsy7WE77OoKuItzxUn9BTn9JIIPS-I04nnaNMJt5GKSpDTcpzHNZvbGvOaCpYH_OIn4Rjc00S-OycOcUmsE2U6gKS5V3c/w938-h350-no/header-6.png) repeat-y center;

padding: 8px 11px;

border-radius: 2px;

margin-bottom: 15px;

}

.social-links-widget a{display:inline-block;line-height:50px;width:50px;height:50px;color:#fff!important;font-size:20px;text-decoration:none;text-align:center;margin:5px 2px 4px 5px;border-radius:2px;float:left}.social-links-widget a.social-links-behance{background:#1769ff}.social-links-widget a.social-links-digg{background:#000}.social-links-widget a.social-links-dribbble{background:#ea4c89}.social-links-widget a.social-links-facebook{background:#3b5998}.social-links-widget a.social-links-flickr{background:#ff0084}.social-links-widget a.social-links-github{background:#4183c4}.social-links-widget a.social-links-gplus{background:#dd4b39}.social-links-widget a.social-links-instagram{background:#3f729b}.social-links-widget a.social-links-lastfm{background:#c3000d}.social-links-widget a.social-links-linkedin{background:#0976b4}.social-links-widget a.social-links-paypal{background:#253b80}.social-links-widget a.social-links-pinterest{background:#cc2127}.social-links-widget a.social-links-skype{background:#00aff0}.social-links-widget a.social-links-soundcloud{background:#f80}.social-links-widget a.social-links-spotify{background:#7ab800}.social-links-widget a.social-links-steam{background:#222}.social-links-widget a.social-links-tumblr{background:#35465c}.social-links-widget a.social-links-twitter{background:#55acee}.social-links-widget a.social-links-vimeo{background:#1ab7ea}.social-links-widget a.social-links-vine{background:#00b488}.social-links-widget a.social-links-youtube{background:#b31217}.social-links-widget a:hover{font-size:24px;opacity:.8}.social-icons{position:relative;text-align:center;float:right;margin:10px 15px 20px 0}.social-icons a{color:#fff}.social-icons .fa-youtube:before{content:'\f16a'}.social-icons a{font-size:12px;list-style:none;display:inline-block;text-align:center;height:25px;width:25px;color:#B0B0B0;line-height:26px;margin-right:2px;margin-bottom:5px;border-radius:2px;background-color:#474747;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;transition:all .3s ease}.social-icons a:hover{background-color:#f46b2e;color:#fff!important}.fa-googleplus:before{content:'\f0d5'}.fa-vimeo:before{content:'\f194'}

1. ثم نضغط على حفظ
2. ثم نذهب مباشرة إلى تخطيط و إلى Sidebar
3. و نقوم بإضافة أداة جديدة 
4. و نختار Html - JavaScripte
5. و نترك العنوان فارغ 
6. و نلصق هذا الكود داخل الإضافة

  <div class='social-links-widget cf'>

              <a class='social-links-behance waves-effect waves-light' href='#' target='_blank'>

                <i class='fa fa-behance'/>

              </a>

              <a class='social-links-dribbble waves-effect waves-light' href='#' target='_blank'>

                <i class='fa fa-dribbble'/>

              </a>

              <a class='social-links-facebook waves-effect waves-light' href='#' target='_blank'>

                <i class='fa fa-facebook'/>

              </a>

              <a class='social-links-github waves-effect waves-light' href='#' target='_blank'>

                <i class='fa fa-github'/>

              </a>

              <a class='social-links-gplus waves-effect waves-light' href='#' target='_blank'>

                <i class='fa fa-google-plus'/>

              </a>

              <a class='social-links-instagram waves-effect waves-light' href='#' target='_blank'>

                <i class='fa fa-instagram'/>

              </a>

              <a class='social-links-linkedin waves-effect waves-light' href='#' target='_blank'>

                <i class='fa fa-linkedin'/>

              </a>

              <a class='social-links-pinterest waves-effect waves-light' href='#' target='_blank'>

                <i class='fa fa-pinterest'/>

              </a>

              <a class='social-links-twitter waves-effect waves-light' href='#' target='_blank'>

                <i class='fa fa-twitter'/>

              </a>

              <a class='social-links-youtube waves-effect waves-light' href='#' target='_blank'>

                <i class='fa fa-youtube-play'/>

              </a>

              <a class='social-links-behance waves-effect waves-light' href='#' target='_blank'>

                <i class='fa fa-behance'/>

              </a>

              <a class='social-links-dribbble waves-effect waves-light' href='#' target='_blank'>

                <i class='fa fa-dribbble'/>

              </a>

            </div>

1. نقوم بتغيير # باللون الأحمر إلى الرابط الموافق لموقع التواصل الإجتماعي
2. إن كنا نريد حذف أي خافة نقوم بحذف من <a> إلى </a>

شارك الموضوع إذا أعجبك :