إضافة اداة المواقع الاجتماعية بشكل عائم

السلام عليكم ورحمه الله وبركاته اللهم صلى على سيدنا محمد و على ال سيدنا محمد

اهلا بكم احبائي متابعي مدونة نقطة إبداع وزواره الكرام في هذه التدوينة الجديدة والحصرية علي مدونة نقطة إبداع 

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

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

قم بالذهاب الى القالب من لوحة التحكم في مدونتك ثم تحرير html ثم تقوم بالبحث عن ]]></b:skin> قم بوضع الكود التالي قبلها(فوقها)

 .socialsider_left_middle a:hover {opacity: 1111;}
.socialsider { width:70px; display:block; -webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-ms-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease;  }
.socialsider ul { list-style-type:none; margin:0; padding:0; }
.socialsider li { margin:0; padding:0; }
.socialsider a { overflow:hidden; height:41px;display:block; text-decoration:none; -webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-ms-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all 0.3s ease; position:relative;}
.socialsider a::after { display:block; font-family:'socicon'; text-decoration:none; font-size:20px; padding:10px; position:absolute;left:0;top:0;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-ms-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all 0.3s ease; }
.socialsider_fixed { position:fixed; }
.socialsider_absolute { position:absolute; }
/* Effects */
.socialsider_radius a { border-radius:5px; }
.socialsider_shadow a { -webkit-box-shadow: 0 0 2px 2px rgba(0,0,0,0.2);box-shadow: 0 0 2px 2px rgba(0,0,0,0.2); }
.socialsider_opacity a { opacity:0.6; }
.socialsider_opacity a:hover::after { opacity:1; }
.socialsider_spacer a { height:42px; margin-bottom:1px; }
.socialsider.socialsider_bgcolor_white a i {font-size: 23px;margin: 9px 10px 0px 0px;}
.socialsider_left_middle { left:-30px; top:30%; }
.socialsider_left_middle.socialsider_hidden { left:-45px;}
.socialsider_left_middle.socialsider_hidden:hover { left:-25px; }
.socialsider_left_middle a { left:0px;}
.socialsider_left_middle a::after { padding-left:40px; }
.socialsider_left_middle a:hover { left:10px; }
.socialsider.socialsider_bgcolor_white a{ color:#FFF;}
.socialsider.socialsider_bgcolor_white a[data-socialsider='twitter']{ background:#4da7de;}
.socialsider.socialsider_bgcolor_white a[data-socialsider='facebook'] { background:#3e5b98;}
.socialsider.socialsider_bgcolor_white a[data-socialsider='youtube']{ background:#e02a20;}
.socialsider.socialsider_bgcolor_white a[data-socialsider='instagram'] { background:#E5C538;}
.socialsider.socialsider_bgcolor_white a[data-socialsider='blogger']{ background:#ec661c;}
.socialsider.socialsider_bgcolor_white a[data-socialsider="tumblr"]{background:#45556C;} 

ثم تقوم بالبحث عن </body> قم بوضع الكود التالي قبلها(فوقها)

<div class='socialsider socialsider_left_middle socialsider_fixed socialsider_bgcolor_white socialsider_radius socialsider_spacer socialsider_opacity socialsider_hidden '><ul>
<li><a data-socialsider='facebook' href='https://www.facebook.com/PointEbda3' title='Facebook'><i class='fa fa-facebook'/></a></li>
<li><a data-socialsider='twitter' href='https://twitter.com/PointEbda3' title='Twitter'><i class='fa fa-twitter'/></a></li>
<li><a data-socialsider='youtube' href='https://www.youtube.com/channel/UCl9uGoET-YwwnxKtCyfhozw' title='YouTube'><i class='fa fa-youtube'/></a></li>
<li><a data-socialsider='instagram' href='http://instagram.com/' title='Instagram'><i class='fa fa-instagram'/></a></li>
</ul></div>