الأربعاء، 1 يناير 2014

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

أدوات مواقع التواصل الاجتماعى كثيرة جدا ولكنها ليست بالجمال والاحترافية الذى ستجدها فى الأداة التى أقدمها لممتبعى مدونة ابداعاتى الكرام اليوم وهى اضافة مواقع التواصل الاجتماعى بشكل جانبى جديد وحصرى من مدونتنا المتواضعة ومن أهم مميزات الاضافة أنها تظهر على جانب المدونة فلا تشغل مساحة كبيرة من مدونتك ولكى ا أطيل عليكم هيا بنا للمعاينة والشرح المفصل 
يمكنك معاينة الاضافة معاينة مباشرة حية
شرح التركيب 
اذهب للوحة التحكم >> التخطيط >> اضافة أداة >> 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/AVvXsEjnI7k3Y7QdjwqRvSW2TekICK95VwpcmDRFGVs5U0iyMw55NoNE6qa-58yXA5OpZ0GAazouBYAI_YiC36vDbcBxXqaXNdy6K2ydLmcDrEkOw_cre07vddFKFzpYGSOTrVsz_KgiaP_xxLQ/s1600/Twitter.png)no-repeat;
background-position:center center;
}
ul#social .googleplus a      {
    background:#D73D27 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz_Zw-kRY0-r1AbweL-TGQp3Io_otEM9eXxDR4XrrABUDxsp0YO4MgrUx-8QATWjFRcokF_DH74cDiHcVXCCCpo5ytCru3H0MXqNRbLLXhMroTetIZQKlTa_gv5krYR1z3vTjrDg0hFKA/s1600/GOOGLE+PLus.png)no-repeat;
background-position:center center;
}
ul#social .facebook a      {
    background:#1A4B97 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiL2ztUX_Vt1MAtah2W76MNHYUM-8EZQG5DHXVDl5f9ebG5RwKXyavgVsQfT7zlNc8h1lW6_xjrKYR3tQTPuotNeq_EvnIF7DKXk9XRsGXtf3VMsL7E6h10BhRjjx-WGJiPTNFp_9EbAU/s1600/Facebook.png)no-repeat;
background-position:center center;
}
ul#social .rss a      {
    background:#FAAE17 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioWplvIqUJiKvg8kMFzbE4k0zNgLjp5Aa1nLCLus3ZIbQAvdRIia5SmY9ti07vHKlnKOV7y-WbMHzJn6c4M0vlbMgR3RoOnD2nvDSADXFHM3VJRN3Qfq-0WZVlX_wnhptE7BnVnbhtogo/s1600/rss.png)no-repeat;
background-position:center center;
}
ul#social .pinterest a   {
    background:#963336 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXqUQASOswlgoy1-GHLINJ3-9ElHQLthEJYUxayAdTiq8-wfHYxBn3Vt_6V1yGWjwAhT36060jE1cZ02QOnHV00-2uqvmrWekX9AbXvmtrKSRBN0QJPNhSKeKTfUhCnfMSx0GKz5VZnQ8/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 برابط حسابك على كل موقع على حدة 
ولحذف رمز اى موقع قم بحذف السطر الخاص به    

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

من فضلك اضغظ لايك لمشاهدة لينك التحميل

10 التعليقات:

  1. مدونتك ممتازة والمحتوى حصرى فعلا وانا من متابعينك وموضوعاتك المميزة
    مدونة احتراف

    ردحذف
  2. مدونه رائعه وصاحبها اروع (k)

    ردحذف
  3. معك حق في كل ما قلت اخي الحبيب انا ايضا كن قد كتبت مقال حول سرقة قوالب بلوجر للقراءة من هنا
    http://pensweb.blogspot.com/2014/01/wtf-with-blogger-templ.html

    ردحذف

ملاحظة : للإبلاغ عن رابط محتوى لا يعمل المرجوا الضغط على " الاتصال السريع " في أسفل القائمة مباشرة لاصلاح الخطأ بسرعة : نحن نسعى دائما لرقي الموقع جميعا من أجل الاستقرار
جميع الحقوق محفوظة © 2014 مدونة ابداعاتىجميعا من أجل الاستقرار