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




هناك الكثير من الإضافات الخاصة بالمشاركة الإجتماعية ، لكن هذه الإضافة متميزة ب :
* التحرك علي جانب المدونة مع متصفح المدونة
* عدم التسبب بإزعاج المتصفح بسبب عدم ظهرها إلا برغبة الزائر

فمع إنتشار أدوات المشاركة الإجتماعية لما فيها من زيادة في عدد زوار المدونات ، إلا أن مدراء المدونات لا يأخذون راحة المتصفح بعين الإعتبار .
فهكذا أحضرت لكم خصيصا هذه الإضافة التي  صممها المصمم شان ديب الذي يعمل في شركة جي كويري  ، اما مثال الإضافة فهو في الصورة التالية :

شرح الإضافة :

من لوحة تحكم المدونة أذهب إلي قالب ثم تحرير html :
أبحث عن الوسم :
</head>
ألصق فوقه مباشرة الكود التالي :
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> 
<script src='http://apis.google.com/js/plusone.js' type='text/javascript' >{lang: &#39;en-US&#39;} </script>
في حال سبق و كانت مدونتك تحتوي علي مكتبة جي كويري تجنب وضع السطر الأول

* و الآن أذهب إلي التخطيط و أختر إضافة  أداة html/javascript

و ضع الكود التالي ثم أحفظ

<script type="text/javascript">
    /*<![CDATA[*/
    jQuery(document).ready(function () {
        jQuery(".hbslidebox").hover(function () {
            jQuery(this).stop().animate({
                left: "0"
            }, "medium");
        }, function () {
            jQuery(this).stop().animate({
                left: "-70"
            }, "medium");
        }, 500);
    });
    /*]]>*/
</script>
<style type="text/css">
    .hbslidebox {
        background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpivdyC1-fUv_KniUCz03HP4swSBd2hVIVGSokyfvWbpYzRgNcr2C7k4YtzvT4hrHWNKsrppvqHAwqZEbTqMuPA9U640afonp2zpyM7Q58j_52GpJBDdDVtVtjP9ru0r1gVPJhV5hJO9Q/s1600/helperblogger.com-tab_left_vertical.png") no-repeat scroll right top transparent !important;
        display: block;
        float: left;
        height: auto;
        padding: 0 45px 0 0px;
        width: 65px;
        z-index: 99999;
        position:fixed;
        left:-70px;
        top:20%;
    }
    .hbslidebox div {
        border:none;
        position:relative;
        display:block;
    }
    #floatingbuttons {
        background: #fff;
        border-radius: 5px 5px 5px 5px;
        border: 1px solid #CCCCCC;
        float:left;
        padding:0 0 3px 0;
        bottom:15%;
        z-index:399;
    }
    #floatingbuttons .floatbutton {
        float:left;
        clear:both;
        margin:5px 4px 0 4px;
    }
    .addbuttons {
        clear:both;
        text-align:center;
        padding-top:5px;
    }
    .addbuttons a span.getfloat, .addbuttons a span.sharebuttons {
        color:#000;
        background:none;
        font-family:arial, sans-serif;
        display:block;
        font-size:9px;
        font-weight:bold;
        text-decoration:none;
        line-height:11px;
    }
    .addbuttons a:hover span {
        color:#fff;
        background:none;
        text-decoration:underline;
    }
</style>
<div class="hbslidebox" style="">
    <div>
        <div id='floatingbuttons' title="Share this post!">
            <script src="http://connect.facebook.net/en_US/all.js#xfbml=1">
                
            </script>
            <script type="text/javascript">
                (function () {
                    var s = document.createElement('SCRIPT'),
                        s1 = document.getElementsByTagName('SCRIPT')[0];
                    s.type = 'text/javascript';
                    s.async = true;
                    s.src = 'http://widgets.digg.com/buttons.js';
                    s1.parentNode.insertBefore(s, s1);
                })();
            </script>
            <!-- Medium Button -->
            <script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script>
            <div class='floatbutton' id='facebook'>
                <fb:like layout="box_count" show_faces="false" font=""></fb:like>
            </div>
            <div class='floatbutton' id='google+1'>
                <g:plusone size="tall"></g:plusone>
            </div>
            <div class='floatbutton' id='stumbleupon'>
                <script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
            </div>
            <div class='floatbutton' id='digg'>
                <a class="DiggThisButton DiggMedium"></a>
            </div>
            <div class='floatbutton' id='twitter'>
                <a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</a>
            </div>
            <div class="addbuttons">
                <a href="http://esrare.blogspot.com/2012/09/jQuery-SHARE.html" title="أضغط هنا لتحصل علي الإضافة!"><span class="getfloat">إضافة المشاركة الإجتماعية</span></a>
            </div>
        </div>
    </div>
