[حصريا] إضافة اداة المواقع الاجتماعية بشكلها الجديد (عائمة)

الكاتب بتاريخ عدد التعليقات : 0

مرحبا بكم اخوتي واخواتي ومتابعين مدونة مهووسين الويب في شرح جديد في مدونتانا المتواضعة مدونة مهووسين الويب شرح اليوم عن إضافاة من إضافات بلوجر وهذه الاضافة لها اشكال عديدة وطرق مختلفة ولكن هذه احدث طريقة وحصرية على مدونة مهووسين الويب الأداة رائجة كثيرا في مدونات بلوجر الحديثة وانا شخصيا استخدمها في مدونتي الان
طريقة التركيب
قم بالذهاب الى القالب من لوحة التحكم في مدونتك
ثم تحرير 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:&#39;socicon&#39;; 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;color: #fff;}
.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=&#39;twitter&#39;]{ background:#4da7de;}
.socialsider.socialsider_bgcolor_white a[data-socialsider=&#39;facebook&#39;] { background:#3e5b98;}
.socialsider.socialsider_bgcolor_white a[data-socialsider=&#39;youtube&#39;]{ background:#e02a20;}
.socialsider.socialsider_bgcolor_white a[data-socialsider=&#39;instagram&#39;] { background:#E5C538;}
.socialsider.socialsider_bgcolor_white a[data-socialsider=&#39;blogger&#39;]{ background:#ec661c;}
.socialsider.socialsider_bgcolor_white a[data-socialsider=&quot;tumblr&quot;]{background:#45556C;} 
ثم اضف الكود التالي في اداة من التخطيط
<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/th3geekweb3" title="Facebook"><i class="fa fa-facebook"></i></a></li>
<li><a data-socialsider="twitter" href="https://twitter.com/almahmod2013" title="Twitter"><i class="fa fa-twitter"></i></a></li>
<li><a data-socialsider="youtube" href="https://www.youtube.com/aboyazanllm3lomat" title="YouTube"><i class="fa fa-youtube"></i></a></li>
</ul></div> 

0 تعليق على موضوع " [حصريا] إضافة اداة المواقع الاجتماعية بشكلها الجديد (عائمة) "

████ شروط التعليق ████
1- يجب على التعليق أن يكون بلا روابط إشهارية
2- أن يكون التعليق خاص بمحتوى التدوينة
3- لإضافة كود حوله أولاً بمحول الأكواد
4- لاستعمال خط عريض ضع الكود : <strong>النص هنا...</strong>
5- لاستعمال خط مائل ضع الكود : <em>النص هنا...</em>
6- لإضافة صورة ضعها بهذا الكود : <i rel="image"> ... رابط الصورة هنا ... </i>

الإبتسامات إخفاء