مواقع التواصل الاجتماعى بشكل جانبى مطور

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

يمكنك معاينة الاضافة معاينة مباشرة حية

من هنا

شرح التركيب 

اذهب للوحة التحكم >> التخطيط >> اضافة أداة >> HTML/JAVASCRIPT

ضع بها هذا الكود مع مراعاة التعديلات 

<style type="text/css">
/* Go To myebd3at.blogspot.com */
ul#social {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 20%;
    left: 0px;
    list-style: none;
    z-index:9999;
}
ul#social li {
    width: 100px;
}
ul#social li a {
    display: block;
    margin-left: -2px;
    width: 100px;
    height: 70px;
    background-color:#fff;
    background-repeat:no-repeat;
    background-position:center center;
    border:1px solid #AFAFAF;
    -moz-border-radius:0px 10px 10px 0px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-top-right-radius: 10px;
    -moz-box-shadow: 0px 4px 3px #000;
    -webkit-box-shadow: 0px 4px 3px #000;
}
ul#social .twitter a{
     background:#0F96C6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJGdeLLoopbBbZb7FAUUaQfBTSt3r2I5Z9bGMiR-Qu0XjugVn8fKTTWH9PalvVXQ39snfHu2Skv3oXjvzihZjVx-nKZFgtRFWvKaic13s6atXR8R1CjULfnBGmMd6iJv8YUmqAwTNmpiE/s1600/Twitter.png)no-repeat;
background-position:center center;
}
ul#social .googleplus a      {
    background:#D73D27 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUaodSQ3JkRnXAht2Fd519Er2bHIAHtWeA-ECzN0o23qYdVStqsEIMRb0MnU-b55zrHPNX-kVXtY1E4WAr5RqS4tkeT14zeIYZRzytTVdtb3Go32UGjVmt2vwxGeIxFGw_WduD-j7Fk9I/s1600/GOOGLE+PLus.png)no-repeat;
background-position:center center;
}
ul#social .facebook a      {
    background:#1A4B97 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjibZj6IDHN95cc-7IFTZvwTPMbWEVyAXNSyRBLxIDLNlW9sA23Vy4Zg6dtyo5NZNm2ZgMFR7mR8MgnCiItP0BwJqu_EaGtBaII2NdvSb_079HRo8-fAGXUJj1vNqpe2Z41g90N_b9c7P0/s1600/Facebook.png)no-repeat;
background-position:center center;
}
ul#social .rss a      {
    background:#FAAE17 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx7wtP3J6Q4xe6vmYQI3Q2HLovij1926bFQV1nkgoNtYDGvBYcsZRgYm_ncfhJ0bW0H5YQ7iik2k8jQwhCUkjrUAhGCYFONfJduQMaCiGXhMlps1f2QhMx23krQ0DZxf8hTi5ct13cZXs/s1600/rss.png)no-repeat;
background-position:center center;
}
ul#social .pinterest a   {
    background:#963336 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicAsHqAgGvALhyZnkpfwV-4-8QcgDoAVUbz7rGq8hUMofZzm3gCtj6AVqRKSeLZaT6xbPuGFUrSYTNjBV_vyAXPhgh6jhZ-PkAcm96eIqpX4Om1pq-9zeqA2LZSqy8izjFhheL75YDy7I/s1600/Pinterest.png)no-repeat;
background-position:center center;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
    $('#social a').stop().animate({
        'marginLeft': '-85px'
    }, 1000);
    $('#social > li').hover(
        function () {
            $('a', $(this)).stop().animate({
                'marginLeft': '-2px'
            }, 200);
        },
        function () {
            $('a', $(this)).stop().animate({
                'marginLeft': '-85px'
            }, 200);
        }
    );
});
/* Go To myebd3at.blogspot.com */
</script>
<br />
<ul id="social">
<li class="facebook"><a href="URL" title="Facebook"></a></li>
<li class="twitter"><a href="URL" title="Twitter"></a></li>
<li class="googleplus"><a href="URL" title="Google Plus"></a></li>
<li class="rss"><a href="URL" title="Rss"></a></li>
<li class="pinterest"><a href="URL" title="Pinterest"></a></li>
</ul>

◄ استبدل URL برابط حسابك على كل موقع على حدة 

◄ ولحذف رمز اى موقع قم بحذف السطر الخاص به    

√ فى انتظار تعليقاتكم المشجعة على تقديم المزيد √