</div>

تعليقات

  1. شكرا لك على هذه المعلومات القيمة التي استفدت منها الكثير
    في موقعي
    www.bramjkom.com

    ردحذف
  2. جزاك الله خيرا كثيرا علي معلوماتك القيمة للغاية

    http://alyomtop.blogspot.com/

    ردحذف
  3. شكرا على الشرح
    http://ps-tek.blogspot.com/

    ردحذف
  4. Wondегful blog! I founԁ іt while searching on Yahoо News.
    Do you have аnу tіpѕ on how to gеt listed in Үаhoo News?
    I've been trying for a while but I never seem to get there! Appreciate it

    Here is my web site: hcg diet blog
    My website - hcg before and after

    ردحذف
  5. أزال المؤلف هذا التعليق.

    ردحذف
  6. مشكور أخي بوركت وسلمت اناملك المبدعة

    ردحذف
  7. موقع مدونتي :
    http://sarasotor.blogspot.com/

    ردحذف
مرحب بك للتعليق و مشاركة رأيك

التسميات

أخبار ، news إدارة الإجهاد في العمل أدسنس أدوات أرخص إشتراك مدفوع إصلاح خطأ إضافات بلوجر أفضل أفضل 10 أفضل 4 أفضل 5 أفضل 7 إكس أكواد أكواد الألوان الإسلام البحث عن وظائف البحث عن وظيفة البرامج التسويق بالعمولة التصميم التصوير التصوير الاحترافي الجزائر الحماية الذكاء الاصطناعي، تطبيقات ،أندرويد ،الآيفون الربح من الانترنت الربح من النت الشراء عبر الإنترنت في الجزائر العمل العمل والتوظيف ألوان الوان أندرويد إيثريوم أيردروب بايبال بايبال، ماستر كارد،فيزا،تفعيل،paypal بدون رأس مال بلوجر بيتس ستوديو 3 بيتس ستوديو برو بيتكوين تبادل إعلاني تخفيضات،كوبون،شراء،ربح تدوينة تطيقات تعيين مستشار وظيفي تواصل اجتماعي توظيف توظيفـ، سيرة ذاتية تويتر جي كويرى حد إدخال الأحرف حد إدخال الأحرف في ChatGPT حساب حساب فاتورة الكهرباء خطأ خطأ 740 على ويندوز خطأ ويندوز دراسة دروس بلوجر ر ربح ساعة سكربتات مواقع سلسلة كيف تربح من مدونتك سوناطراك شرح شرح بالفيديو شركات استضافة شركات استضافة مواقع صور طرق طريقة طريقة إصلاح عام 2023 عامل مستقل عملات غوغل فاتورة الكهرباء فايس بوك فوركس في فيديوهات ترفيه فيس بوك قابلة للطي قوالبي كاميرا كانفا كتب تعليمية كسب المال كمبيوتر كيفية الشراء من Aliexpress ليتكوين مجانيات محفظة مراجعة مسابقات مستشار وظيفي مشاكل بلوجر مشكلة مشكلة ChatGPT مُصور مُصور هاوٍ مصورًا محترفًا مقارنة مقارنة،هواوي،آبل،آيباد إير مقالات منصات منوعات مواقع نتفليكس نصائح نصاب هاوٍ هواتف هواتف قابلة للطي هواوي واتش 4 برو وظيفة وورد بريس ويندوز ويندوز 10 ويندوز 11 يوجوف Aliexpress bitsler Chatgpt ChatGPT Plus fiverr GPT-4 HTML jQuery youtube

نموذج الاتصال

إرسال